ylwl-cpscoms 1.1.0 → 1.2.0

package/src/SlDialog/dialogPlus.js

@@ -1,160 +0,0 @@
-import Vue from 'vue'
-import { isMobileDevice } from '../utils'
-
-// 🌟 核心魔法：注册一个全局的辅助组件，充当“传送门”（Portal）
-if (!Vue.component('dialog-footer')) {
-  Vue.component('dialog-footer', {
-    inject: {
-      dialogCtx: { default: null }
-    },
-
-    mounted() {
-      if (this.dialogCtx) {
-        this.dialogCtx.setFooterVNodes(this.$slots.default)
-      }
-    },
-    updated() {
-      if (this.dialogCtx) {
-        this.dialogCtx.setFooterVNodes(this.$slots.default)
-      }
-    },
-    destroyed() {
-      if (this.dialogCtx) {
-        this.dialogCtx.setFooterVNodes(null)
-      }
-    },
-    render(h) {
-      return h('div', { style: { display: 'none' }, class: 'dialog-footer-portal' })
-    }
-  })
-}
-
-export function createCommandDialogPlus(options) {
-  const defaultOptions = {
-    title: '提示',
-    width: '50%',
-    specialWidth: '',
-    closeOnClickModal: false,
-    contentComponent: null,
-    contentProps: {},
-    showClose: true,
-    closeOnPressEscape: false,
-    customClass: ''
-  }
-
-  const mergedOptions = { ...defaultOptions, ...options }
-
-  const Constructor = Vue.extend({
-    provide() {
-      return {
-        dialogCtx: this
-      }
-    },
-    data() {
-      return {
-        visible: false,
-        footerVNodes: null
-      }
-    },
-    created() {
-      Object.assign(this, mergedOptions)
-    },
-    mounted() {
-      Vue.nextTick(() => {
-        this.visible = true
-      })
-    },
-    methods: {
-      handleBeforeClose(done) {
-        if (typeof done === 'function') {
-          done() // 允许 el-dialog 执行关闭动画
-        } else {
-          this.visible = false
-        }
-      },
-      handleClose() {
-        if (this._hasClosed) return
-        this._hasClosed = true
-        console.log('你肯定会执行吗啊')
-        if (typeof this.onClose === 'function') {
-          this.onClose(this)
-        }
-        this.$once('closed', () => {
-          this.$destroy()
-          if (this.$el && this.$el.parentNode) {
-            this.$el.parentNode.removeChild(this.$el)
-          }
-        })
-      },
-      // 暴露给业务组件的关闭方法
-      closeDialog() {
-        this.visible = false
-      },
-
-      // 兼容以前的 confirm 逻辑（可选保留，为了向后兼容外层传入 onConfirm）
-      confirmDialog() {
-        if (typeof this.onConfirm === 'function') {
-          this.onConfirm()
-        }
-        this.visible = false // 同样只修改 visible
-      },
-
-      // 供 <dialog-footer> 调用的方法
-      setFooterVNodes(vnodes) {
-        this.footerVNodes = vnodes
-      }
-    },
-
-    render(h) {
-      // 渲染主体业务组件
-      const dialogChildren = [
-        h(this.contentComponent, {
-          props: this.contentProps,
-          ref: 'contentComponent',
-          on: {
-            // 业务组件可以通过 this.$emit('close') 主动关闭弹窗
-            close: this.closeDialog,
-            // 业务组件可以通过 this.$emit('confirm') 触发外层回调并关闭弹窗
-            confirm: this.confirmDialog
-            // 【新增】：允许业务组件透传任意自定义事件到外层
-            // 如果你的业务组件需要向外抛出自定义事件（如 'save-draft'），
-            // 可以在调用 createCommandDialog 时通过 on 属性传入监听器。
-          }
-        })
-      ]
-
-      if (this.footerVNodes) {
-        dialogChildren.push(h('template', { slot: 'footer' }, this.footerVNodes))
-      }
-
-      return h(
-        'el-dialog',
-        {
-          props: {
-            title: this.title,
-            visible: this.visible,
-            width: isMobileDevice() ? '90%' : this.specialWidth ? this.specialWidth : this.width === '30%' ? '30%' : '50%',
-            'close-on-click-modal': this.closeOnClickModal,
-            showClose: this.showClose,
-            'close-on-press-escape': this.closeOnPressEscape,
-            customClass: this.customClass
-          },
-          on: {
-            'update:visible': (val) => {
-              this.visible = val
-            },
-            'before-close': this.handleBeforeClose,
-            close: this.handleClose,
-            closed: () => {
-              this.$emit('closed')
-            }
-          }
-        },
-        dialogChildren
-      )
-    }
-  })
-
-  const instance = new Constructor().$mount()
-  document.body.appendChild(instance.$el)
-}

