feat: 开课

src/components/core/layouts/art-settings-panel/composables/useSettingsConfig.ts

@@ -61,7 +61,7 @@ export function useSettingsConfig() {
   const basicSettingsConfig = computed(() => {
     // 定义所有基础设置项
     const allSettings = [
-      { key: 'showWorkTab', label: t('setting.basics.list.multiTab'), type: 'switch' as const, handler: 'workTab', headerBarKey: null },
+      // { key: 'showWorkTab', label: t('setting.basics.list.multiTab'), type: 'switch' as const, handler: 'workTab', headerBarKey: null },
       // { key: 'uniqueOpened', label: t('setting.basics.list.accordion'), type: 'switch' as const, handler: 'uniqueOpened', headerBarKey: null },
       // { key: 'showMenuButton', label: t('setting.basics.list.collapseSidebar'), type: 'switch' as const, handler: 'menuButton', headerBarKey: 'menuButton' as const },
       // { key: 'showFastEnter', label: t('setting.basics.list.fastEnter'), type: 'switch' as const, handler: 'fastEnter', headerBarKey: 'fastEnter' as const },

src/components/core/layouts/art-settings-panel/composables/useSettingsHandlers.ts

@@ -46,10 +46,7 @@ export function useSettingsHandlers() {
   }
 
   // 通用值变更处理器
-  const createValueHandler = <T>(
-    storeMethod: (value: T) => void,
-    callback?: (value: T) => void
-  ) => {
+  const createValueHandler = <T>(storeMethod: (value: T) => void, callback?: (value: T) => void) => {
     return (value: T) => {
       if (value !== undefined && value !== null) {
         storeMethod(value)
@@ -93,27 +90,19 @@ export function useSettingsHandlers() {
     ),
 
     // 水印显示
-    watermark: createToggleHandler(() =>
-      settingStore.setWatermarkVisible(!settingStore.watermarkVisible)
-    ),
+    watermark: createToggleHandler(() => settingStore.setWatermarkVisible(!settingStore.watermarkVisible)),
 
     // 菜单展开宽度
-    menuOpenWidth: createValueHandler<number>((width: number) =>
-      settingStore.setMenuOpenWidth(width)
-    ),
+    menuOpenWidth: createValueHandler<number>((width: number) => settingStore.setMenuOpenWidth(width)),
 
     // 标签页风格
     tabStyle: createValueHandler<string>((style: string) => settingStore.setTabStyle(style)),
 
     // 页面切换动画
-    pageTransition: createValueHandler<string>((transition: string) =>
-      settingStore.setPageTransition(transition)
-    ),
+    pageTransition: createValueHandler<string>((transition: string) => settingStore.setPageTransition(transition)),
 
     // 圆角大小
-    customRadius: createValueHandler<string>((radius: string) =>
-      settingStore.setCustomRadius(radius)
-    )
+    customRadius: createValueHandler<string>((radius: string) => settingStore.setCustomRadius(radius))
   }
 
   // 盒子样式处理器
@@ -123,10 +112,7 @@ export function useSettingsHandlers() {
       const { boxBorderMode } = storeToRefs(settingStore)
 
       // 防止重复设置
-      if (
-        (type === 'shadow-mode' && boxBorderMode.value === false) ||
-        (type === 'border-mode' && boxBorderMode.value === true)
-      ) {
+      if ((type === 'shadow-mode' && boxBorderMode.value === false) || (type === 'border-mode' && boxBorderMode.value === true)) {
         return
       }
 

src/components/core/layouts/art-work-tab/index.vue

@@ -22,10 +22,7 @@
           @contextmenu.prevent="(e: MouseEvent) => showMenu(e, item.path)"
         >
           {{ item.customTitle || formatMenuTitle(item.title) }}
-          <el-icon
-            v-if="list.length > 1 && !item.fixedTab"
-            @click.stop="closeWorktab('current', item.path)"
-          >
+          <el-icon v-if="list.length > 1 && !item.fixedTab" @click.stop="closeWorktab('current', item.path)">
             <Close />
           </el-icon>
           <div class="line"></div>
@@ -34,21 +31,12 @@
     </div>
 
     <div class="right">
-      <el-icon
-        class="btn console-box art-custom-card"
-        @click="(e: MouseEvent) => showMenu(e, activeTab)"
-      >
+      <el-icon class="btn console-box art-custom-card" @click="(e: MouseEvent) => showMenu(e, activeTab)">
         <ArrowDown />
       </el-icon>
     </div>
 
-    <ArtMenuRight
-      ref="menuRef"
-      :menu-items="menuItems"
-      :menu-width="140"
-      :border-radius="10"
-      @select="handleSelect"
-    />
+    <ArtMenuRight ref="menuRef" :menu-items="menuItems" :menu-width="140" :border-radius="10" @select="handleSelect" />
   </div>
 </template>
 
@@ -235,10 +223,7 @@
 
       const { scrollWidth, ulWidth, offsetLeft, curTabRight, targetLeft } = positions
 
-      if (
-        (offsetLeft > Math.abs(scrollState.value.translateX) && curTabRight <= scrollWidth) ||
-        (scrollState.value.translateX < targetLeft && targetLeft < 0)
-      ) {
+      if ((offsetLeft > Math.abs(scrollState.value.translateX) && curTabRight <= scrollWidth) || (scrollState.value.translateX < targetLeft && targetLeft < 0)) {
         return
       }
 
@@ -285,10 +270,7 @@
       const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth
       const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY
 
-      scrollState.value.translateX = Math.min(
-        Math.max(scrollState.value.translateX - delta, xMin),
-        xMax
-      )
+      scrollState.value.translateX = Math.min(Math.max(scrollState.value.translateX - delta, xMin), xMax)
     }
 
     const handleTouchStart = (event: TouchEvent) => {
@@ -302,10 +284,7 @@
       const deltaX = touchState.value.currentX - touchState.value.startX
       const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth
 
-      scrollState.value.translateX = Math.min(
-        Math.max(scrollState.value.translateX + deltaX, xMin),
-        0
-      )
+      scrollState.value.translateX = Math.min(Math.max(scrollState.value.translateX + deltaX, xMin), 0)
       touchState.value.startX = touchState.value.currentX
     }
 
@@ -414,10 +393,8 @@
   // 组合所有逻辑
   const { menuItems } = useContextMenu()
   const { setTransition, autoPositionTab } = useScrolling()
-  const { setupEventListeners, cleanupEventListeners, adjustPositionAfterClose } =
-    useEventHandlers()
-  const { clickTab, closeWorktab, showMenu, handleSelect } =
-    useTabOperations(adjustPositionAfterClose)
+  const { setupEventListeners, cleanupEventListeners, adjustPositionAfterClose } = useEventHandlers()
+  const { clickTab, closeWorktab, showMenu, handleSelect } = useTabOperations(adjustPositionAfterClose)
 
   // 生命周期
   onMounted(() => {

src/store/modules/setting.ts

@@ -46,7 +46,7 @@ export const useSettingStore = defineStore(
     /** 是否显示面包屑 */
     const showCrumbs = ref(true)
     /** 是否显示工作台标签 */
-    const showWorkTab = ref(true)
+    const showWorkTab = ref(false)
     /** 是否显示语言切换 */
     const showLanguage = ref(false)
     /** 是否显示进度条 */

src/views/train/trainer/course-run/index.vue

@@ -1,8 +1,73 @@
 <template>
-  <div>
-    <h2>课程运行</h2>
-    <div>正在开发中，敬请期待</div>
+  <div class="page-content flex flex-col gap-4">
+    <div class="text-lg font-bold">课程运行</div>
+    <div class="course flex flex-row">
+      <div class="course-cover">
+        <ElImage class="cover" :src="cover1" lazy fit="cover">
+          <template #error>
+            <div class="image-slot">
+              <ElIcon><icon-picture /></ElIcon>
+            </div>
+          </template>
+        </ElImage>
+      </div>
+      <div class="course-info flex-1">
+        <div class="course-name">课程名称</div>
+        <div class="course-desc">课程描述</div>
+      </div>
+      <div class="timer"> 00:00:00 </div>
+    </div>
+    <div class="flex h-full flex-1 flex-row gap-4">
+      <div class="flex-1 border"> 运行流程图 </div>
+      <div class="flex flex-col gap-4">
+        <div class="h-[180px] w-[320px] border p-4">
+          <el-button type="primary">开始课程</el-button>
+          <el-button type="primary">结束课程</el-button>
+        </div>
+        <div class="flex-1 border p-4">
+          <div class="mb-4 text-lg font-medium">节点信息</div>
+          <ElEmpty :description="`暂无节点信息`" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-<script lang="ts" setup></script>
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+  import cover1 from '@imgs/cover/img5.webp'
+</script>
+<style lang="scss" scoped>
+  .border {
+    border: 1px solid var(--art-gray-200);
+  }
+  .course {
+    border: 1px solid var(--art-gray-200);
+    height: 105px;
+  }
+  .course-cover {
+    padding: 10px 20px;
+    position: relative;
+    aspect-ratio: 5/3;
+
+    .cover {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      background: var(--art-gray-200);
+      border-radius: 2px;
+
+      .image-slot {
+        font-size: 26px;
+        color: var(--art-gray-400);
+      }
+    }
+  }
+  .timer {
+    font-weight: 600;
+    font-size: 60px;
+    line-height: 105px;
+    text-align: center;
+  }
+</style>