添加小工具禁用，而不是隐藏

src/components/layout/index.module.less

@@ -422,6 +422,16 @@
     cursor: pointer;
     text-align: center;
 
+    &.booxToolDisabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
 
     &:hover {
       opacity: 0.8;

src/components/layout/index.tsx

@@ -368,6 +368,12 @@ export default defineComponent({
         return hidePath.includes(routePath) ? false : true;
       }
     });
+    const startClassStatus = computed(() => {
+      const routePath = route.path;
+      console.log(routePath, 'routePath', routePath);
+      const hidePath = ['/prepare-lessons'];
+      return hidePath.includes(routePath) ? false : true;
+    });
 
     onMounted(() => {
       initMoveable();
@@ -667,32 +673,16 @@ export default defineComponent({
                 计时器
               </div>
               <div
-                class={styles.booxToolItem}
+                class={[
+                  styles.booxToolItem,
+                  !startClassStatus.value && styles.booxToolDisabled
+                ]}
                 onClick={() => {
+                  if (!startClassStatus.value) return;
                   showClass.value = true;
-                }}
-                style={{
-                  display: [
-                    '/',
-                    '/home',
-                    '/classList',
-                    '/prepare-lessons'
-                  ].includes(route.path)
-                    ? 'none'
-                    : 'block'
                 }}>
                 <img
                   src={toolStartClass}
-                  style={{
-                    display: [
-                      '/',
-                      '/home',
-                      '/classList',
-                      '/prepare-lessons'
-                    ].includes(route.path)
-                      ? 'none'
-                      : 'block'
-                  }}
                   class={[styles.toolClassImg]}
                   alt=""
                 />
@@ -700,14 +690,18 @@ export default defineComponent({
               </div>
             </div>
             <div>
-              {helpNoteStatus.value && (
-                <div
-                  class={styles.booxToolItem}
-                  onClick={() => startShowModal('iconNote')}>
-                  <img src={iconNote} alt="" />
-                  帮助指引
-                </div>
-              )}
+              <div
+                class={[
+                  styles.booxToolItem,
+                  !helpNoteStatus.value && styles.booxToolDisabled
+                ]}
+                onClick={() => {
+                  if (!helpNoteStatus.value) return;
+                  startShowModal('iconNote');
+                }}>
+                <img src={iconNote} alt="" />
+                帮助指引
+              </div>
 
               <div
                 class={styles.booxToolItem}