安装 luckyexcel 修改菜单文件位置

2024-03-26 16:34:58 +08:00
parent cc1edc0e96
commit 668fbed3ef
28 changed files with 5311 additions and 229 deletions
--- a/index.html
+++ b/index.html
@@ -1,13 +1,21 @@
-<!doctype html>
-<html lang='en'>
-<head>
-    <meta charset='UTF-8' />
-    <link rel='icon' type='image/svg+xml' 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.ts'></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>电能质量数据监测云平台</title>
+    </head>
+
+    <!-- 在这里全局引入luckysheet的样式文件和js文件  -->
+    <link rel="stylesheet" href="/public/assets/luckysheet/pluginsCss.css" />
+    <link rel="stylesheet" href="/public/assets/luckysheet/plugins.css" />
+    <link rel="stylesheet" href="/public/assets/luckysheet/luckysheet.css" />
+    <link rel="stylesheet" href="/public/assets/luckysheet/iconfont.css" />
+    <script src="/public/assets/luckysheet/plugin.js"></script>
+    <script src="/public/assets/luckysheet/luckysheet.umd.js"></script>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -21,9 +21,12 @@
    "echarts4": "npm:echarts@^4.9.0",
    "element-plus": "^2.5.3",
    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
    "html2canvas": "^1.4.1",
    "jquery": "^3.7.1",
    "lodash-es": "^4.17.21",
+    "luckyexcel": "^1.0.1",
+    "luckysheet": "^2.1.13",
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'

+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
  '@element-plus/icons-vue':
    specifier: ^2.3.1
@@ -37,6 +41,9 @@ dependencies:
  exceljs:
    specifier: ^4.4.0
    version: 4.4.0
+  file-saver:
+    specifier: ^2.0.5
+    version: 2.0.5
  html2canvas:
    specifier: ^1.4.1
    version: 1.4.1
@@ -46,6 +53,12 @@ dependencies:
  lodash-es:
    specifier: ^4.17.21
    version: 4.17.21
+  luckyexcel:
+    specifier: ^1.0.1
+    version: 1.0.1
+  luckysheet:
+    specifier: ^2.1.13
+    version: 2.1.13
  mitt:
    specifier: ^3.0.1
    version: 3.0.1
@@ -2060,12 +2073,20 @@ packages:
    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
    dev: false

+  /file-saver@2.0.5:
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
+    dev: false
+
  /fill-range@7.0.1:
    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==, tarball: https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz}
    engines: {node: '>=8'}
    dependencies:
      to-regex-range: 5.0.1

+  /flatpickr@4.6.13:
+    resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==}
+    dev: false
+
  /follow-redirects@1.15.3:
    resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==, tarball: https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz}
    engines: {node: '>=4.0'}
@@ -2282,6 +2303,10 @@ packages:
    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
    dev: false

+  /jquery@2.2.4:
+    resolution: {integrity: sha512-lBHj60ezci2u1v2FqnZIraShGgEXq35qCzMv4lITyHGppTnA13rwR0MgwyNJh9TnDs3aXUvd1xjAotfraMHX/Q==}
+    dev: false
+
  /jquery@3.7.1:
    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
    dev: false
@@ -2454,6 +2479,23 @@ packages:
    dependencies:
      yallist: 4.0.0

+  /luckyexcel@1.0.1:
+    resolution: {integrity: sha512-hvbJmCXNp/vST/huA6sieDn32Ib8bd80L9aIu5ZGxniJvZle7VlpHZrl6weLGaEnX99+t7cPAoYGqrqbfZp/AQ==}
+    dependencies:
+      jszip: 3.10.1
+    dev: false
+
+  /luckysheet@2.1.13:
+    resolution: {integrity: sha512-ZotItRKh3fxEtYz0GrZxkf97jeQSGsJpFNAu1I0NMDQ6rVrHAWKeggFak5pClGQ3DP62Gi8kd+8rzOpyY/UNZw==}
+    dependencies:
+      '@babel/runtime': 7.23.8
+      dayjs: 1.11.10
+      flatpickr: 4.6.13
+      jquery: 2.2.4
+      numeral: 2.0.6
+      pako: 1.0.11
+    dev: false
+
  /magic-string@0.30.5:
    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==, tarball: https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz}
    engines: {node: '>=12'}
