fix: 🐛 代码规范检测问题修复

Former-commit-id: 6e75bc91ce33ea9e7a17fbcb896f086f768896f4
2023-04-15 23:51:27 +08:00
parent 5b033246bc
commit 0605f89a67
24 changed files with 440 additions and 450 deletions
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -18,11 +18,11 @@
 </template>

 <script setup lang="ts">
-import { onBeforeMount, ref, watch } from 'vue';
-import { useRoute, RouteLocationMatched } from 'vue-router';
-import { compile } from 'path-to-regexp';
-import router from '@/router';
-import { translateRouteTitleI18n } from '@/utils/i18n';
+import { onBeforeMount, ref, watch } from "vue";
+import { useRoute, RouteLocationMatched } from "vue-router";
+import { compile } from "path-to-regexp";
+import router from "@/router";
+import { translateRouteTitleI18n } from "@/utils/i18n";

 const currentRoute = useRoute();
 const pathCompile = (path: string) => {
@@ -35,15 +35,15 @@ const breadcrumbs = ref([] as Array<RouteLocationMatched>);

 function getBreadcrumb() {
  let matched = currentRoute.matched.filter(
-    item => item.meta && item.meta.title
+    (item) => item.meta && item.meta.title
  );
  const first = matched[0];
  if (!isDashboard(first)) {
    matched = [
-      { path: '/dashboard', meta: { title: 'dashboard' } } as any
+      { path: "/dashboard", meta: { title: "dashboard" } } as any,
    ].concat(matched);
  }
-  breadcrumbs.value = matched.filter(item => {
+  breadcrumbs.value = matched.filter((item) => {
    return item.meta && item.meta.title && item.meta.breadcrumb !== false;
  });
 }
@@ -55,27 +55,27 @@ function isDashboard(route: RouteLocationMatched) {
  }
  return (
    name.toString().trim().toLocaleLowerCase() ===
-    'Dashboard'.toLocaleLowerCase()
+    "Dashboard".toLocaleLowerCase()
  );
 }

 function handleLink(item: any) {
  const { redirect, path } = item;
  if (redirect) {
-    router.push(redirect).catch(err => {
+    router.push(redirect).catch((err) => {
      console.warn(err);
    });
    return;
  }
-  router.push(pathCompile(path)).catch(err => {
+  router.push(pathCompile(path)).catch((err) => {
    console.warn(err);
  });
 }

 watch(
  () => currentRoute.path,
-  path => {
-    if (path.startsWith('/redirect/')) {
+  (path) => {
+    if (path.startsWith("/redirect/")) {
      return;
    }
    getBreadcrumb();
@@ -90,9 +90,9 @@ onBeforeMount(() => {
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
  display: inline-block;
+  margin-left: 8px;
  font-size: 14px;
  line-height: 50px;
-  margin-left: 8px;
 }

 // 覆盖 element-plus 的样式
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -9,7 +9,7 @@
      width="80"
      height="80"
      viewBox="0 0 250 250"
-      style="fill: #40c9c6; color: #fff"
+      style="color: #fff; fill: #40c9c6"
      aria-hidden="true"
    >
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
@@ -38,22 +38,25 @@
  100% {
    transform: rotate(0);
  }
+
  20%,
  60% {
    transform: rotate(-25deg);
  }
+
  40%,
  80% {
    transform: rotate(10deg);
  }
 }

-@media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
-    animation: none;
-  }
+@media (width <= 500px) {
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
+
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
 }
 </style>
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -22,14 +22,14 @@ defineProps({
  isActive: {
    required: true,
    type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });

-const emit = defineEmits(['toggleClick']);
+const emit = defineEmits(["toggleClick"]);

 function toggleClick() {
-  emit('toggleClick');
+  emit("toggleClick");
 }
 </script>

@@ -38,6 +38,7 @@ function toggleClick() {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
+
  &.is-active {
    transform: rotate(180deg);
  }
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -2,18 +2,18 @@
 const props = defineProps({
  modelValue: {
    type: String,
-    require: false
-  }
+    require: false,
+  },
 });

-const emit = defineEmits(['update:modelValue']);
-const inputValue = toRef(props, 'modelValue');
+const emit = defineEmits(["update:modelValue"]);
+const inputValue = toRef(props, "modelValue");

 const visible = ref(false); // 弹窗显示状态

 const iconNames: string[] = []; // 所有的图标名称集合

-const filterValue = ref(''); // 筛选的值
+const filterValue = ref(""); // 筛选的值
 const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合

 const iconSelectorRef = ref(null);
@@ -21,9 +21,9 @@ const iconSelectorRef = ref(null);
 * icon 加载
 */
 function loadIcons() {
-  const icons = import.meta.glob('../../assets/icons/*.svg');
+  const icons = import.meta.glob("../../assets/icons/*.svg");
  for (const icon in icons) {
-    const iconName = icon.split('assets/icons/')[1].split('.svg')[0];
+    const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
    iconNames.push(iconName);
  }
  filterIconNames.value = iconNames;
@@ -34,7 +34,7 @@ function loadIcons() {
 */
 function handleFilter() {
  if (filterValue.value) {
-    filterIconNames.value = iconNames.filter(iconName =>
+    filterIconNames.value = iconNames.filter((iconName) =>
      iconName.includes(filterValue.value)
    );
  } else {
@@ -46,7 +46,7 @@ function handleFilter() {
 * icon 选择
 */
 function handleSelect(iconName: string) {
-  emit('update:modelValue', iconName);
+  emit("update:modelValue", iconName);
  visible.value = false;
 }

@@ -125,6 +125,7 @@ onMounted(() => {
 .el-divider--horizontal {
  margin: 10px auto !important;
 }
+
 .iconselect-container {
  position: relative;
  width: 400px;
@@ -137,18 +138,19 @@ onMounted(() => {
  margin-top: 10px;

  .icon-item {
-    cursor: pointer;
-    width: 10%;
-    margin: 0 10px 10px 0;
-    padding: 5px;
    display: flex;
    flex-direction: column;
-    justify-items: center;
    align-items: center;
+    justify-items: center;
+    width: 10%;
+    padding: 5px;
+    margin: 0 10px 10px 0;
+    cursor: pointer;
    border: 1px solid #ccc;
+
    &:hover {
-      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
      transition: all 0.2s;
      transform: scaleX(1.1);
    }
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -14,54 +14,54 @@
 </template>

 <script setup lang="ts">
-import { computed, PropType } from 'vue';
-import { scrollTo } from '@/utils/scroll-to';
+import { computed, PropType } from "vue";
+import { scrollTo } from "@/utils/scroll-to";

 const props = defineProps({
  total: {
    required: true,
    type: Number as PropType<number>,
-    default: 0
+    default: 0,
  },
  page: {
    type: Number,
-    default: 1
+    default: 1,
  },
  limit: {
    type: Number,
-    default: 20
+    default: 20,
  },
  pageSizes: {
    type: Array as PropType<number[]>,
    default() {
      return [10, 20, 30, 50];
-    }
+    },
  },
  layout: {
    type: String,
-    default: 'total, sizes, prev, pager, next, jumper'
+    default: "total, sizes, prev, pager, next, jumper",
  },
  background: {
    type: Boolean,
-    default: true
+    default: true,
  },
  autoScroll: {
    type: Boolean,
-    default: true
+    default: true,
  },
  hidden: {
    type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });

-const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
+const emit = defineEmits(["update:page", "update:limit", "pagination"]);

 const currentPage = computed<number | undefined>({
  get: () => props.page,
-  set: value => {
-    emit('update:page', value);
-  }
+  set: (value) => {
+    emit("update:page", value);
+  },
 });

 const pageSize = computed<number | undefined>({
@@ -69,12 +69,12 @@ const pageSize = computed<number | undefined>({
    return props.limit;
  },
  set(val) {
-    emit('update:limit', val);
-  }
+    emit("update:limit", val);
+  },
 });

 function handleSizeChange(val: number) {
-  emit('pagination', { page: currentPage, limit: val });
+  emit("pagination", { page: currentPage, limit: val });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
@@ -82,7 +82,7 @@ function handleSizeChange(val: number) {

 function handleCurrentChange(val: number) {
  currentPage.value = val;
-  emit('pagination', { page: val, limit: props.limit });
+  emit("pagination", { page: val, limit: props.limit });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
@@ -92,6 +92,7 @@ function handleCurrentChange(val: number) {
 <style lang="scss" scoped>
 .pagination {
  padding: 12px;
+
  &.hidden {
    display: none;
  }
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -1,45 +1,45 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";

-import { addClass, removeClass } from '@/utils/index';
+import { addClass, removeClass } from "@/utils/index";

 const show = ref(false);

 defineProps({
  buttonTop: {
    default: 250,
-    type: Number
-  }
+    type: Number,
+  },
 });

-watch(show, value => {
+watch(show, (value) => {
  if (value) {
    addEventClick();
  }
  if (value) {
-    addClass(document.body, 'showRightPanel');
+    addClass(document.body, "showRightPanel");
  } else {
-    removeClass(document.body, 'showRightPanel');
+    removeClass(document.body, "showRightPanel");
  }
 });

 function addEventClick() {
-  window.addEventListener('click', closeSidebar, { passive: true });
+  window.addEventListener("click", closeSidebar, { passive: true });
 }

 function closeSidebar(evt: any) {
  // 主题选择点击不关闭
-  let parent = evt.target.closest('.right-panel-container');
+  let parent = evt.target.closest(".right-panel-container");
  if (!parent) {
    show.value = false;
-    window.removeEventListener('click', closeSidebar);
+    window.removeEventListener("click", closeSidebar);
  }
 }

 const rightPanel = ref();

 function insertToBody() {
-  const body = document.querySelector('body') as any;
+  const body = document.querySelector("body") as any;
  body.insertBefore(rightPanel.value, body.firstChild);
 }

@@ -59,7 +59,7 @@ onBeforeUnmount(() => {
      <div
        class="right-panel-btn"
        :style="{
-          top: buttonTop + 'px'
+          top: buttonTop + 'px',
        }"
        @click="show = !show"
      >
@@ -75,38 +75,40 @@ onBeforeUnmount(() => {

 <style lang="scss" scoped>
 .showRightPanel {
-  overflow: hidden;
  position: relative;
  width: calc(100% - 15px);
+  overflow: hidden;
 }
+
 .right-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(0 0 0 / 20%);
 }

 .right-panel-container {
-  background-color: var(--el-bg-color-overlay);
-  width: 100%;
-  max-width: 300px;
-  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+  z-index: 999;
+  width: 100%;
+  max-width: 300px;
+  height: 100vh;
+  background-color: var(--el-bg-color-overlay);
+  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: 999;
 }

 .show {
  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+
  .right-panel-overlay {
    z-index: 99;
-    opacity: 1;
    width: 100%;
    height: 100%;
+    opacity: 1;
  }

  .right-panel-container {
@@ -115,19 +117,20 @@ onBeforeUnmount(() => {
 }

 .right-panel-btn {
-  background-color: var(--el-color-primary);
-  color: var(--el-color-white);
+  position: absolute;
+  left: -36px;
  width: 36px;
  height: 36px;
-  left: -36px;
-  position: absolute;
+  color: var(--el-color-white);
  text-align: center;
-  border-radius: 6px 0 0 6px;
  cursor: pointer;
+  background-color: var(--el-color-primary);
+  border-radius: 6px 0 0 6px;
+
  svg {
-    vertical-align: -10px;
    width: 20px;
    height: 20px;
+    vertical-align: -10px;
  }
 }
 </style>
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -12,19 +12,19 @@
 const props = defineProps({
  prefix: {
    type: String,
-    default: 'icon'
+    default: "icon",
  },
  iconClass: {
    type: String,
-    required: false
+    required: false,
  },
  color: {
-    type: String
+    type: String,
  },
  size: {
    type: String,
-    default: '1em'
-  }
+    default: "1em",
+  },
 });

 const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
@@ -33,11 +33,11 @@ const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
 <style scoped>
 .svg-icon {
  display: inline-block;
-  outline: none;
  width: 1em;
  height: 1em;
-  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
-  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  overflow: hidden;
+  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
+  outline: none;
+  fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
 }
 </style>
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -14,16 +14,16 @@
 </template>

 <script setup lang="ts">
-import { UploadRawFile, UploadRequestOptions } from 'element-plus';
-import { uploadFileApi } from '@/api/file';
+import { UploadRawFile, UploadRequestOptions } from "element-plus";
+import { uploadFileApi } from "@/api/file";

-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);

 const props = defineProps({
  modelValue: {
    type: String,
-    default: ''
-  }
+    default: "",
+  },
 });

 const imgUrl = computed<string | undefined>({
@@ -32,8 +32,8 @@ const imgUrl = computed<string | undefined>({
  },
  set(val) {
    // imgUrl改变时触发修改父组件绑定的v-model的值
-    emit('update:modelValue', val);
-  }
+    emit("update:modelValue", val);
+  },
 });

 /**
@@ -51,7 +51,7 @@ async function uploadFile(options: UploadRequestOptions): Promise<any> {
 */
 function handleBeforeUpload(file: UploadRawFile) {
  if (file.size > 2 * 1048 * 1048) {
-    ElMessage.warning('上传图片不能大于2M');
+    ElMessage.warning("上传图片不能大于2M");
    return false;
  }
  return true;
@@ -60,19 +60,19 @@ function handleBeforeUpload(file: UploadRawFile) {

 <style scoped>
 .single-uploader .single {
+  display: block;
  width: 178px;
  height: 178px;
-  display: block;
 }
 </style>

 <style>
 .single-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
  position: relative;
  overflow: hidden;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
 }

@@ -81,10 +81,10 @@ function handleBeforeUpload(file: UploadRawFile) {
 }

 .el-icon.single-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
  width: 178px;
  height: 178px;
+  font-size: 28px;
+  color: #8c939d;
  text-align: center;
 }
 </style>