refactor(ui): 优化代码格式和组件结构

style: 统一代码缩进和换行格式
feat(EasyProcess): 新增节点配置抽屉组件
docs: 更新拼写检查词汇列表

.vscode/settings.json

@@ -48,12 +48,17 @@
     "eslint.config.mjs": ".eslintignore,.prettierrc,.prettierignore,.stylelintignore,commitlint.*,prettier.*,stylelint.*,.eslintrc-auto-import.*,.release*,.editorconfig,.stylelintrc.*,.auto-import.json"
   },
   "cSpell.words": [
+    "Cascader",
+    "checkboxgroup",
     "iconfont",
     "persistedstate",
+    "pinia",
     "unplugin",
+    "unref",
     "VITE",
     "vueuse",
     "Worktab",
-    "Worktabs"
+    "Worktabs",
+    "xgplayer"
   ]
 }

src/components/business/EasyProcess/core/drawer_default.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="drawer_default">{{ `节点的配置信息【${title}】` }} </div>
+</template>
+
+<script setup lang="ts">
+  import { EasyProcess } from '../common/process.type'
+
+  const props = withDefaults(defineProps<{ node: EasyProcess.NodeConfig }>(), {})
+  const title = computed(() => props.node.nodeType)
+</script>
+
+<style scoped lang="scss">
+  .drawer_default {
+    padding: 10px;
+  }
+</style>

src/components/business/EasyProcess/core/drawer_wrap.vue

@@ -1,13 +1,29 @@
 <template>
   <Dialog>
-    <div class="drawer_wrap">{{ node.nodeName }} </div>
+    <div class="drawer_wrap">
+      <component :is="DrawerMap[node.nodeType] || DrawerDefault" :node="node" />
+    </div>
   </Dialog>
 </template>
 
 <script setup lang="ts" name="DrawerWrap">
+  import { Component } from 'vue'
   import { useDialog } from '@/components/dialog'
   import { EasyProcess } from '../common/process.type'
 
+  import DrawerOperation from '../node/operation_drawer.vue'
+  import DrawerFault from '../node/fault_drawer.vue'
+  import DrawerVoice from '../node/voice_drawer.vue'
+  import DrawerCondition from '../node/condition_drawer.vue'
+  import DrawerDefault from './drawer_default.vue'
+
+  const DrawerMap = shallowRef<Record<string, Component>>({
+    Operation: DrawerOperation,
+    Fault: DrawerFault,
+    Voice: DrawerVoice,
+    Condition: DrawerCondition
+  })
+
   const props = withDefaults(defineProps<{ node: EasyProcess.NodeConfig }>(), {})
 
   const [Dialog, dialogApi] = useDialog({ title: props.node.nodeName || '节点配置', width: '30%', dialogType: 'drawer', modal: true })

src/components/business/EasyProcess/node/condition_drawer.vue

@@ -8,7 +8,7 @@
       </el-form-item>
       <!-- 条件选项 -->
       <el-form-item label="条件选项">
-        <el-radio-group v-model="optionValue" size="small">
+        <el-radio-group size="small">
           <el-radio v-for="item in options" :key="item.value" :value="item.value" :label="item.label" border />
         </el-radio-group>
       </el-form-item>
@@ -16,35 +16,20 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts" name="ConditionDrawer">
   import { computed } from 'vue'
+  import { EasyProcess } from '../common/process.type'
 
-  const props = defineProps({
-    config: {
-      type: Object,
-      default: () => ({ value: '1' })
-    }
-  })
-
-  // 使用计算属性创建响应式模型
-  const optionValue = computed({
-    get: () => props.config.value || '1',
-    set: (value) => {
-      emit('update:config', { ...props.config, value })
-    }
-  })
-
-  // 定义事件
-  const emit = defineEmits(['update:config'])
+  const props = withDefaults(defineProps<{ node: EasyProcess.NodeConfig }>(), {})
 
   // 计算当前选中的选项标签
   const selectedOptionLabel = computed(() => {
-    const option = options.find((item) => item.value === optionValue.value)
+    const option = options.find((item) => item.value === formModel.value.value)
     return option ? option.label : '未知'
   })
 
   // 表单模型（用于el-form绑定）