@@ -2549,6 +2591,10 @@ packages:
    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==, tarball: https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz}
    dev: false

+  /numeral@2.0.6:
+    resolution: {integrity: sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==}
+    dev: false
+
  /once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
@@ -3237,7 +3283,3 @@ packages:
    dependencies:
      tslib: 2.3.0
    dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
--- a/public/assets/luckysheet/iconfont.css
+++ b/public/assets/luckysheet/iconfont.css
--- a/public/assets/luckysheet/luckysheet.css
+++ b/public/assets/luckysheet/luckysheet.css
--- a/public/assets/luckysheet/luckysheet.umd.js
+++ b/public/assets/luckysheet/luckysheet.umd.js
--- a/public/assets/luckysheet/plugin.js
+++ b/public/assets/luckysheet/plugin.js
--- a/public/assets/luckysheet/plugins.css
+++ b/public/assets/luckysheet/plugins.css
--- a/public/assets/luckysheet/pluginsCss.css
+++ b/public/assets/luckysheet/pluginsCss.css
--- a/src/views/pqs/bearingCapacity/evaluationList/index.vue
+++ b/src/views/pqs/bearingCapacity/evaluationList/index.vue
@@ -108,6 +108,8 @@ const tableStore: any = new TableStore({
                    ? 'I 级预警'
                    : row.cellValue == 5
                    ? '禁止接入'
+                    : row.cellValue == 6
+                    ? '允许接入'
                    : ''
            }
        },
