ylwl-cpscoms 1.0.0

package/src/SlGuide/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+// 运行时动态加载 shepherd.js
+// 使用 webpackIgnore 注释避免消费项目的 webpack 在构建时解析此可选依赖
+let Shepherd = null
+
+async function loadShepherd() {
+  try {
+    const shepherdModule = await import(/* webpackIgnore: true */ 'shepherd.js')
+    Shepherd = shepherdModule.default || shepherdModule
+    await import(/* webpackIgnore: true */ 'shepherd.js/dist/css/shepherd.css')
+    return true
+  } catch (e) {
+    console.warn('[SlGuide] shepherd.js 未安装，引导功能不可用。请执行 npm install shepherd.js 安装依赖。')
+    return false
+  }
+}
+
+export default {
+  name: 'Guide',
+  props: {
+    steps: {
+      type: Array,
+      required: true
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    onNext: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  async mounted() {
+    // 仅在 shepherd.js 已安装时初始化引导
+    const loaded = await loadShepherd()
+    if (loaded) {
+      this.initTour()
+    }
+  },
+  methods: {
+    initTour() {
+      const tour = new Shepherd.Tour({
+        ...this.options,
+        defaultStepOptions: {
+          classes: 'shadow-md bg-purple-dark text-light shepherd-has-title',
+          scrollTo: true,
+          cancelIcon: {
+            enabled: false
+          },
+          highlightClass: 'highlight-custom-class'
+        },
+        exitOnEsc: true,
+        keyboardNavigation: true,
+        showCancelLink: false,
+        useModalOverlay: true
+      })
+
+      this.steps.forEach((step, index) => {
+        const customButtons = step.buttons.map(button => ({
+          ...button,
+          action: () => {
+            if (button.actionType === 'next') {
+              button.action && button.action(tour)
+
+              tour.next()
+            } else {
+              button.action(tour)
+            }
+            return false
+          }
+        }))
+
+        tour.addStep({
+          ...step,
+          buttons: customButtons,
+          beforeShowPromise: () => {
+            return new Promise(resolve => {
+              if (step.attachTo && step.attachTo.element) {
+                const el = document.querySelector(step.attachTo.element)
+                if (el) {
+                  el.style.pointerEvents = 'none'
+                  el.classList.add('disabled-by-shepherd')
+                }
+              }
+              resolve()
+            })
+          },
+          showOn: () => {
+            const el = document.querySelector(step.attachTo.element || '')
+            return Boolean(el)
+          }
+        })
+      })
+
+      tour.start()
+    }
+  }
+}
+</script>
+<style lang="css">
+.shepherd-element {
+  background-color: #158dff;
+}
+.shepherd-element[data-popper-placement=bottom] {
+  margin-top: 60px !important;
+}
+.shepherd-element[data-popper-placement=bottom] .shepherd-arrow {
+  width: 60px;
+  height: 60px;
+  /* background: url("~@/assets/images/u11370.svg") center no-repeat; */
+  left: -60px;
+  top: -61px;
+}
+.shepherd-element[data-popper-placement=bottom] .shepherd-arrow::before {
+  display: none;
+}
+.shepherd-element .shepherd-header {
+  height: 40px;
+  line-height: 40px;
+  background-color: #158dff;
+}
+.shepherd-element .shepherd-header .shepherd-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+}
+.shepherd-element .shepherd-text {
+  font-size: 14px;
+  padding: 1em;
+  line-height: 1.6;
+  color: #fff;
+}
+.shepherd-element .shepherd-footer {
+  padding: 0 1em 1em;
+  color: #fff;
+}
+.shepherd-element .shepherd-footer .shepherd-button {
+  height: 32px;
+  padding: 0 1.5rem;
+  line-height: 32px;
+  background-color: #fff;
+  color: #158dff;
+  font-size: 14px;
+}
+.shepherd-element .shepherd-button-quit {
+  background: none !important;
+  color: rgb(201, 202, 202) !important;
+}
+.shepherd-element .disabled-by-shepherd {
+  pointer-events: none;
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
+<style scoped lang="css">
+@charset "UTF-8";
+/* 自定义高亮样式 */
+.highlight-custom-class {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+</style>

package/src/SlGuide/remark.md

@@ -0,0 +1,90 @@
+<template>
+
+  <div>
+    <el-button id="aaaa" size="small" type="primary" @click="vvvv = true">vvvv</el-button>
+    <button class="yourButtonClass" id="firstButton">第一个按钮</button>
+    <button class="yourButtonClass" id="secondButton">第二个按钮</button>
+
+  <Guidess v-if="vvvv" :steps="steps" :options="options" @onNext="handleNext" />
+  </div> 
+
+
+</template>
+<script>
+import Guidess from '@/components/global/SlGuide'
+export default {
+  components: {
+    SlPage,
+    SlTable,
+    SlMessage,
+    Guide,
+    Guidess
+  },
+  data() {
+    return {
+      vvvv: false,
+      currentStepIndex: 0,
+      steps: [
+        {
+          id: 'first-step',
+          text: '这是引导的第一步!',
+          attachTo: { element: '.yourButtonClass#firstButton', on: 'bottom' }, // 使用类名和ID
+          buttons: [
+            {
+              text: '上一步',
+              action: (tour) => tour.back(),
+              classes: 'shepherd-button-secondary'
+            },
+            {
+              text: '下一步',
+              actionType: 'next', // 标记为下一步
+              classes: 'shepherd-button-primary'
+            }
+          ]
+        },
+        {
+          id: 'second-step',
+          text: '这是引导的第二步!',
+          attachTo: { element: '.yourButtonClass#secondButton', on: 'bottom' }, // 使用类名和ID
+          buttons: [
+            {
+              text: '上一步',
+              action: (tour) => tour.back(),
+              classes: 'shepherd-button-secondary'
+            },
+            {
+              text: '完成',
+              actionType: 'next', // 标记为下一步
+              classes: 'shepherd-button-primary'
+            }
+          ]
+        }
+      ],
+      options: {
+        defaultStepOptions: {
+          classes: 'shepherd-theme-arrows',
+          scrollTo: true
+        }
+      }
+    }
+  },
+}
+</script>
+
+<!--  const targetColumnIndex = 1 // “姓名”列的索引
+      // 找到目标单元格元素
+      const targetCell = document.querySelector(`.el-table__body tr:nth-child(${1 + 1}) .el-table__cell:nth-child(${targetColumnIndex + 1})`)
+      const tour = new Shepherd.Tour({
+        defaultStepOptions: {
+          classes: 'shadow-md bg-purple-dark text-light',
+          scrollTo: true,
+          cancelIcon: {
+            enabled: true
+          },
+          highlightClass: 'highlight-custom-class'
+        },
+        exitOnEsc: true,
+        keyboardNavigation: true,
+        showCancelLink: false,
+        useModalOverlay: true
+      }) -->

package/src/SlMessageBox/index.js

@@ -0,0 +1,35 @@
+
+import { MessageBox, Message } from 'element-ui'
+
+export function showConfirmMessageBox(options) {
+  const defaultOptions = {
+    title: '提示',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    successMessage: '操作成功'
+  }
+
+  const mergedOptions = { ...defaultOptions, ...options }
+
+  MessageBox.confirm(mergedOptions.message, mergedOptions.title, {
+    confirmButtonText: mergedOptions.confirmButtonText,
+    cancelButtonText: mergedOptions.cancelButtonText,
+    type: mergedOptions.type
+  }).then(async() => {
+    if (typeof mergedOptions.api === 'function') {
+      await mergedOptions.api(mergedOptions.params)
+    }
+    if (typeof mergedOptions.onConfirm === 'function') {
+      mergedOptions.onConfirm()
+    }
+    Message({
+      type: 'success',
+      message: mergedOptions.successMessage
+    })
+  }).catch(() => {
+    if (typeof mergedOptions.onCancel === 'function') {
+      mergedOptions.onCancel()
+    }
+  })
+}