package/src/SlDialog/index.js

@@ -1,170 +0,0 @@
-import Vue from 'vue'
-import { Button } from 'element-ui'
-import { isMobileDevice } from '../utils'
-export function createCommandDialog(options) {
-  const defaultOptions = {
-    title: '提示',
-    width: '50%',
-    specialWidth: '',
-    closeOnClickModal: false,
-    contentComponent: null,
-    contentProps: {},
-    footerBtns: [],
-    cancelButtonText: '取消',
-    confirmButtonText: '确定',
-    isShowBtn: true,
-    showClose: true,
-    closeOnPressEscape: false,
-    customClass: ''
-  }
-
-  const mergedOptions = { ...defaultOptions, ...options }
-
-  const Constructor = Vue.extend({
-    data() {
-      return {
-        visible: false // 初始状态为 false
-      }
-    },
-    created() {
-      // 在 created 钩子中，将配置项直接浅拷贝到 this 实例上
-      Object.assign(this, mergedOptions)
-    },
-    mounted() {
-      Vue.nextTick(() => {
-        this.visible = true
-      })
-    },
-    methods: {
-      handleBeforeClose() {
-        this.visible = false
-      },
-      handleClose(done) {
-        this.handleBeforeClose()
-        if (typeof this.onClose === 'function') {
-          this.onClose(this)
-        }
-        this.$once('closed', () => {
-          this.$destroy()
-          document.body.removeChild(this.$el)
-        })
-      },
-
-      handleCancel() {
-        this.handleBeforeClose()
-        if (typeof this.onCancel === 'function') {
-          this.onCancel()
-        }
-        this.handleClose()
-      },
-      async handleConfirm() {
-        // body组件中统一confirm方法（不能用在别的地方）
-        let shouldClose = true
-        if (this.$refs.contentComponent.confirm) {
-          try {
-            const result = await this.$refs.contentComponent.confirm()
-            if (result === false) shouldClose = false
-          } catch (error) {
-            console.error('弹窗确认时发生错误:', error)
-            shouldClose = false
-          }
-        }
-        if (typeof this.onConfirm === 'function' && shouldClose) {
-          this.onConfirm()
-        }
-        if (shouldClose) {
-          this.handleClose()
-        }
-      },
-      // 函数 return false 弹窗不消失； 不返回或者true 弹窗消失
-      async footerBtnsClick(type) {
-        if (this.$refs.contentComponent && this.$refs.contentComponent[type]) {
-          const result = await this.$refs.contentComponent[type]()
-          if (result !== false) {
-            this.handleClose()
-          }
-        } else {
-          this.handleClose()
-        }
-      }
-    },
-
-    render(h) {
-      const footerContent = this.footerBtns.length
-        ? h('div',
-          this.footerBtns.map(item => h(Button, {
-            props: {
-              type: item.type || 'default',
-              size: 'small'
-            },
-            on: {
-              click: () => this.footerBtnsClick(item.value)
-            }
-          }, item.label)
-          )
-        ) : h('div', [
-          h(Button, {
-            props: {
-              type: 'default',
-              size: 'small'
-            },
-            on: {
-              click: this.handleCancel
-            }
-          }, this.cancelButtonText),
-          h(Button, {
-            props: {
-              type: 'primary',
-              size: 'small'
-            },
-            on: {
-              click: this.handleConfirm
-            }
-          }, this.confirmButtonText)
-        ])
-
-      return h(
-        'el-dialog',
-        {
-          props: {
-            title: this.title,
-            visible: this.visible,
-            width: isMobileDevice() ? '90%' : this.specialWidth ? this.specialWidth : this.width === '30%' ? '30%' : '50%',
-            'close-on-click-modal': this.closeOnClickModal,
-            showClose: this.showClose,
-            'close-on-press-escape': this.closeOnPressEscape,
-            customClass: this.customClass
-          },
-          on: {
-            'update:visible': (val) => {
-              this.visible = val
-            },
-            'before-close': this.handleBeforeClose,
-            'close': this.handleClose,
-            'closed': () => { this.$emit('closed') }
-          }
-        },
-        [
-          h(this.contentComponent, {
-            props: this.contentProps,
-            ref: 'contentComponent',
-            scopedSlots: this.$scopedSlots,
-            on: {
-              onClose: () => {
-                this.handleClose()
-              },
-              onConfirm: () => {
-                this.handleConfirm()
-              }
-            }
-          }),
-          !this.isShowBtn ? '' : h('template', { slot: 'footer' }, [footerContent])
-        ]
-      )
-    }
-  })
-
-  const instance = new Constructor().$mount()
-
-  document.body.appendChild(instance.$el)
-}

