@sugarat/easypicker2-client 2.4.1

package/docs/plan/todo.md

@@ -0,0 +1,127 @@
+# 进展情况
+> 问题反馈交流新“地盘” => [EasyPicker](https://support.qq.com/product/444158)
+
+列举待办的内容
+* ❌: 未开始
+* 🧱: 规划中 
+* ✅: 已上线
+
+已解决&完成的问题将会在页末折叠展示
+## Bug
+| 序号 | 简介                        | 来源 | 进度 | 补充             |
+| ---- | --------------------------- | ---- | ---- | ---------------- |
+| 1    | iOS侧微信中填写表单渲染异常 | QQ群 | ❌    | 无设备，无法复现 |
+
+## Feature
+| 序号 | 简介                                                           | 来源   | 进度 |
+| ---- | -------------------------------------------------------------- | ------ | ---- |
+| 1    | 使用手册                                                       | 问卷   | 🧱    |
+| 2    | 支持查看历史的生成下载记录(包含归档文件，避免重复生成归档文件) | -      | 🧱    |
+| 3    | 文件提交，限制人员可提交次数（重复提交自动覆盖）               | QQ群   | ❌    |
+| 4    | 人员提交情况列表的图片缩略图+预览                              | QQ群   | ❌    |
+| 5    | 接口耗时统计                                                   | -      | 🧱    |
+| 6    | 支持在任务页切换同一分类下的其它任务                           | GitHub | ❌    |
+| 7    | 存储支持 oneDrive                                              | QQ群   | ❌    |
+| 8    | 支持用户自主绑定/换绑手机号                                    | -      | ❌    |
+| 9    | 任务支持多个账号共享查看数据 => 任务提交数据查看外链           | QQ群   | ❌    |
+| 10   | 提供docker镜像，一键部署应用                                   | -      | ❌    |
+| 11   | 页面中记录最近操作的任务                                       | -      | ❌    |
+| 12   | 自动部署脚本不使用机器构建，直接拉取对应产物                   | -      | ❌    |
+
+## UI
+| 序号 | 简介                                 | 来源   | 进度 |
+| ---- | ------------------------------------ | ------ | ---- |
+| 1    | 固定创建任务入口（PC/Mobile）        | GitHub | ❌    |
+| 2    | 支持移动端滑动任务设置面板的顶部菜单 | QQ群   | ✅    |
+| 3    | 支持展示预览图片的名称               | QQ群   | ✅    |
+
+
+## 完成已归档
+:::details bug 🐛
+| 序号 | 简介                                                            | 来源 | 进度 |
+| ---- | --------------------------------------------------------------- | ---- | ---- |
+| 1    | Excel报表下载打开乱码                                           | 问卷 | ✅    |
+| 2    | 下载时，会自动预览浏览器支持的文件（可以先用批量下载解决）      | -    | ✅    |
+| 3    | 创建任务后，分类列表进行了刷新                                  | -    | ✅    |
+| 4    | 带特殊字符的文件，批量下载失败                                  | QQ群 | ✅    |
+| 5    | 人员限制，部分可以提交部分不可以                                | QQ群 | ✅    |
+| 6    | 批量操作UI卡顿                                                  | -    | ✅    |
+| 7    | 单个文件记录删除，导致指向同一文件删除                          | QQ群 | ✅    |
+| 8    | 批量文件记录删除，导致指向同一文件删除                          | QQ群 | ✅    |
+| 9    | 任务删除，未删除关联文件OSS上的资源（不删除，将其单独展示出来） | QQ群 | ✅    |
+| 10   | 提交文件，未选择文件也会弹窗                                    | QQ群 | ✅    |
+| 11   | 撤回文件时，导致指向同一文件删除                                | -    | ✅    |
+| 12   | 接入腾讯云短信，少暴露了个人签名变量                            | -    | ✅    |
+| 13   | 上传文件未正确处理 ? 特殊字符                                   | QQ   | ✅    |
+| 14   | PC/H5来回切换导航栏展示异常                                     | -    | ✅    |
+| 15   | 服务在 windows上无法正常运行                                    | QQ群 | ✅    |
+| 16   | blob文件下载失败                                                | QQ群 | ✅    |
+| 17   | 无token情况下直接访问/dashboard路由报错                         | QQ群 | ✅    |
+| 18   | 登录后重定向到登录页                                            | QQ群 | ✅    |
+| 19   | Excel文件下载失败、Excel报表下载打开乱码                        | QQ群 | ✅    |  |
+| 20   | 页面 问题缺少 反馈入口                                          | -    | ✅    |  |
+| 21   | 表单项过多，无法渲染，同时影响创建更新                          | QQ群 | ✅    |  |
+|      |                                                                 |      |      |
+:::
+
+:::details features ⭐️
+
+| 序号 | 简介                                                       | 来源   | 进度 |
+| ---- | ---------------------------------------------------------- | ------ | ---- |
+| 1    | 任务支持批注功能                                           | 问卷   | ✅    |
+| 2    | 任务必填信息，支持导入模板                                 | QQ群   | ✅    |
+| 3    | 任务收集中增加限制文件类型                                 | 问卷   | ✅    |
+| 4    | 文件自动重命名后，可以增加原始文件名项                     | 问卷   | ✅    |
+| 5    | 导出的提交名单，显示提交/未提交数据                        | 问卷   | ✅    |
+| 6    | 支持直接从任务卡片跳转到文件面板展示对应任务数据           | GitHub | ✅    |
+| 7    | 添加标题进一步说明近期提交情况数据                         | GitHub | ✅    |
+| 8    | 文件提交，限制单次最大同时上传文件数量                     | GitHub | ✅    |
+| 9    | 文件提交，限制文件大小                                     | GitHub | ✅    |
+| 10   | 人员提交情况面板展示序号                                   | QQ群   | ✅    |
+| 11   | 任务信息维护面板，显示帮助提示信息（带图）                 | -      | ✅    |
+| 12   | 限制人员后，提交情况加个附件数量                           | QQ群   | ✅    |
+| 13   | 优化文件提交的导出记录展示（分开展示提交信息）             | QQ群   | ✅    |
+| 14   | 文件列表的图片缩略图+预览                                  | QQ群   | ✅    |
+| 15   | 表单支持单选多选                                           | QQ群   | ✅    |
+| 16   | 限制人员名单，支持导入模板                                 | QQ群   | ✅    |
+| 17   | 自动重命名，支持固定内容（表单支持固定内容）               | QQ群   | ✅    |
+| 18   | 表单支持下拉选择                                           | QQ群   | ✅    |
+| 19   | 上传前，显示文件的MD5校验进度                              | GitHub | ✅    |
+| 20   | 提交面板的操作提示文案                                     | -      | ✅    |
+| 21   | 撤回后建议文件列表添加提示(文件名后面加个"已撤回"提示一下) | GitHub | ✅    |
+| 22   | 提交信息面板展示人员名字                                   | QQ群   | ✅    |
+| 23   | 管理端支持直接修改账号的密码和绑定手机号                   | QQ群   | ✅    |
+| 24   | 文件列表支持文件名排序                                     | QQ群   | ✅    |
+| 26   | 应用管理刷新会404                                          | QQ群   | ✅    |
+| 26   | 简化部署步骤，部分配置移入单独控制面板                     | -      | ✅    |
+| 27   | 文档完善，添加FAQ，部署自查步骤                            | -      | ✅    |
+| 28   | 支持直接修改已提交文件的文件名                             | QQ群   | ✅    |
+| 29   | 文件面板XXG空间文案介绍更新                                | -      | ✅    |
+| 30   | 限制名单后，弹窗确认改为直接输入框输入                     | QQ群   | ✅    |
+| 31   | 添加可视化面板，配置数据库，七牛云等相关配置               | -      | ✅    |
+| 32   | 批量压缩完成后删除OSS上的中间产物                          | QQ群   | ✅    |
+| 33   | 支持单独添加限制人员                                       | QQ群   | ✅    |
+:::
+
+:::details UI/UE🪞
+
+| 序号 | 简介                                             | 来源   | 进度 |
+| ---- | ------------------------------------------------ | ------ | ---- |
+| 1    | 创建任务时，“确定”按钮可以变成绿色等明显的颜色   | 问卷   | ✅    |
+| 2    | 下拉列表限制宽度，自动截断长文案                 | -      | ✅    |
+| 3    | 显示登录的用户名                                 | -      | ✅    |
+| 4    | 任务卡片自动截断长title，居中对齐                | GitHub | ✅    |
+| 5    | 查询按钮和左边的按钮一致                         | GitHub | ✅    |
+| 6    | 退出按钮样式优化                                 | GitHub | ✅    |
+| 7    | 必填信息展示对齐                                 | GitHub | ✅    |
+| 8    | 开始上传改为提交文件                             | GitHub | ✅    |
+| 9    | 登录面板UI未对齐                                 | GitHub | ✅    |
+| 10   | “关闭” 改为 “取消”                               | GitHub | ✅    |
+| 11   | 表单页UI未对齐                                   | GitHub | ✅    |
+| 12   | 限制提示消息展示条数                             | GitHub | ✅    |
+| 13   | 上传文件列表如果能突出一下就好了, 加个边框什么的 | GitHub | ✅    |
+| 14   | 删除文件的ICON太小了                             | QQ群   | ✅    |
+| 15   | 更新提交任务页的"下载模板"文案和提示信息         | QQ群   | ✅    |
+| 16   | 调大提交按钮                                     | QQ群   | ✅    |
+| 17   | 首页大拇指错位                                   | -      | ✅    |
+:::

package/docs/plan/wish.md

@@ -0,0 +1,29 @@
+# 需求墙
+> 问题反馈交流新“地盘” => [EasyPicker](https://support.qq.com/product/444158)
+
+:::danger 优先处理Bug（应用缺陷）!!!
+如有使用上的问题，也在此处反馈
+:::
+
+:::tip 展示一些用户侧反馈的建议与使用问题
+通过投票决定下一个新功能是什么
+
+票数越多优先级越高
+
+当然你也可以提出你的建议，让大家来投票
+:::
+
+:::warning But，优先支持打赏朋友提的功能
+💐 💐 感谢各位[打赏](./../praise/index.md)的朋友，💐 💐
+:::
+
+<wish-btn />
+
+<wish-panel />
+
+## 其它方式
+
+| 加群反馈                                                                                                            | [问卷反馈](https://www.wenjuan.com/s/UZBZJvA040/#《轻取（EasyPicker）用户意见收集》，快来参与吧。【问卷网提供支持】) |
+| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| <img style="width: 240px" src="https://img.cdn.sugarat.top/mdImg/MTY0OTkwMDk2MzQ3OQ==649900963479" alt="QQ群"/> | <img style="width: 240px" src="https://img.cdn.sugarat.top/mdImg/MTY1NTYwNjA0OTc0OA==655606049748" alt="问卷"/>  |
+

package/docs/praise/index.md

@@ -0,0 +1,45 @@
+# 请作者喝茶
+
+:::tip 💰
+`EasyPicker(轻取)` 是[完全开源](https://github.com/ATQQ/easypicker2-client)&免费的Web应用！！！
+
+`EasyPicker(轻取)` 是[完全开源](https://github.com/ATQQ/easypicker2-client)&免费的Web应用！！！
+
+`EasyPicker(轻取)` 是[完全开源](https://github.com/ATQQ/easypicker2-client)&免费的Web应用！！！
+:::
+
+缘于兴趣和机缘巧合
+
+和大家一样，在学校被`收图`，`收文件`反复折磨，当时市面上也没有比较合适好用的成品
+
+这给笔者开发 `轻取` 带来了`契机`
+
+目前注册用户已经有了一定规模
+
+过程中收到许多网友的称赞与反馈，应用能被大家认可也是非常开心😄
+
+如果你觉得应用不错，可以请作者喝茶🍵
+
+:::warning 应用的开销
+* 存储 `0.15` 元/GB/月
+* 下载 `0.29` 元/GB
+:::
+
+## 打赏码
+<Praise />
+
+## 打赏记录
+| 昵称      | 日期       | 来源 | 金额  | 备注               |
+| --------- | ---------- | ---- | ----- | ------------------ |
+| Sak***iro | 2022-06-18 | 微信 | 6.66  | 加油               |
+| 欲****熊  | 2022-07-12 | 微信 | 6.66  | 我是大废物         |
+| 周****琪  | 2022-07-31 | QQ   | 35.00 | 请你喝奶茶         |
+| *了       | 2022-08-31 | 微信 | 6.66  | 加油大哥           |
+| 欲****熊  | 2022-09-12 | 微信 | 20.00 | 手动狗头 发电      |
+| 匿名˝     | 2022-09-27 | 微信 | 20.00 | 辛苦了，喝杯奶茶   |
+| 太***谦   | 2022-10-23 | 微信 | 6.66  | 加油💪🏻              |
+| *凌       | 2023-01-22 | 微信 | 6.66  | 非常好的程序，加油 |
+| *L        | 2023-01-31 | 微信 | 6.66  | -                  |
+
+
+再次感谢以上网友 💐💐

package/docs/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/docs/src/apis/ajax.ts

@@ -0,0 +1,66 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+
+const instance = axios.create({
+  baseURL: import.meta.env.VITE_APP_AXIOS_BASE_URL,
+})
+
+/**
+ * 请求拦截
+ */
+instance.interceptors.request.use((config) => {
+  const { method, params } = config
+  // 附带鉴权的token
+  const headers: any = {
+
+  }
+  // 不缓存get请求
+  if (method === 'get') {
+    headers['Cache-Control'] = 'no-cache'
+  }
+  // delete请求参数放入body中
+  if (method === 'delete') {
+    headers['Content-type'] = 'application/json;'
+    Object.assign(config, {
+      data: params,
+      params: {},
+    })
+  }
+
+  return ({
+    ...config,
+    headers,
+  })
+})
+
+// 跳转首页防抖
+let redirectHome = true
+/**
+ * 响应拦截
+ */
+instance.interceptors.response.use((v) => {
+  if (v.status === 200) {
+    if (v.data.code === 0) {
+      return v.data
+    }
+    if (v.data?.code === 3004) {
+      if (redirectHome) {
+        redirectHome = false
+        ElMessage.error('登录过期,跳转首页')
+        setTimeout(() => {
+          redirectHome = true
+        }, 1000)
+      }
+    }
+    if (v?.data?.code === 500) {
+      ElMessage.error(v?.data?.msg)
+    }
+    return Promise.reject(v.data)
+  }
+  ElMessage.error(v.statusText)
+  return Promise.reject(v)
+}, (err) => {
+  ElMessage.error(`网络错误：${err}`)
+  return Promise.reject(err)
+})
+export default instance

package/docs/src/apis/index.ts

@@ -0,0 +1 @@
+export { default as WishApi } from './modules/wish'

package/docs/src/apis/modules/wish.ts

@@ -0,0 +1,20 @@
+import ajax from '../ajax'
+
+function addWish(wish:Partial<WishApiTypes.Wish>):WishApiTypes.addWish {
+  return ajax.post(
+    '/wish/add', wish,
+  )
+}
+
+function getDocsWish():WishApiTypes.allDocsWishData {
+  return ajax.get('wish/all/docs')
+}
+
+function praiseWish(id:string) {
+  return ajax.post(`wish/praise/${id}`)
+}
+export default {
+  addWish,
+  getDocsWish,
+  praiseWish,
+}

package/docs/src/components/Avatar.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="avatar">
+        <img class="logo" loading="lazy" src="https://sugarat.top/icon.png" />
+        <div class="name">
+            <a href="https://sugarat.top" target="_blank">粥里有勺糖</a>
+        </div>
+        <div class="description">
+            前端切图仔
+            <br />热爱开源，乐于分享
+        </div>
+        <div class="links">
+            <a
+                class="github-icon"
+                href="https://github.com/ATQQ"
+                target="_blank"
+                rel="noopener noreferrer"
+            />
+        </div>
+    </div>
+</template>
+<style scoped>
+.avatar {
+    margin-top: 20px;
+    text-align: center;
+}
+.logo {
+    width: 100px;
+    border-radius: 50%;
+    margin: 0 auto;
+}
+
+.name {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 10px;
+    text-align: center;
+}
+.description {
+    margin-top: 10px;
+    text-align: center;
+    line-height: 26px;
+    opacity: 0.6;
+}
+.github-icon {
+    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2em' height='1.2em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2Z'/%3E%3C/svg%3E");
+    width: 30px;
+    height: 30px;
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+.links {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+}
+.links a {
+    display: block;
+    opacity: 0.5;
+}
+</style>

package/docs/src/components/Home.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="home">
+    <ul class="card-grid">
+      <li>
+        <h2 class="h2">微信赞赏</h2>
+        <Picture
+          style="width: 200px"
+          src="https://img.cdn.sugarat.top/mdImg/MTY0Nzc2MDE3MzM1NA==647760173354"
+        />
+
+        <div class="description">
+          如果你觉得项目不错
+          <br />
+          <span>
+            可以
+            <a href="/praise/index" style="color: #3f9eff"
+              >请作者喝 <strong>🍵</strong></a
+            >
+          </span>
+        </div>
+      </li>
+      <li>
+        <h2 class="h2">Developer</h2>
+        <div class="user-list">
+          <Avatar />
+        </div>
+      </li>
+      <li>
+        <h2 class="h2">
+          <a href="https://support.qq.com/product/444158" target="_blank"
+            >反馈交流</a
+          >群
+        </h2>
+
+        <Picture
+          style="width: 200px; margin: 10px"
+          src="https://img.cdn.sugarat.top/mdImg/MTY0Nzc1MjI3MzUwMw==647752273503"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+import Avatar from './Avatar.vue'
+import Picture from './Picture.vue'
+</script>
+
+<style scoped lang="scss">
+.home {
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.h2 {
+  opacity: 0.5;
+  text-align: center;
+}
+
+.description {
+  margin-top: 10px;
+  text-align: center;
+  line-height: 26px;
+}
+
+.action-link + .action-link {
+  margin-left: 20px;
+}
+
+.version {
+  margin: 0rem 0 2.5rem 0;
+  opacity: 0.5;
+  display: flex;
+  align-items: center;
+}
+
+.card-grid {
+  display: flex;
+  max-width: 1168px;
+  width: 100%;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+</style>

package/docs/src/components/Picture.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-image :src="src" :preview-src-list="[src]" hide-on-click-modal/>
+</template>
+<script setup lang="ts">
+import { ElImage } from 'element-plus'
+
+defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+})
+</script>

package/docs/src/components/Praise.vue

@@ -0,0 +1,52 @@
+<template>
+  <span class="praise">
+    <table>
+      <thead>
+        <tr>
+          <th v-for="(v, idx) in praiseImg" :key="idx">{{ v.title }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td v-for="(v, idx) in praiseImg" :key="idx">
+            <el-image hide-on-click-modal preview-teleported style="width: 200px; height: 200px" :src="v.url"
+              :preview-src-list="praiseImg.map(v => v.url)" :initial-index="idx" fit="cover" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </span>
+</template>
+<script setup lang="ts">
+import {
+  ElImage,
+} from 'element-plus'
+import {
+  reactive,
+} from 'vue'
+
+const praiseImg = reactive([
+  {
+    url: 'https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQ0MjMzNA==651547442334',
+    title: '微信',
+  },
+  {
+    url: 'https://img.cdn.sugarat.top/mdImg/MTY0Nzc1NTYyOTE5Mw==647755629193',
+    title: '微信赞赏',
+  },
+  {
+    url: 'https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQyOTg0OA==651547429848',
+    title: '支付宝',
+  },
+])
+
+</script>
+<style scoped>
+.praise {
+  cursor: pointer;
+}
+
+.praise-line {
+  margin-bottom: 10px;
+}
+</style>

package/docs/src/components/WishBtn.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="wish-btn">
+    <div class="btn-list">
+      <el-button
+        v-if="!dialogVisible"
+        @click="handleOpenFeature"
+        style="margin: 0 auto"
+        size="large"
+        type="success"
+        >提建议 & 给反馈</el-button
+      >
+      <el-button
+        v-else
+        @click="dialogVisible = false"
+        style="margin: 0 auto"
+        size="large"
+        type="warning"
+        >取消
+      </el-button>
+    </div>
+    <el-form :model="formData" v-show="dialogVisible" style="margin-top: 10px">
+      <el-form-item label="建议&问题" :label-width="formLabelWidth">
+        <el-input
+          placeholder="一句简单明了的话概括一下"
+          v-model="formData.title"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="详细描述" :label-width="formLabelWidth">
+        <el-input
+          placeholder="用朴素的话语进一步描述你的建议"
+          type="textarea"
+          v-model="formData.des"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式" :label-width="formLabelWidth">
+        <el-input
+          placeholder="邮箱，QQ，微信等任意方式均可"
+          v-model="formData.contact"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="btn-list" v-show="dialogVisible">
+      <el-button type="success" @click="handleAddFeature">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElButton, ElMessage, ElFormItem, ElInput, ElForm } from 'element-plus'
+import { ref, reactive } from 'vue'
+import { WishApi } from '../apis'
+
+const formLabelWidth = '80px'
+const dialogVisible = ref(false)
+const formData = reactive({
+  title: '',
+  des: '',
+  contact: ''
+})
+const handleOpenFeature = () => {
+  dialogVisible.value = true
+}
+
+const vaildFormData = () => {
+  if (formData.title.length === 0) {
+    ElMessage.error('建议标题不能为空')
+    return false
+  }
+  if (formData.des.length === 0) {
+    ElMessage.error('建议详细描述，不能为空')
+    return false
+  }
+  return true
+}
+const handleAddFeature = () => {
+  // 信息校验
+  if (!vaildFormData()) {
+    return
+  }
+  dialogVisible.value = false
+  // 提交信息
+  WishApi.addWish(formData).then(() => {
+    ElMessage.success('提交成功，感谢你的反馈')
+  })
+  // 初始化 表单内容
+  formData.title = ''
+  formData.des = ''
+  formData.contact = ''
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>