perf: 使用pnpm lint格式化代码，适配最新版的stylelint规则

2025-11-09 13:53:38 +08:00 · 2023-05-04 13:49:30 +08:00
parent 7713e7fb9e
commit afc15ea8df
59 changed files with 426 additions and 449 deletions
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -130,16 +130,16 @@ const transitionMain = defineComponent({

 <style scoped>
 .app-main {
+  position: relative;
  width: 100%;
  height: 100vh;
-  position: relative;
  overflow-x: hidden;
 }

 .app-main-nofixed-header {
+  position: relative;
  width: 100%;
  min-height: 100vh;
-  position: relative;
 }

 .main-content {
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -121,28 +121,28 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
  overflow: hidden;

  .hamburger-container {
-    line-height: 48px;
-    height: 100%;
    float: left;
+    height: 100%;
+    line-height: 48px;
    cursor: pointer;
  }

  .vertical-header-right {
    display: flex;
+    align-items: center;
+    justify-content: flex-end;
    min-width: 280px;
    height: 48px;
-    align-items: center;
    color: #000000d9;
-    justify-content: flex-end;

    .el-dropdown-link {
-      height: 48px;
-      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
-      cursor: pointer;
+      height: 48px;
+      padding: 10px;
      color: #000000d9;
+      cursor: pointer;

      p {
        font-size: 14px;
@@ -182,9 +182,9 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
  max-width: 120px;

  ::v-deep(.el-dropdown-menu__item) {
-    min-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
+    min-width: 100%;
  }
 }
 </style>
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -46,8 +46,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
  display: flex;
  align-items: center;
  justify-content: center;
-  height: 48px;
  width: 60px;
+  height: 48px;
  cursor: pointer;

  .header-notice-icon {
@@ -59,7 +59,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
  width: 330px;

  .noticeList-container {
-    padding: 15px 24px 0 24px;
+    padding: 15px 24px 0;
  }

  :deep(.el-tabs__header) {
@@ -71,7 +71,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
  }

  :deep(.el-tabs__nav-wrap) {
-    padding: 0 36px 0 36px;
+    padding: 0 36px;
  }
 }
 </style>
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -118,6 +118,7 @@ function hoverDescription(event, description) {
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
+
  // border-bottom: 1px solid #f0f0f0;

  .notice-container-avatar {
@@ -127,15 +128,15 @@ function hoverDescription(event, description) {

  .notice-container-text {
    display: flex;
+    flex: 1;
    flex-direction: column;
    justify-content: space-between;
-    flex: 1;

    .notice-text-title {
      display: flex;
      margin-bottom: 8px;
-      font-weight: 400;
      font-size: 14px;
+      font-weight: 400;
      line-height: 1.5715;
      cursor: pointer;

@@ -143,8 +144,8 @@ function hoverDescription(event, description) {
        flex: 1;
        width: 200px;
        overflow: hidden;
-        white-space: nowrap;
        text-overflow: ellipsis;
+        white-space: nowrap;
      }

      .notice-title-extra {
@@ -162,8 +163,8 @@ function hoverDescription(event, description) {

    .notice-text-description {
      display: -webkit-box;
-      text-overflow: ellipsis;
      overflow: hidden;
+      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -60,9 +60,9 @@ emitter.on("openPanel", () => {

 <style>
 .showright-panel {
-  overflow: hidden;
  position: relative;
  width: calc(100% - 15px);
+  overflow: hidden;
 }
 </style>

@@ -71,23 +71,23 @@ emitter.on("openPanel", () => {
  position: fixed;
  top: 0;
  left: 0;
+  z-index: -1;
+  background: rgb(0 0 0 / 20%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-  background: rgba(0, 0, 0, 0.2);
-  z-index: -1;
 }

 .right-panel {
-  width: 100%;
-  max-width: 315px;
-  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
-  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
+  z-index: 40000;
+  width: 100%;
+  max-width: 315px;
+  height: 100vh;
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  transform: translate(100%);
-  z-index: 40000;
 }

 .show {
@@ -95,9 +95,9 @@ emitter.on("openPanel", () => {

  .right-panel-background {
    z-index: 20000;
-    opacity: 1;
    width: 100%;
    height: 100%;
+    opacity: 1;
  }

  .right-panel {
@@ -106,20 +106,20 @@ emitter.on("openPanel", () => {
 }

 .handle-button {
+  position: absolute;
+  top: 45%;
+  left: -48px;
+  z-index: 0;
  width: 48px;
  height: 48px;
-  position: absolute;
-  left: -48px;
-  text-align: center;
  font-size: 24px;
-  border-radius: 6px 0 0 6px !important;
-  z-index: 0;
+  line-height: 48px;
+  color: #fff;
+  text-align: center;
  pointer-events: auto;
  cursor: pointer;
-  color: #fff;
-  line-height: 48px;
-  top: 45%;
-  background: rgb(24, 144, 255);
+  background: rgb(24 144 255);
+  border-radius: 6px 0 0 6px !important;

  i {
    font-size: 24px;
@@ -128,24 +128,24 @@ emitter.on("openPanel", () => {
 }

 .right-panel-items {
-  margin-top: 60px;
  height: calc(100vh - 60px);
+  margin-top: 60px;
  overflow-y: auto;
 }

 .project-configuration {
+  position: fixed;
+  top: 15px;
  display: flex;
+  align-items: center;
+  justify-content: space-between;
  width: 100%;
  height: 30px;
-  position: fixed;
-  justify-content: space-between;
-  align-items: center;
-  top: 15px;
  margin-left: 10px;
 }

 :deep(.el-divider--horizontal) {
  width: 90%;
-  margin: 20px auto 0 auto;
+  margin: 20px auto 0;
 }
 </style>
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -84,11 +84,11 @@ function handleTo() {
    display: flex;
    align-items: center;
    height: 56px;
-    margin-top: 8px;
    padding: 14px;
-    border-radius: 4px;
+    margin-top: 8px;
    cursor: pointer;
    border: 0.1px solid #ccc;
+    border-radius: 4px;
    transition: all 0.3s;

    &-title {
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -418,35 +418,35 @@ onBeforeMount(() => {

  li {
    display: flex;
-    justify-content: space-between;
    align-items: center;
+    justify-content: space-between;
    margin: 25px;
  }
 }

 .pure-datatheme {
+  display: block;
  width: 100%;
  height: 50px;
-  text-align: center;
-  display: block;
  padding-top: 25px;
+  text-align: center;
 }

 .pure-theme {
-  margin-top: 25px;
-  width: 100%;
-  height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
+  width: 100%;
+  height: 50px;
+  margin-top: 25px;

  li {
+    position: relative;
    width: 18%;
    height: 45px;
-    background: #f0f2f5;
-    position: relative;
    overflow: hidden;
    cursor: pointer;
+    background: #f0f2f5;
    border-radius: 4px;
    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);

@@ -459,13 +459,13 @@ onBeforeMount(() => {
        }

        &:nth-child(2) {
-          width: 70%;
-          height: 30%;
+          position: absolute;
          top: 0;
          right: 0;
+          width: 70%;
+          height: 30%;
          background: #fff;
          box-shadow: 0 0 1px #888;
-          position: absolute;
        }
      }
    }
@@ -491,13 +491,13 @@ onBeforeMount(() => {
        }

        &:nth-child(2) {
-          width: 30%;
-          height: 70%;
+          position: absolute;
          bottom: 0;
          left: 0;
+          width: 30%;
+          height: 70%;
          background: #fff;
          box-shadow: 0 0 1px #888;
-          position: absolute;
        }
      }
    }
@@ -505,11 +505,11 @@ onBeforeMount(() => {
 }

 .theme-color {
+  display: flex;
+  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 20px;
-  display: flex;
-  justify-content: center;

  li {
    float: left;
@@ -519,8 +519,8 @@ onBeforeMount(() => {
    margin-right: 8px;
    font-weight: 700;
    text-align: center;
-    border-radius: 2px;
    cursor: pointer;
+    border-radius: 2px;

    &:nth-child(2) {
      border: 1px solid #ddd;
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -156,9 +156,9 @@ watch(
  max-width: 120px;

  ::v-deep(.el-dropdown-menu__item) {
-    min-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
+    min-width: 100%;
  }
 }
 </style>
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -37,33 +37,33 @@ const { title } = useNav();

 <style lang="scss" scoped>
 .sidebar-logo-container {
+  position: relative;
  width: 100%;
  height: 48px;
  overflow: hidden;
-  position: relative;

  .sidebar-logo-link {
-    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
+    height: 100%;

    img {
-      height: 32px;
      display: inline-block;
+      height: 32px;
    }

    .sidebar-title {
-      height: 32px;
-      line-height: 32px;
-      margin: 2px 0 0 12px;
-      color: $subMenuActiveText;
      display: inline-block;
+      height: 32px;
+      margin: 2px 0 0 12px;
      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
      font-size: 18px;
      font-weight: 600;
+      line-height: 32px;
+      color: $subMenuActiveText;
+      text-overflow: ellipsis;
+      white-space: nowrap;
    }
  }
 }
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -188,9 +188,9 @@ watch(
  max-width: 120px;

  ::v-deep(.el-dropdown-menu__item) {
-    min-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
+    min-width: 100%;
  }
 }
 </style>
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -39,41 +39,41 @@
 }

 .tags-view {
-  width: 100%;
-  font-size: 14px;
+  position: relative;
  display: flex;
  align-items: center;
+  width: 100%;
+  font-size: 14px;
  color: var(--el-text-color-primary);
  background: #fff;
-  position: relative;
  box-shadow: 0 0 1px #888;

  .scroll-item {
-    border-radius: 3px 3px 0 0;
-    padding: 0 6px;
-    box-shadow: 0 0 1px #888;
    position: relative;
-    margin-right: 4px;
-    height: 28px;
    display: inline-block;
+    height: 28px;
+    padding: 0 6px;
+    margin-right: 4px;
    line-height: 28px;
-    transition: all 0.4s;
    cursor: pointer;
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 0 1px #888;
+    transition: all 0.4s;

    .el-icon-close {
+      position: absolute;
+      top: 50%;
      font-size: 10px;
      color: var(--el-color-primary);
      cursor: pointer;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
      transition: font-size 0.2s;
+      transform: translate(-50%, -50%);

      &:hover {
-        border-radius: 50%;
+        font-size: 13px;
        color: #fff;
        background: #b4bccc;
-        font-size: 13px;
+        border-radius: 50%;
      }
    }

@@ -91,24 +91,24 @@
  }

  a {
-    text-decoration: none;
-    color: var(--el-text-color-primary);
    padding: 0 4px;
+    color: var(--el-text-color-primary);
+    text-decoration: none;
  }

  .scroll-container {
-    flex: 1;
-    overflow: hidden;
-    padding: 5px 0;
-    white-space: nowrap;
    position: relative;
+    flex: 1;
+    padding: 5px 0;
+    overflow: hidden;
+    white-space: nowrap;

    .tab {
      position: relative;
      float: left;
-      list-style: none;
      overflow: visible;
      white-space: nowrap;
+      list-style: none;
      transition: transform 0.5s ease-in-out;

      .scroll-item {
@@ -123,29 +123,28 @@

  /* 右键菜单 */
  .contextmenu {
-    margin: 0;
-    background: #fff;
    position: absolute;
-    list-style-type: none;
    padding: 5px 0;
-    border-radius: 4px;
-    color: var(--el-text-color-primary);
-    font-weight: normal;
+    margin: 0;
    font-size: 13px;
+    font-weight: normal;
+    color: var(--el-text-color-primary);
    white-space: nowrap;
+    list-style-type: none;
+    background: #fff;
+    border-radius: 4px;
    outline: 0;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);

    li {
-      width: 100%;
-      margin: 0;
-      padding: 7px 12px;
-      cursor: pointer;
      display: flex;
      align-items: center;
+      width: 100%;
+      padding: 7px 12px;
+      margin: 0;
+      cursor: pointer;

      &:hover {
-        // background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }

@@ -159,11 +158,11 @@

 .el-dropdown-menu {
  li {
+    display: flex;
+    align-items: center;
    width: 100%;
    margin: 0;
    cursor: pointer;
-    display: flex;
-    align-items: center;

    svg {
      display: block;
@@ -184,6 +183,7 @@
 :deep(.el-dropdown-menu__item--divided) {
  margin: 1px 0;
 }
+
 .el-dropdown-menu__item--divided::before {
  margin: 0;
 }
@@ -193,7 +193,6 @@
 }

 .scroll-item.is-active {
-  // background-color: var(--el-color-primary-light-9);
  position: relative;
  color: #fff;

@@ -213,16 +212,16 @@
 .arrow-left,
 .arrow-right,
 .arrow-down {
+  position: relative;
  width: 40px;
  height: 38px;
  color: var(--el-text-color-primary);
-  position: relative;

  svg {
-    width: 20px;
-    height: 20px;
    position: absolute;
    left: 50%;
+    width: 20px;
+    height: 20px;
    transform: translate(-50%, 50%);
  }
 }
@@ -236,8 +235,8 @@
 }

 .arrow-right {
-  box-shadow: -5px 0 5px -6px #ccc;
  border-right: 0.5px solid #ccc;
+  box-shadow: -5px 0 5px -6px #ccc;

  &:hover {
    cursor: e-resize;
@@ -255,8 +254,8 @@

 /* 卡片模式下鼠标移出隐藏蓝色边框 */
 .card-out {
-  border: none;
  color: #666;
+  border: none;

  a {
    color: #666;
@@ -265,32 +264,32 @@

 /* 灵动模式 */
 .schedule-active {
+  position: absolute;
+  bottom: 0;
+  left: 0;
  width: 100%;
  height: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
  background: var(--el-color-primary);
 }

 /* 灵动模式下鼠标移入显示蓝色进度条 */
 .schedule-in {
+  position: absolute;
+  bottom: 0;
+  left: 0;
  width: 100%;
  height: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
  background: var(--el-color-primary);
  animation: scheduleInWidth 200ms ease-in;
 }

 /* 灵动模式下鼠标移出隐藏蓝色进度条 */
 .schedule-out {
+  position: absolute;
+  bottom: 0;
+  left: 0;
  width: 0;
  height: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
  background: var(--el-color-primary);
  animation: scheduleOutWidth 200ms ease-in;
 }
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -603,5 +603,5 @@ onMounted(() => {
 </template>

 <style lang="scss" scoped>
-@import "./index.scss";
+@import url("./index.scss");
 </style>