--- a/src/views/pqs/harmonicMonitoring/reportForms/statistics/export.js
+++ b/src/views/pqs/harmonicMonitoring/reportForms/statistics/export.js
@@ -0,0 +1,349 @@
+// import { createCellPos } from './translateNumToLetter'
+import Excel from 'exceljs'
+
+import FileSaver from 'file-saver'
+
+const exportExcel = function(luckysheet, value) {
+  // 参数为luckysheet.getluckysheetfile()获取的对象
+  // 1.创建工作簿，可以为工作簿添加属性
+  const workbook = new Excel.Workbook()
+  // 2.创建表格，第二个参数可以配置创建什么样的工作表
+  if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
+    luckysheet = [luckysheet]
+  }
+  luckysheet.forEach(function(table) {
+    if (table.data.length === 0) return  true
+    // ws.getCell('B2').fill = fills.
+    const worksheet = workbook.addWorksheet(table.name)
+    const merge = (table.config && table.config.merge) || {}
+    const borderInfo = (table.config && table.config.borderInfo) || {}
+    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
+    setStyleAndValue(table.data, worksheet)
+    setMerge(merge, worksheet)
+    setBorder(borderInfo, worksheet)
+    return true
+  })
+
+  // return
+  // 4.写入 buffer
+  const buffer = workbook.xlsx.writeBuffer().then(data => {
+    // console.log('data', data)
+    const blob = new Blob([data], {
+      type: 'application/vnd.ms-excel;charset=utf-8'
+    })
+    console.log("导出成功！")
+    FileSaver.saveAs(blob, `${value}.xlsx`)
+  })
+  return buffer
+}
+
+var setMerge = function(luckyMerge = {}, worksheet) {
+  const mergearr = Object.values(luckyMerge)
+  mergearr.forEach(function(elem) {
+    // elem格式：{r: 0, c: 0, rs: 1, cs: 2}
+    // 按开始行，开始列，结束行，结束列合并（相当于 K10:M12）
+    worksheet.mergeCells(
+      elem.r + 1,
+      elem.c + 1,
+      elem.r + elem.rs,
+      elem.c + elem.cs
+    )
+  })
+}
+
+var setBorder = function(luckyBorderInfo, worksheet) {
+  if (!Array.isArray(luckyBorderInfo)) return
+  // console.log('luckyBorderInfo', luckyBorderInfo)
+  luckyBorderInfo.forEach(function(elem) {
+    // 现在只兼容到borderType 为range的情况
+    // console.log('ele', elem)
+    if (elem.rangeType === 'range') {
+      let border = borderConvert(elem.borderType, elem.style, elem.color)
+      let rang = elem.range[0]
+      // console.log('range', rang)
+      let row = rang.row
+      let column = rang.column
+      for (let i = row[0] + 1; i < row[1] + 2; i++) {
+        for (let y = column[0] + 1; y < column[1] + 2; y++) {
+          worksheet.getCell(i, y).border = border
+        }
+      }
+    }
+    if (elem.rangeType === 'cell') {
+      // col_index: 2
+      // row_index: 1
+      // b: {
+      //   color: '#d0d4e3'
+      //   style: 1
+      // }
+      const { col_index, row_index } = elem.value
+      const borderData = Object.assign({}, elem.value)
+      delete borderData.col_index
+      delete borderData.row_index
+      let border = addborderToCell(borderData, row_index, col_index)
+      // console.log('bordre', border, borderData)
+      worksheet.getCell(row_index + 1, col_index + 1).border = border
+    }
+    // console.log(rang.column_focus + 1, rang.row_focus + 1)
+    // worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
+  })
+}
+var setStyleAndValue = function(cellArr, worksheet) {
+  if (!Array.isArray(cellArr)) return
+  cellArr.forEach(function(row, rowid) {
+    row.every(function(cell, columnid) {
+      if (!cell) return true
+      let fill = fillConvert(cell.bg)
+
+      let font = fontConvert(
+        cell.ff,
+        cell.fc,
+        cell.bl,
+        cell.it,
+        cell.fs,
+        cell.cl,
+        cell.ul
+      )
+      let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr)
+      let value = ''
+
+      if (cell.f) {
+        value = { formula: cell.f, result: cell.v }
+      } else if (!cell.v && cell.ct && cell.ct.s) {
+        // xls转为xlsx之后，内部存在不同的格式，都会进到富文本里，即值不存在与cell.v，而是存在于cell.ct.s之后
+        // value = cell.ct.s[0].v
+        cell.ct.s.forEach(arr => {
+          value += arr.v
+        })
+      } else {
+        value = cell.v
+      }
+      //  style 填入到_value中可以实现填充色
+      let letter = createCellPos(columnid)
+      let target = worksheet.getCell(letter + (rowid + 1))
+      // console.log('1233', letter + (rowid + 1))
+      for (const key in fill) {
+        target.fill = fill
+        break
+      }
+      target.font = font
+      target.alignment = alignment
+      target.value = value
+
+      return true
+    })
+  })
+}
+
+var fillConvert = function(bg) {
+  if (!bg) {
+    return {}
+  }
+  // const bgc = bg.replace('#', '')
+  let fill = {
+    type: 'pattern',
+    pattern: 'solid',
+    fgColor: { argb: bg.replace('#', '') }
+  }
+  return fill
+}
+
+var fontConvert = function(
+  ff = 0,
+  fc = '#000000',
+  bl = 0,
+  it = 0,
+  fs = 10,
+  cl = 0,
+  ul = 0
+) {
+  // luckysheet：ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
+  const luckyToExcel = {
+    0: '微软雅黑',
+    1: '宋体（Song）',
+    2: '黑体（ST Heiti）',
+    3: '楷体（ST Kaiti）',
+    4: '仿宋（ST FangSong）',
+    5: '新宋体（ST Song）',
+    6: '华文新魏',
+    7: '华文行楷',
+    8: '华文隶书',
+    9: 'Arial',
+    10: 'Times New Roman ',
+    11: 'Tahoma ',
+    12: 'Verdana',
+    num2bl: function(num) {
+      return num === 0 ? false : true
+    }
+  }
+  // 出现Bug，导入的时候ff为luckyToExcel的val
+
+  let font = {
+    name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
+    family: 1,
+    size: fs,
+    color: { argb: fc.replace('#', '') },
+    bold: luckyToExcel.num2bl(bl),
+    italic: luckyToExcel.num2bl(it),
+    underline: luckyToExcel.num2bl(ul),
+    strike: luckyToExcel.num2bl(cl)
+  }
+
+  return font
+}
+
+var alignmentConvert = function(
+  vt = 'default',
+  ht = 'default',
+  tb = 'default',
+  tr = 'default'
+) {
+  // luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
+  const luckyToExcel = {
+    vertical: {
+      0: 'middle',
+      1: 'top',
+      2: 'bottom',
+      default: 'top'
+    },
+    horizontal: {
+      0: 'center',
+      1: 'left',
+      2: 'right',
+      default: 'left'
+    },
+    wrapText: {
+      0: false,
+      1: false,
+      2: true,
+      default: false
+    },
+    textRotation: {
+      0: 0,
+      1: 45,
+      2: -45,
+      3: 'vertical',
+      4: 90,
+      5: -90,
+      default: 0
+    }
+  }
+
+  let alignment = {
+    vertical: luckyToExcel.vertical[vt],
+    horizontal: luckyToExcel.horizontal[ht],
+    wrapText: luckyToExcel.wrapText[tb],
+    textRotation: luckyToExcel.textRotation[tr]
+  }
+  return alignment
+}
+
+var borderConvert = function(borderType, style = 1, color = '#000') {
+  // 对应luckysheet的config中borderinfo的的参数
+  if (!borderType) {
+    return {}
+  }
+  const luckyToExcel = {
+    type: {
+      'border-all': 'all',
+      'border-top': 'top',
+      'border-right': 'right',
+      'border-bottom': 'bottom',
+      'border-left': 'left'
+    },
+    style: {
+      0: 'none',
+      1: 'thin',
+      2: 'hair',
+      3: 'dotted',
+      4: 'dashDot', // 'Dashed',
+      5: 'dashDot',
+      6: 'dashDotDot',
+      7: 'double',
+      8: 'medium',
+      9: 'mediumDashed',
+      10: 'mediumDashDot',
+      11: 'mediumDashDotDot',
+      12: 'slantDashDot',
+      13: 'thick'
+    }
+  }
+  let template = {
+    style: luckyToExcel.style[style],
+    color: { argb: color.replace('#', '') }
+  }
+  let border = {}
+  if (luckyToExcel.type[borderType] === 'all') {
+    border['top'] = template
+    border['right'] = template
+    border['bottom'] = template
+    border['left'] = template
+  } else {
+    border[luckyToExcel.type[borderType]] = template
+  }
+  // console.log('border', border)
+  return border
+}
+
+function addborderToCell(borders, row_index, col_index) {
+  let border = {}
+  const luckyExcel = {
+    type: {
+      l: 'left',
+      r: 'right',
+      b: 'bottom',
+      t: 'top'
+    },
+    style: {
+      0: 'none',
+      1: 'thin',
+      2: 'hair',
+      3: 'dotted',
+      4: 'dashDot', // 'Dashed',
+      5: 'dashDot',
+      6: 'dashDotDot',
+      7: 'double',
+      8: 'medium',
+      9: 'mediumDashed',
+      10: 'mediumDashDot',
+      11: 'mediumDashDotDot',
+      12: 'slantDashDot',
+      13: 'thick'
+    }
+  }
+  // console.log('borders', borders)
+  for (const bor in borders) {
+    // console.log(bor)
+    if (borders[bor].color.indexOf('rgb') === -1) {
+      border[luckyExcel.type[bor]] = {
+        style: luckyExcel.style[borders[bor].style],
+        color: { argb: borders[bor].color.replace('#', '') }
+      }
+    } else {
+      border[luckyExcel.type[bor]] = {
+        style: luckyExcel.style[borders[bor].style],
+        color: { argb: borders[bor].color }
+      }
+    }
+  }
+
+  return border
+}
+
+function createCellPos(n) {
+  let ordA = 'A'.charCodeAt(0)
+
+  let ordZ = 'Z'.charCodeAt(0)
+  let len = ordZ - ordA + 1
+  let s = ''
+  while (n >= 0) {
+    s = String.fromCharCode((n % len) + ordA) + s
+
+    n = Math.floor(n / len) - 1
+  }
+  return s
+}
+
+export {
+  exportExcel
+}
--- a/src/views/pqs/harmonicMonitoring/reportForms/statistics/index.vue
+++ b/src/views/pqs/harmonicMonitoring/reportForms/statistics/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="default-main">
+        <div id="luckysheet" :style="{ height: height }"></div>
+    </div>
+</template>
+<script setup lang="ts">
+import LuckyExcel from 'luckyexcel'
+import { exportExcel } from './export.js'
+import { mainHeight } from '@/utils/layout'
+import { ref, onMounted } from 'vue'
+const height = mainHeight(20).height
+const options = ref({
+    container: 'luckysheet',
+    title: '测试Excel', // 表 头名
+    lang: 'zh', // 中文
+    showtoolbar: true, // 是否显示工具栏
+    showinfobar: false, // 是否显示顶部信息栏
+    showsheetbar: true // 是否显示底部sheet按钮
+})
+// LuckyExcel.destroy()
+
+onMounted(() => {
+    luckysheet.create(options.value)
+})
+</script>
+<style lang="scss" scoped></style>
--- a/src/views/system/auth/audit/index.vue
+++ b/src/views/system/auth/audit/index.vue
--- a/src/views/system/auth/department/index.vue
+++ b/src/views/system/auth/department/index.vue
--- a/src/views/system/auth/department/popupForm.vue
+++ b/src/views/system/auth/department/popupForm.vue
--- a/src/views/system/auth/department/popupPoint.vue
+++ b/src/views/system/auth/department/popupPoint.vue
--- a/src/views/system/auth/menu/api.vue
+++ b/src/views/system/auth/menu/api.vue
@@ -24,6 +24,7 @@ import Table from '@/components/table/index.vue'
 import popupApi from './popupApi.vue'
 import { deleteMenu } from '@/api/user-boot/function'