package/src/SlDrawer/SlDrawer.stories.js

@@ -1,154 +0,0 @@
-import { createCommandDrawer } from './index.js'
-
-export default {
-  title: 'Components/SlDrawer',
-  parameters: {
-    docs: {
-      description: {
-        component: '命令式抽屉组件，通过 `createCommandDrawer(options)` 函数调用打开。基于 el-drawer 封装，支持传入自定义内容组件、Props 和事件监听。'
-      }
-    }
-  }
-}
-
-const codeBlock = (code) => `
-  <div style="margin-top:24px;border-top:1px solid #eee;padding-top:16px">
-    <p style="font-size:14px;font-weight:600;color:#666;margin-bottom:8px;">使用代码：</p>
-    <pre style="background:#f5f5f5;padding:16px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all"><code>${escapeHtml(code.trim())}</code></pre>
-  </div>`
-
-function escapeHtml(str) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// 演示用的简单内容组件
-const DemoContent = {
-  props: { message: { type: String, default: '' } },
-  template: `
-    <div style="padding:20px">
-      <p>{{ message }}</p>
-      <p style="color:#999;font-size:13px;margin-top:12px">这是通过 createCommandDrawer 打开的内容区域。</p>
-    </div>`
-}
-
-// ---- 基础用法 ----
-const defaultCode = `<!-- 使用方式 -->
-<script>
-import { createCommandDrawer } from '@/components/global/SlDrawer'
-
-createCommandDrawer({
-  title: '抽屉标题',
-  size: '30%',
-  direction: 'rtl',
-  contentComponent: YourComponent,
-  closeDrawer: () => {
-    console.log('抽屉已关闭')
-  },
-  contentProps: {
-    message: 'Hello'
-  }
-})
-</script>`
-
-export const Default = () => ({
-  methods: {
-    openDrawer() {
-      createCommandDrawer({
-        title: '用户详情',
-        size: '30%',
-        direction: 'rtl',
-        contentComponent: DemoContent,
-        closeDrawer: () => {
-          console.log('抽屉已关闭')
-        },
-        contentProps: {
-          message: '这是通过命令式 API 打开的抽屉'
-        }
-      })
-    }
-  },
-  template: `
-    <div>
-      <el-button type="primary" @click="openDrawer">打开抽屉</el-button>
-      ${codeBlock(defaultCode)}
-    </div>`
-})
-
-Default.storyName = '基础用法'
-
-// ---- 左侧弹出 ----
-const leftCode = `<!-- 左侧弹出 -->
-createCommandDrawer({
-  title: '筛选条件',
-  size: '25%',
-  direction: 'ltr',
-  contentComponent: FilterPanel,
-  closeDrawer: () => {},
-  contentProps: { ... }
-})`
-
-export const LeftDirection = () => ({
-  methods: {
-    openDrawer() {
-      createCommandDrawer({
-        title: '筛选条件',
-        size: '25%',
-        direction: 'ltr',
-        contentComponent: DemoContent,
-        closeDrawer: () => {
-          console.log('左侧抽屉已关闭')
-        },
-        contentProps: {
-          message: '从左侧弹出的抽屉'
-        }
-      })
-    }
-  },
-  template: `
-    <div>
-      <el-button type="success" @click="openDrawer">左侧弹出</el-button>
-      ${codeBlock(leftCode)}
-    </div>`
-})
-
-LeftDirection.storyName = '左侧弹出'
-
-// ---- 大尺寸 ----
-const largeCode = `<!-- 大尺寸抽屉 -->
-createCommandDrawer({
-  title: '编辑信息',
-  size: '50%',
-  direction: 'rtl',
-  contentComponent: EditForm,
-  closeDrawer: () => { this.loadData() },
-  contentProps: { data: rowData },
-  contentListeners: {
-    'save-success': () => { this.refresh() }
-  }
-})`
-
-export const LargeSize = () => ({
-  methods: {
-    openDrawer() {
-      createCommandDrawer({
-        title: '编辑信息',
-        size: '50%',
-        direction: 'rtl',
-        contentComponent: DemoContent,
-        closeDrawer: () => {
-          console.log('大尺寸抽屉已关闭')
-        },
-        contentProps: {
-          message: '大尺寸抽屉，适合表单编辑场景'
-        }
-      })
-    }
-  },
-  template: `
-    <div>
-      <el-button type="warning" @click="openDrawer">大尺寸抽屉（50%）</el-button>
-      ${codeBlock(largeCode)}
-    </div>`
-})
-
-LargeSize.storyName = '大尺寸抽屉'