-  const formModel = computed(() => ({ value: optionValue.value }))
+  const formModel = computed(() => props.node.nodeData || {})
 
   const options = [
     { label: '与 (AND)', value: '1' },

src/components/core/banners/art-card-banner/index.vue

@@ -21,12 +21,7 @@
         >
           {{ props.cancelButton?.text }}
         </div>
-        <div
-          v-if="props.button?.show"
-          class="banner-button"
-          :style="{ backgroundColor: props.button?.color, color: props.button?.textColor }"
-          @click="handleClick"
-        >
+        <div v-if="props.button?.show" class="banner-button" :style="{ backgroundColor: props.button?.color, color: props.button?.textColor }" @click="handleClick">
           {{ props.button?.text }}
         </div>
       </div>

src/components/core/layouts/art-header-bar/index.vue

@@ -64,8 +64,8 @@
               </div>
             </template>
             <template #default>
-              <p
-                >{{ $t('topBar.guide.title') }}<span :style="{ color: systemThemeColor }"> {{ $t('topBar.guide.theme') }} </span>、
+              <p>
+                {{ $t('topBar.guide.title') }}<span :style="{ color: systemThemeColor }"> {{ $t('topBar.guide.theme') }} </span>、
                 <span :style="{ color: systemThemeColor }"> {{ $t('topBar.guide.menu') }} </span>{{ $t('topBar.guide.description') }}
               </p>
             </template>

src/components/core/layouts/art-menus/art-horizontal-menu/index.vue

@@ -12,13 +12,7 @@
       :hide-timeout="50"
       popper-class="horizontal-menu-popper"
     >
-      <HorizontalSubmenu
-        v-for="item in filteredMenuItems"
-        :key="item.path"
-        :item="item"
-        :isMobile="false"
-        :level="0"
-      />
+      <HorizontalSubmenu v-for="item in filteredMenuItems" :key="item.path" :item="item" :isMobile="false" :level="0" />
     </ElMenu>
   </div>
 </template>

src/components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue

@@ -1,11 +1,7 @@
 <template>
   <ElSubMenu v-if="hasChildren" :index="item.path || item.meta.title">
     <template #title>
-      <i
-        class="menu-icon iconfont-sys"
-        :style="{ color: theme?.iconColor }"
-        v-html="item.meta.icon"
-      ></i>
+      <i class="menu-icon iconfont-sys" :style="{ color: theme?.iconColor }" v-html="item.meta.icon"></i>
       <span>{{ formatMenuTitle(item.meta.title) }}</span>
       <div v-if="item.meta.showBadge" class="art-badge art-badge-horizontal" />
       <div v-if="item.meta.showTextBadge" class="art-text-badge">
@@ -14,33 +10,13 @@
     </template>
 
     <!-- 递归调用自身处理子菜单 -->
-    <HorizontalSubmenu
-      v-for="child in filteredChildren"
-      :key="child.path"
-      :item="child"
-      :theme="theme"
-      :is-mobile="isMobile"
-      :level="level + 1"
-      @close="closeMenu"
-    />
+    <HorizontalSubmenu v-for="child in filteredChildren" :key="child.path" :item="child" :theme="theme" :is-mobile="isMobile" :level="level + 1" @close="closeMenu" />
   </ElSubMenu>
 
-  <ElMenuItem
-    v-else-if="!item.meta.isHide"
-    :index="item.path || item.meta.title"
-    @click="goPage(item)"
-  >
-    <i
-      class="menu-icon iconfont-sys"
-      :style="{ color: theme?.iconColor }"
-      v-html="item.meta.icon"
-    ></i>
+  <ElMenuItem v-else-if="!item.meta.isHide" :index="item.path || item.meta.title" @click="goPage(item)">
+    <i class="menu-icon iconfont-sys" :style="{ color: theme?.iconColor }" v-html="item.meta.icon"></i>
     <span>{{ formatMenuTitle(item.meta.title) }}</span>
-    <div
-      v-if="item.meta.showBadge"
-      class="art-badge"
-      :style="{ right: level === 0 ? '10px' : '20px' }"
-    />
+    <div v-if="item.meta.showBadge" class="art-badge" :style="{ right: level === 0 ? '10px' : '20px' }" />
     <div v-if="item.meta.showTextBadge && level !== 0" class="art-text-badge">
       {{ item.meta.showTextBadge }}
     </div>

src/components/core/layouts/art-menus/art-mixed-menu/index.vue

@@ -9,21 +9,10 @@
     </div>
 
     <!-- 滚动容器 -->
-    <ElScrollbar
-      ref="scrollbarRef"
-      wrap-class="scrollbar-wrapper"
-      :horizontal="true"
-      @scroll="handleScroll"
-      @wheel="handleWheel"
-    >
+    <ElScrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper" :horizontal="true" @scroll="handleScroll" @wheel="handleWheel">
       <div class="scroll-bar">
         <template v-for="item in processedMenuList" :key="item.meta.title">
-          <div
-            v-if="!item.meta.isHide"
-            class="item"
-            :class="{ active: item.isActive }"
-            @click="handleMenuJump(item, true)"
-          >
+          <div v-if="!item.meta.isHide" class="item" :class="{ active: item.isActive }" @click="handleMenuJump(item, true)">
             <i class="iconfont-sys" v-html="item.meta.icon" />
             <span>{{ item.formattedTitle }}</span>
             <div v-if="item.meta.showBadge" class="art-badge art-badge-mixed" />
@@ -159,10 +148,7 @@
     if (!scrollbarRef.value?.wrapRef) return
 
     const currentScroll = scrollbarRef.value.wrapRef.scrollLeft
-    const targetScroll =
-      direction === 'left'
-        ? currentScroll - SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
-        : currentScroll + SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
+    const targetScroll = direction === 'left' ? currentScroll - SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE : currentScroll + SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
 
     // 平滑滚动到目标位置
     scrollbarRef.value.wrapRef.scrollTo({
@@ -188,10 +174,7 @@
     const { scrollLeft, scrollWidth, clientWidth } = wrapRef
 
     // 使用更小的滚动步长，让滚动更平滑
-    const scrollStep =
-      Math.abs(event.deltaY) > SCROLL_CONFIG.WHEEL_FAST_THRESHOLD
-        ? SCROLL_CONFIG.WHEEL_FAST_STEP
-        : SCROLL_CONFIG.WHEEL_SLOW_STEP
+    const scrollStep = Math.abs(event.deltaY) > SCROLL_CONFIG.WHEEL_FAST_THRESHOLD ? SCROLL_CONFIG.WHEEL_FAST_STEP : SCROLL_CONFIG.WHEEL_SLOW_STEP
     const scrollDelta = event.deltaY > 0 ? scrollStep : -scrollStep
     const targetScroll = Math.max(0, Math.min(scrollLeft + scrollDelta, scrollWidth - clientWidth))
 

src/components/core/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue

@@ -10,28 +10,13 @@
         <div v-if="item.meta.showBadge" class="art-badge" style="right: 10px" />
       </template>
 
-      <SidebarSubmenu
-        :list="item.children"
-        :is-mobile="isMobile"
-        :level="level + 1"
-        :theme="theme"
-        @close="closeMenu"
-      />
+      <SidebarSubmenu :list="item.children" :is-mobile="isMobile" :level="level + 1" :theme="theme" @close="closeMenu" />
     </ElSubMenu>
 
     <!-- 普通菜单项 -->
-    <ElMenuItem
-      v-else
-      :index="item.path || item.meta.title"
-      :level-item="level + 1"
-      @click="goPage(item)"
-    >
+    <ElMenuItem v-else :index="item.path || item.meta.title" :level-item="level + 1" @click="goPage(item)">
       <MenuItemIcon :icon="item.meta.icon" :color="theme?.iconColor" />
-      <div
-        v-show="item.meta.showBadge && level === 0 && !menuOpen"
-        class="art-badge"
-        style="right: 5px"
-      />
+      <div v-show="item.meta.showBadge && level === 0 && !menuOpen" class="art-badge" style="right: 5px" />
 
       <template #title>
         <span class="menu-name">

src/components/core/layouts/art-settings-panel/widget/BasicSettings.vue

@@ -2,13 +2,7 @@
   <div class="basic-settings">
     <SectionTitle :title="$t('setting.basics.title')" :style="{ marginTop: '40px' }" />
     <div class="basic-box">
-      <SettingItem
-        v-for="config in basicSettingsConfig"
-        :key="config.key"
-        :config="config"
-        :model-value="getSettingValue(config.key)"
-        @change="handleSettingChange(config.handler, $event)"
-      />
+      <SettingItem v-for="config in basicSettingsConfig" :key="config.key" :config="config" :model-value="getSettingValue(config.key)" @change="handleSettingChange(config.handler, $event)" />
     </div>
   </div>
 </template>

src/components/core/layouts/art-settings-panel/widget/BoxStyleSettings.vue

@@ -2,13 +2,7 @@
   <div class="box-style-settings">
     <SectionTitle :title="$t('setting.box.title')" :style="{ marginTop: '40px' }" />
     <div class="box-style">
-      <div
-        v-for="option in boxStyleOptions"
-        :key="option.value"
-        class="button"
-        :class="{ 'is-active': isActive(option.type) }"
-        @click="boxStyleHandlers.setBoxMode(option.type)"
-      >
+      <div v-for="option in boxStyleOptions" :key="option.value" class="button" :class="{ 'is-active': isActive(option.type) }" @click="boxStyleHandlers.setBoxMode(option.type)">
         {{ option.label }}
       </div>
     </div>

src/components/core/layouts/art-settings-panel/widget/ColorSettings.vue

@@ -3,12 +3,7 @@
     <SectionTitle :title="$t('setting.color.title')" style="margin-top: 40px" />
     <div class="main-color-wrap">
       <div class="offset">
-        <div
-          v-for="color in configOptions.mainColors"
-          :key="color"
-          :style="{ background: `${color} !important` }"
-          @click="colorHandlers.selectColor(color)"
-        >
+        <div v-for="color in configOptions.mainColors" :key="color" :style="{ background: `${color} !important` }" @click="colorHandlers.selectColor(color)">
           <i class="iconfont-sys" v-show="color === systemThemeColor">&#xe616;</i>
         </div>
       </div>

src/components/core/layouts/art-settings-panel/widget/ContainerSettings.vue

@@ -2,13 +2,7 @@
   <div class="container-settings">
     <SectionTitle :title="$t('setting.container.title')" :style="{ marginTop: '50px' }" />
     <div class="container-width">
-      <div
-        v-for="option in containerWidthOptions"
-        :key="option.value"
-        class="item"
-        :class="{ 'is-active': containerWidth === option.value }"
-        @click="containerHandlers.setWidth(option.value)"
-      >
+      <div v-for="option in containerWidthOptions" :key="option.value" class="item" :class="{ 'is-active': containerWidth === option.value }" @click="containerHandlers.setWidth(option.value)">
         <i class="iconfont-sys" v-html="option.icon"></i>
         <span>{{ option.label }}</span>
       </div>

src/components/core/layouts/art-settings-panel/widget/MenuStyleSettings.vue

@@ -1,12 +1,7 @@
 <template>
   <SectionTitle :title="$t('setting.menu.title')" />
   <div class="setting-box-wrap">
-    <div
-      class="setting-item"
-      v-for="item in menuThemeList"
-      :key="item.theme"
-      @click="switchMenuStyles(item.theme)"
-    >
+    <div class="setting-item" v-for="item in menuThemeList" :key="item.theme" @click="switchMenuStyles(item.theme)">
       <div
         class="box"
         :class="{ 'is-active': item.theme === menuThemeType }"

src/components/core/layouts/art-settings-panel/widget/SettingItem.vue

@@ -18,18 +18,8 @@
     />
 
     <!-- 选择器类型 -->
-    <el-select
-      v-else-if="config.type === 'select'"
-      :model-value="modelValue"
-      :style="config.style"
-      @change="handleChange"
-    >
-      <el-option
-        v-for="option in normalizedOptions"
-        :key="option.value"
-        :label="option.label"
-        :value="option.value"
-      />
+    <el-select v-else-if="config.type === 'select'" :model-value="modelValue" :style="config.style" @change="handleChange">
+      <el-option v-for="option in normalizedOptions" :key="option.value" :label="option.label" :value="option.value" />
     </el-select>
   </div>
 </template>
@@ -48,9 +38,7 @@
     step?: number
     style?: Record<string, string>
     controlsPosition?: '' | 'right'
-    options?:
-      | Array<{ value: any; label: string }>
-      | ComputedRef<Array<{ value: any; label: string }>>
+    options?: Array<{ value: any; label: string }> | ComputedRef<Array<{ value: any; label: string }>>
   }
 
   interface Props {

src/components/core/layouts/art-settings-panel/widget/ThemeSettings.vue

@@ -1,12 +1,7 @@
 <template>
   <SectionTitle :title="$t('setting.theme.title')" />
   <div class="setting-box-wrap">
-    <div
-      class="setting-item"
-      v-for="(item, index) in configOptions.themeList"
-      :key="item.theme"
-      @click="switchThemeStyles(item.theme)"
-    >
+    <div class="setting-item" v-for="(item, index) in configOptions.themeList" :key="item.theme" @click="switchThemeStyles(item.theme)">
       <div class="box" :class="{ 'is-active': item.theme === systemThemeMode }">
         <img :src="item.img" />
       </div>

src/components/dialog/dialog.vue

@@ -66,9 +66,7 @@
   const fullscreen = ref(false)
 
   // 根据 dialogType 决定使用哪个组件
-  const dialogComponent = computed(() => {
-    return props.dialogType === 'drawer' ? ElDrawer : ElDialog
-  })
+  const dialogComponent = computed(() => (props.dialogType === 'drawer' ? ElDrawer : ElDialog))
 
   // 根据 dialogType 设置不同的 customClass
   const customClass = computed(() => {

src/utils/storage/storage.ts

@@ -33,9 +33,7 @@ class StorageCompatibilityManager {
     const storageKeys = Object.keys(localStorage)
     const currentVersionPattern = StorageConfig.createCurrentVersionPattern()
 
-    return storageKeys.some(
-      (key) => currentVersionPattern.test(key) && localStorage.getItem(key) !== null
-    )
+    return storageKeys.some((key) => currentVersionPattern.test(key) && localStorage.getItem(key) !== null)
   }
 
   /**

src/utils/ui/colors.ts

@@ -198,17 +198,11 @@ export function handleElementThemeColor(theme: string, isDark: boolean = false):
   document.documentElement.style.setProperty('--el-color-primary', theme)
 
   for (let i = 1; i <= 9; i++) {
-    document.documentElement.style.setProperty(
-      `--el-color-primary-light-${i}`,
-      getLightColor(theme, i / 10, isDark)
-    )
+    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, getLightColor(theme, i / 10, isDark))
   }
 
   for (let i = 1; i <= 9; i++) {
-    document.documentElement.style.setProperty(
-      `--el-color-primary-dark-${i}`,
-      getDarkColor(theme, i / 10)
-    )
+    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, getDarkColor(theme, i / 10))
   }
 }
 

src/utils/ui/emojo.ts

@@ -10,10 +10,10 @@
 
 // macos 用户 按 shift + 6 可以唤出更多表情……
 const EmojiText: { [key: string]: string } = {
-  '0': 'O_O', // 空
-  '200': '^_^', // 成功
-  '400': 'T_T', // 错误请求
-  '500': 'X_X' // 服务器内部错误，无法完成请求
+  '0': '🌟', // 空
+  '200': '🚀', // 成功
+  '400': '🛠️', // 错误请求
+  '500': '🔥' // 服务器内部错误，无法完成请求
 }
 
 // const EmojiIcon = ['🟢', '🔴', '🟡 ', '🚀', '✨', '💡', '🛠️', '🔥', '🎉', '🌟', '🌈']

src/views/train/course/course-list.vue

@@ -32,7 +32,7 @@
                 <el-button size="small" type="primary" :icon="Edit" @click.stop="toEdit(item)">编辑</el-button>
                 <el-button size="small" type="danger" :icon="Delete" @click.stop="deleteCourse(item)">删除</el-button>
                 <el-button size="small" type="info" :icon="CopyDocument" @click.stop="copyCourse(item)">复制</el-button>
-                <!-- <el-button size="small" type="text"> 编辑记录 </el-button> -->
+                <!-- <el-button size="small" type="link"> 编辑记录 </el-button> -->
                 <el-button size="small" type="text"> 培训记录 </el-button>
               </div>
             </div>