+
 defineOptions({
    name: 'auth/menu/api'
 })
--- a/src/views/system/auth/menu/index.vue
+++ b/src/views/system/auth/menu/index.vue
--- a/src/views/system/auth/menu/menu.vue
+++ b/src/views/system/auth/menu/menu.vue
--- a/src/views/system/auth/menu/popupApi.vue
+++ b/src/views/system/auth/menu/popupApi.vue
--- a/src/views/system/auth/menu/popupMenu.vue
+++ b/src/views/system/auth/menu/popupMenu.vue
--- a/src/views/system/auth/role/index.vue
+++ b/src/views/system/auth/role/index.vue
--- a/src/views/system/auth/role/popupForm.vue
+++ b/src/views/system/auth/role/popupForm.vue
--- a/src/views/system/auth/userList/index.vue
+++ b/src/views/system/auth/userList/index.vue
--- a/src/views/system/auth/userList/popupEdit.vue
+++ b/src/views/system/auth/userList/popupEdit.vue
--- a/src/views/system/auth/userList/popupPwd.vue
+++ b/src/views/system/auth/userList/popupPwd.vue
--- a/src/views/system/reportForms/index.vue
+++ b/src/views/system/reportForms/index.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="default-main">
+        <div id="luckysheet" :style="{ height: height }"></div>
+    </div>
+</template>
+<script setup lang="ts">
+import LuckyExcel from 'luckyexcel'
+import { exportExcel } from './export.js'
+import { mainHeight } from '@/utils/layout'
+import { ref, onMounted } from 'vue'
+defineOptions({
+    name: 'Distributedphotovoltaic/templateConfiguration'
+})
+const height = mainHeight(20).height
+const options = ref({
+    container: 'luckysheet',
+    title: '测试Excel', // 表 头名
+    lang: 'zh', // 中文
+    showtoolbar: true, // 是否显示工具栏
+    showinfobar: false, // 是否显示顶部信息栏
+    showsheetbar: true // 是否显示底部sheet按钮
+})
+// LuckyExcel.destroy()
+
+onMounted(() => {
+    luckysheet.create(options.value)
+})
+</script>
+<style lang="scss" scoped></style>
--- a/src/views/user/logincopy.vue
+++ b/src/views/user/logincopy.vue
@@ -1,213 +0,0 @@
-<template>
-    <div>
-        <div @contextmenu.stop='' id='bubble' class='bubble'>
-            <canvas id='bubble-canvas' class='bubble-canvas'></canvas>
-        </div>
-        <div class='login'>
-            <div class='login-box'>
-                <div class='head'>
-                    <img src='@/assets/login-header.png' alt='' />
-                </div>
-                <div class='form'>
-                    <img class='profile-avatar' src='@/assets/avatar.png' alt='' />
-                    <div class='content'>
-                        <el-form @keyup.enter='onSubmit()' ref='formRef' size='large' :model='form'>
-                            <el-form-item prop='username'>
-                                <el-input
-                                    ref='usernameRef'
-                                    type='text'
-                                    clearable
-                                    v-model='form.username'
-                                    placeholder='请输入账号'
-                                >
-                                    <template #prefix>
-                                        <Icon name='fa fa-user' class='form-item-icon' size='16'
-                                              color='var(--el-input-icon-color)' />
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item prop='password'>
-                                <el-input
-                                    ref='passwordRef'
-                                    v-model='form.password'
-                                    type='password'
-                                    placeholder='请输入密码'
-                                    show-password
-                                >
-                                    <template #prefix>
-                                        <Icon name='fa fa-unlock-alt' class='form-item-icon' size='16'
-                                              color='var(--el-input-icon-color)' />
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button
-                                    :loading='state.submitLoading'
-                                    class='submit-button'
-                                    round
-                                    type='primary'
-                                    size='large'
-                                    @click='onSubmit()'
-                                >
-                                    登录
-                                </el-button>
-                            </el-form-item>
-                        </el-form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
-import * as pageBubble from '@/utils/pageBubble'
-import type { FormInstance, InputInstance } from 'element-plus'
-
-let timer: number
-
-const formRef = ref<FormInstance>()
-const usernameRef = ref<InputInstance>()
-const passwordRef = ref<InputInstance>()
-const state = reactive({
-    showCaptcha: false,
-    submitLoading: false
-})
-const form = reactive({
-    username: '',
-    password: '',
-})
-
-
-const focusInput = () => {
-    if (form.username === '') {
-        usernameRef.value!.focus()
-    } else if (form.password === '') {
-        passwordRef.value!.focus()
-    }
-}
-
-onMounted(() => {
-    timer = window.setTimeout(() => {
-        pageBubble.init()
-    }, 1000)
-
-})
-
-onBeforeUnmount(() => {
-    clearTimeout(timer)
-    pageBubble.removeListeners()
-})
-
-const onSubmit = (captchaInfo = '') => {
-    state.submitLoading = true
-    setTimeout(() => {
-        state.submitLoading = false
-    }, 3000)
-}
-</script>
-
-<style scoped lang='scss'>
-.switch-language {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 1;
-}
-
-.bubble {
-    overflow: hidden;
-    background: url(@/assets/bg.jpg) repeat;
-}
-
-.form-item-icon {
-    height: auto;
-}
-
-.login {
-    position: absolute;
-    top: 0;
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    align-items: center;
-    justify-content: center;
-
-    .login-box {
-        overflow: hidden;
-        width: 430px;
-        padding: 0;
-        background: var(--ba-bg-color-overlay);
-        margin-bottom: 80px;
-    }
-
-    .head {
-        background: #ccccff;
-
-        img {
-            display: block;
-            width: 430px;
-            margin: 0 auto;
-            user-select: none;
-        }
-    }
-
-    .form {
-        position: relative;
-
-        .profile-avatar {
-            display: block;
-            position: absolute;
-            height: 100px;
-            width: 100px;
-            border-radius: 50%;
-            border: 4px solid var(--ba-bg-color-overlay);
-            top: -50px;
-            right: calc(50% - 50px);
-            z-index: 2;
-            user-select: none;
-        }
-
-        .content {
-            padding: 100px 40px 40px 40px;
-        }
-
-        .submit-button {
-            width: 100%;
-            letter-spacing: 2px;
-            font-weight: 300;
-            margin-top: 15px;
-            --el-button-bg-color: var(--el-color-primary);
-        }
-    }
-}
-
-@media screen and (max-width: 720px) {
-    .login {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .login-box {
-            width: 340px;
-            margin-top: 0;
-        }
-    }
-}
-
-.chang-lang :deep(.el-dropdown-menu__item) {
-    justify-content: center;
-}
-
-.content :deep(.el-input__prefix) {
-    display: flex;
-    align-items: center;
-}
-
-@media screen and (max-height: 800px) {
-    .login .login-box {
-        margin-bottom: 0;
-    }
-}
-</style>