package/src/SlDrawer/index.js

@@ -1,62 +0,0 @@
-
-import Vue from 'vue'
-
-export function createCommandDrawer(options) {
-  const Constructor = Vue.extend({
-    data() {
-      return {
-        visible: true,
-        ...options
-      }
-    },
-    methods: {
-      handleClose(done) {
-        this.visible = false
-        this.closeDrawer()
-        done()
-      }
-    },
-    render(h) {
-      const componentListeners = this.contentListeners || {}
-      return h(
-        'el-drawer',
-        {
-          props: {
-            title: this.title,
-            size: this.size,
-            direction: this.direction,
-            beforeClose: this.handleClose,
-            visible: this.visible
-
-          },
-          on: {
-            input: (val) => {
-              this.visible = val
-            }
-          }
-        },
-        [
-          h(this.contentComponent, {
-            props: this.contentProps,
-            on: componentListeners
-          })
-        ]
-      )
-    }
-  })
-
-  const instance = new Constructor().$mount()
-
-  document.body.appendChild(instance.$el)
-
-  instance.visible = true
-  window.addEventListener('keydown', (event) => {
-    if (event.code === 'Space' || event.key === ' ') {
-      event.preventDefault()
-    }
-  })
-  instance.$once('close', () => {
-    instance.$destroy()
-    document.body.removeChild(instance.$el)
-  })
-}

package/src/SlForm/SlForm.stories.js

