louhangfei преди 1 година
родител
ревизия
1d7636ba45
променени са 4 файла, в които са добавени 62 реда и са изтрити 55 реда
  1. 1 1
      .eslintrc.js
  2. 44 1
      prettier.config.cjs
  3. 3 10
      src/layout/components/Logo/index.vue
  4. 14 43
      src/layout/components/TagsView/index.vue

+ 1 - 1
.eslintrc.js

@@ -53,7 +53,7 @@ module.exports = {
     'vue/attribute-hyphenation': 'off',
     'vue/require-default-prop': 'off',
     'vue/html-self-closing': [
-      'error',
+      'warn',
       {
         html: {
           void: 'always',

+ 44 - 1
prettier.config.cjs

@@ -1,10 +1,53 @@
+/**
+ * Prettier 配置文件
+ * 用于定义代码格式化的规则
+ */
 module.exports = {
-  printWidth: 100,
+  /**
+   * 换行宽度,当代码宽度达到多少时换行
+   * @type {number}
+   */
+  printWidth: 120,
+
+  /**
+   * 是否在语句末尾添加分号
+   * @type {boolean}
+   */
   semi: true,
+
+  /**
+   * 是否在 Vue 文件中缩进 script 和 style 标签
+   * @type {boolean}
+   */
   vueIndentScriptAndStyle: true,
+
+  /**
+   * 是否使用单引号
+   * @type {boolean}
+   */
   singleQuote: true,
+
+  /**
+   * 是否在多行对象、数组等的末尾添加逗号
+   * @type {string}
+   */
   trailingComma: 'all',
+
+  /**
+   * 是否在 Markdown 文件中换行
+   * @type {string}
+   */
   proseWrap: 'never',
+
+  /**
+   * HTML 空白字符敏感度
+   * @type {string}
+   */
   htmlWhitespaceSensitivity: 'strict',
+
+  /**
+   * 行尾结束符
+   * @type {string}
+   */
   endOfLine: 'auto',
 };

+ 3 - 10
src/layout/components/Logo/index.vue

@@ -5,12 +5,7 @@
       'collapsed-login': isCollapsed,
     }"
   >
-    <img
-      v-if="isCollapsed"
-      src="~@/assets/images/skyeye-logo-img.png"
-      alt=""
-      :class="{ 'mr-2': !isCollapsed }"
-    />
+    <img v-if="isCollapsed" src="~@/assets/images/skyeye-logo-img.png" alt="" :class="{ 'mr-2': !isCollapsed }" />
     <div v-else class="openWrapper">
       <div>
         <img src="~@/assets/images/skyeye-logo-img.png" alt="" class="logoOpen" />
@@ -36,8 +31,7 @@
   import { useGlobSetting } from '@/hooks/setting';
 
   // NavMode的设置按钮已禁用 这里用不上 之后有需要再放开
-  const { getNavTheme, getMenuWidth, getMenuMinWidth, getNavMode, getMenuSetting } =
-    useProjectSetting();
+  const { getNavTheme, getMenuWidth, getMenuMinWidth, getNavMode, getMenuSetting } = useProjectSetting();
   const { getDarkTheme } = useDesignSetting();
 
   const isCollapsed = inject('collapsed');
@@ -81,8 +75,7 @@
     white-space: nowrap;
     background: v-bind(getBgColor);
     color: v-bind(getColor);
-    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
-      box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, border-color var(--el-transition-duration),
+    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, border-color var(--el-transition-duration),
       background-color var(--el-transition-duration), color var(--el-transition-duration);
 
     img {

+ 14 - 43
src/layout/components/TagsView/index.vue

@@ -9,20 +9,12 @@
   >
     <div class="tabs-view-main">
       <div ref="navWrap" :class="{ 'tabs-card-scrollable': scrollable }" class="tabs-card">
-        <span
-          :class="{ 'tabs-card-prev-hide': !scrollable }"
-          class="tabs-card-prev"
-          @click="scrollPrev"
-        >
+        <span :class="{ 'tabs-card-prev-hide': !scrollable }" class="tabs-card-prev" @click="scrollPrev">
           <el-icon class="el-input__icon" size="16">
             <LeftOutlined />
           </el-icon>
         </span>
-        <span
-          :class="{ 'tabs-card-next-hide': !scrollable }"
-          class="tabs-card-next"
-          @click="scrollNext"
-        >
+        <span :class="{ 'tabs-card-next-hide': !scrollable }" class="tabs-card-next" @click="scrollNext">
           <el-icon class="el-input__icon" size="16">
             <RightOutlined />
           </el-icon>
@@ -86,20 +78,16 @@
                 <el-icon class="el-input__icon" size="16"> <MinusOutlined /> </el-icon>关闭当前
               </el-dropdown-item>
               <el-dropdown-item :disabled="isDisabled" command="3">
-                <el-icon class="el-input__icon" size="16"> <SwapOutlined /> </el-icon
-                >关闭其他</el-dropdown-item
+                <el-icon class="el-input__icon" size="16"> <SwapOutlined /> </el-icon>关闭其他</el-dropdown-item
               >
               <el-dropdown-item :disabled="closeLeftTab" command="5">
-                <el-icon class="el-input__icon" size="16"> <DoubleLeftOutlined /> </el-icon
-                >关闭左侧</el-dropdown-item
+                <el-icon class="el-input__icon" size="16"> <DoubleLeftOutlined /> </el-icon>关闭左侧</el-dropdown-item
               >
               <el-dropdown-item :disabled="closeRightTab" command="6">
-                <el-icon class="el-input__icon" size="16"> <DoubleRightOutlined /> </el-icon
-                >关闭右侧</el-dropdown-item
+                <el-icon class="el-input__icon" size="16"> <DoubleRightOutlined /> </el-icon>关闭右侧</el-dropdown-item
               >
               <el-dropdown-item :disabled="isDisabled" command="4">
-                <el-icon class="el-input__icon" size="16"> <CloseOutlined /> </el-icon
-                >关闭全部</el-dropdown-item
+                <el-icon class="el-input__icon" size="16"> <CloseOutlined /> </el-icon>关闭全部</el-dropdown-item
               >
             </el-dropdown-menu>
           </template>
@@ -202,11 +190,7 @@
     const navMode = unref(getNavMode);
     const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
     let lenNum =
-      navMode === 'horizontal' || !isMixMenuNoneSub.value
-        ? '0px'
-        : collapsed
-        ? `${minMenuWidth}px`
-        : `${menuWidth}px`;
+      navMode === 'horizontal' || !isMixMenuNoneSub.value ? '0px' : collapsed ? `${minMenuWidth}px` : `${menuWidth}px`;
     return {
       left: lenNum,
       width: `calc(100%)`,
@@ -276,23 +260,16 @@
   // 移除缓存组件名称
   const delKeepAliveCompName = () => {
     if (route.meta.keepAlive) {
-      const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
-        ?.components?.default.name;
+      const name = router.currentRoute.value.matched.find((item) => item.name == route.name)?.components?.default.name;
       if (name) {
-        asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
-          (item) => item != name,
-        );
+        asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter((item) => item != name);
       }
     }
   };
 
   // 标签页列表
   const tabsList: any = computed(() => tabsViewStore.tabsList);
-  const whiteList: string[] = [
-    PageEnum.BASE_LOGIN_NAME,
-    PageEnum.REDIRECT_NAME,
-    PageEnum.ERROR_PAGE_NAME,
-  ];
+  const whiteList: string[] = [PageEnum.BASE_LOGIN_NAME, PageEnum.REDIRECT_NAME, PageEnum.ERROR_PAGE_NAME];
 
   const isDisabled = computed(() => unref(tabsList).length === 1);
 
@@ -300,8 +277,7 @@
     () => route.fullPath,
     (to) => {
       // 如果您用的路由模式是 hash 请去掉,|| route.hash 判断条件
-      if (whiteList.includes(route.name as string) || route.hash || route.meta.tagView === false)
-        return;
+      if (whiteList.includes(route.name as string) || route.hash || route.meta.tagView === false) return;
       activeKey.value = to;
       currentTabRoute.value = null;
       refreshCurrent.value = false;
@@ -390,9 +366,7 @@
   };
 
   //当前路由对象 或者 右键选择tab路由对象
-  const getCurrentTabRoute = computed(() =>
-    currentTabRoute.value ? currentTabRoute.value : route,
-  );
+  const getCurrentTabRoute = computed(() => (currentTabRoute.value ? currentTabRoute.value : route));
 
   //tab 操作
   const closeHandleSelect = (key) => {
@@ -437,8 +411,7 @@
   function scrollTo(value: number, amplitude: number) {
     const currentScroll = navScroll.value.scrollLeft;
     const scrollWidth =
-      (amplitude > 0 && currentScroll + amplitude >= value) ||
-      (amplitude < 0 && currentScroll + amplitude <= value)
+      (amplitude > 0 && currentScroll + amplitude >= value) || (amplitude < 0 && currentScroll + amplitude <= value)
         ? value
         : currentScroll + amplitude;
     navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
@@ -460,9 +433,7 @@
     const currentScroll = navScroll.value.scrollLeft;
     if (navWidth - currentScroll / 2 <= containerWidth) return;
     const scrollLeft =
-      navWidth - currentScroll > containerWidth * 2
-        ? currentScroll + containerWidth
-        : navWidth - containerWidth;
+      navWidth - currentScroll > containerWidth * 2 ? currentScroll + containerWidth : navWidth - containerWidth;
     scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
   }