@@ -1,120 +0,0 @@
-import SlForm from './index.vue'
-
-export default {
-  title: 'Components/SlForm',
-  component: SlForm,
-  parameters: {
-    docs: {
-      description: {
-        component: '动态表单组件，通过 data 配置数组驱动渲染。支持 input、select、datePicker、radio、switch、rangeInput、title、slot 等控件类型。支持表单校验、联动、重置等功能。'
-      }
-    }
-  }
-}
-
-const codeBlock = (code) => `
-  <div style="margin-top:24px;border-top:1px solid #eee;padding-top:16px">
-    <p style="font-size:14px;font-weight:600;color:#666;margin-bottom:8px;">使用代码：</p>
-    <pre style="background:#f5f5f5;padding:16px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all"><code>${escapeHtml(code.trim())}</code></pre>
-  </div>`
-
-function escapeHtml(str) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// ---- 搜索表单 ----
-const searchCode = `<!-- 搜索表单（inline 模式） -->
-<sl-form v-model="form" :data="options"
-  :showlabel="false"
-  :form-props="{ inline: true, size: 'small' }" />`
-
-export const SearchForm = () => ({
-  components: { SlForm },
-  data() {
-    return {
-      form: {},
-      options: [
-        { label: '用户名', type: 'input', model: 'userName', privateAttrs: { placeholder: '请输入用户名' } },
-        { label: '状态', type: 'select', model: 'status', options: [
-          { label: '启用', value: 1 }, { label: '禁用', value: 0 }
-        ], props: { placeholder: '请选择状态' } },
-        { label: '创建时间', type: 'datePicker', model: 'createTime', privateProps: { type: 'daterange', valueFormat: 'yyyy-MM-dd' } }
-      ]
-    }
-  },
-  template: `
-    <div>
-      <sl-form ref="form" v-model="form" :data="options" :showlabel="false" :form-props="{ inline: true, size: 'small' }" />
-      <div style="margin-top:12px;color:#666;font-size:13px">表单值：{{ form }}</div>
-      ${codeBlock(searchCode)}
-    </div>`
-})
-
-SearchForm.storyName = '搜索表单（inline）'
-
-// ---- 编辑表单 ----
-const editCode = `<!-- 编辑表单（非 inline） -->
-<sl-form v-model="form" :data="options" item-width="100%"
-  :form-props="{ inline: false, size: 'small', labelWidth: '120px' }" />`
-
-export const EditForm = () => ({
-  components: { SlForm },
-  data() {
-    return {
-      form: { userName: '张三', status: 1 },
-      options: [
-        { label: '用户名', type: 'input', model: 'userName', rules: [
-          { required: true, message: '请输入用户名', trigger: 'blur' }
-        ]},
-        { label: '状态', type: 'radio', model: 'status', options: [
-          { label: '启用', value: 1 }, { label: '禁用', value: 0 }
-        ], rules: [
-          { required: true, message: '请选择状态', trigger: 'change' }
-        ]},
-        { label: '备注', type: 'input', model: 'remark', privateAttrs: { type: 'textarea', rows: 3 }, remark: '选填，最多200字' },
-        { label: '开关', type: 'switch', model: 'enable', value: true }
-      ]
-    }
-  },
-  template: `
-    <div style="max-width:600px">
-      <sl-form ref="form" v-model="form" :data="options" item-width="100%" :form-props="{ inline: false, size: 'small', labelWidth: '120px' }" />
-      <div style="margin-top:12px;color:#666;font-size:13px">表单值：{{ form }}</div>
-      ${codeBlock(editCode)}
-    </div>`
-})
-
-EditForm.storyName = '编辑表单'
-
-// ---- 带标题分组 ----
-const titleCode = `<!-- 使用 title 类型分组 -->
-<sl-form v-model="form" :data="options" item-width="100%"
-  :form-props="{ inline: false, size: 'small', labelWidth: '120px' }">
-  <el-button type="primary" size="small">保存</el-button>
-</sl-form>`
-
-export const WithTitle = () => ({
-  components: { SlForm },
-  data() {
-    return {
-      form: {},
-      options: [
-        { type: 'title', label: '基本信息', model: 'title1' },
-        { label: '姓名', type: 'input', model: 'name' },
-        { label: '年龄', type: 'input', model: 'age' },
-        { type: 'title', label: '联系方式', model: 'title2' },
-        { label: '手机号', type: 'input', model: 'phone' },
-        { label: '邮箱', type: 'input', model: 'email' }
-      ]
-    }
-  },
-  template: `
-    <div style="max-width:600px">
-      <sl-form ref="form" v-model="form" :data="options" item-width="100%" :form-props="{ inline: false, size: 'small', labelWidth: '120px' }">
-        <el-button type="primary" size="small">保存</el-button>
-      </sl-form>
-      ${codeBlock(titleCode)}
-    </div>`
-})
-
-WithTitle.storyName = '带标题分组'