@wp1001/ui 2.9.13

package/packages/styles/vant.scss

@@ -0,0 +1,133 @@
+:root {
+  --van-dialog-max-height: 90vh;
+  --van-dialog-header-padding: 15px 0 10px;
+  --main-button-padding: 10px;
+}
+
+.van-dialog {
+  max-height: var(--var-dialog-max-height);
+  overflow-y: auto;
+  .van-dialog__header {
+    padding: var(--van-dialog-header-padding);
+  }
+  .van-dialog__content {
+    padding: 5px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+
+.mobile-x-table {
+  width: 100%;
+}
+
+.mobile-x-form {
+  width: 100%;
+  &.viewonly {
+    .van-field__control {
+      color: #909999;
+    }
+  }
+  .van-progress {
+    width: 100%;
+  }
+  .el-col {
+    .van-cell {
+      padding: 7px 0;
+    }
+    .van-field__control > * {
+      width: 100%;
+    }
+  }
+}
+
+.comp-html {
+  width: 100%;
+}
+
+.mobile-x-select {
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+}
+
+.mobile-x-paginaiton {
+  padding: var(--x-medium-padding);
+}
+
+.x-district-select {
+  &__placeholder {
+    color: #ccc;
+  }
+  &__value {
+    color: #555;
+  }
+}
+
+.x-picker {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  &__placeholder {
+    color: #ccc;
+  }
+  &__value {
+    color: #555;
+  }
+}
+
+main {
+  .van-button--block {
+    width: calc(100% - var(--main-button-padding) * 2);
+    margin-left: var(--main-button-padding);
+    margin-right: var(--main-button-padding);
+  }
+}
+
+.mobile-x-dialog {
+  .van-action-sheet__content {
+    max-height: 60vh;
+    padding: 0 10px;
+    .van-cell {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  .van-action-sheet__description {
+    padding: 14px 0;
+    color: var(--van-text-color);
+    font-size: 16px;
+  }
+  .van-action-sheet__cancel {
+    padding: 0;
+    .van-button {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      border: none;
+    }
+  }
+  .x-info {
+    .x-info__label {
+      padding-left: 0 !important;
+    }
+    .x-info__value {
+      padding-right: 0 !important;
+    }
+  }
+}
+
+.mobile-x-radios--plain {
+  .van-radio {
+    margin-right: 20px;
+    .van-radio__icon {
+      display: none;
+    }
+  }
+}
+.van-radio[aria-checked="true"] {
+  .van-radio__label {
+    color: var(--van-blue);
+  }
+}

package/packages/styles/variables.scss

@@ -0,0 +1,23 @@
+:root {
+  --x-sidebar-width: 270px;
+  --x-sidebar-collapse-width: 65px;
+  --x-head-height: 56px;
+  --x-header-height: 55px;
+  --x-tagsview-height: 38px;
+  --x-header-bg-color: #ffffff;
+  --x-sidebar-bg-color: #304156;
+  --x-sidebar-current-bg-color: #1a283a;
+  --x-sidebar-hover-bg-color: #17345a;
+  --x-sidebar-text-color: #a0aaaa;
+  --x-sidebar-current-text-color: #409eff;
+  --x-bg-color: #f5f7fa;
+
+  --x-font-size: 13px;
+  --x-text-color: #606666;
+  --x-label-color: #909999;
+  --x-small-padding: 5px;
+  --x-medium-padding: 10px;
+  --x-large-padding: 20px;
+  --x-default-border-color: #ddd;
+  --x-default-border: 1px dashed var(--x-default-border-color);
+}

package/packages/utils/crypt.js

@@ -0,0 +1,24 @@
+const simple = {
+  encrypt (text) {
+    text = encodeURIComponent(text)
+    text = btoa(text)
+    text = text.split('')
+    text = text.map(c => String.fromCharCode(c.charCodeAt(0) + 6))
+    text.reverse()
+    text = text.join('')
+    return text
+  },
+  decrypt (text) {
+    text = text.split('')
+    text.reverse()
+    text = text.map(c => String.fromCharCode(c.charCodeAt(0) - 6))
+    text = text.join('')
+    text = atob(text)
+    text = decodeURIComponent(text)
+    return text
+  }
+}
+
+export { simple }
+
+export default { simple }

package/packages/utils/decorators.js

@@ -0,0 +1,67 @@
+const { highdict } = StardustJs
+
+const _checkOk = (self, key) => {
+  let ok = key
+  if (typeof key === 'string') {
+    ok = highdict.get(self, key)
+  } else if (typeof key === 'function') {
+    ok = key(self)
+  }
+  return !!ok
+}
+
+export const when = (key) => {
+  return (value, { name, addInitializer, ...others }) => {
+    addInitializer(function () {
+      const self = this
+      const func = self[name]
+      self[name] = function (...props) {
+        if (!_checkOk(self, key)) return
+        return func.apply(self, props)
+      }
+    })
+  }
+}
+
+export const not = (key) => {
+  return (value, { name, addInitializer, ...others }) => {
+    addInitializer(function () {
+      const self = this
+      const func = self[name]
+      self[name] = function (...props) {
+        if (_checkOk(self, key)) return
+        return func.apply(self, props)
+      }
+    })
+  }
+}
+
+export const loading = (key) => {
+  return (value, { name, addInitializer, ...others }) => {
+    addInitializer(function () {
+      const self = this
+      const func = self[name]
+      key ??= self.table && 'table.loading' || self.model && 'model.loading' || self.dialog && 'dialog.loading' || 'loading'
+      self[name] = function (...props) {
+        if (!key) throw 'invalid params for @loading'
+        if (highdict.get(self, key)) return
+        highdict.set(self, key, true)
+        const result = func.apply(self, props)
+        if (result instanceof Promise) {
+          return result.then((...res) => {
+            highdict.set(self, key, false)
+            return res
+          })
+        }
+        highdict.set(self, key, false)
+        return result
+      }
+    })
+  }
+}
+
+export default {
+  when,
+  not,
+  loading
+}

package/packages/utils/disallowDevtools.js

@@ -0,0 +1,53 @@
+import devtoolsDetector from '../assets/devtools-detector.js'
+
+const { addListener, launch } = devtoolsDetector
+
+const disallowDevtools = (env = {}, whiteList) => {
+  const onDevtools = isOpen => {
+    if (isOpen) {
+      // sessionStorage.clear()
+      // localStorage.clear()
+      // document.documentElement.innerHTML = '为了网站的安全，禁止调试'
+      document.documentElement.innerHTML = decodeURIComponent(atob('JUU0JUI4JUJBJUU0JUJBJTg2JUU3JUJEJTkxJUU3JUFCJTk5JUU3JTlBJTg0JUU1JUFFJTg5JUU1JTg1JUE4JUVGJUJDJThDJUU3JUE2JTgxJUU2JUFEJUEyJUU4JUIwJTgzJUU4JUFGJTk1'))
+      window.location.href = decodeURIComponent(atob('YWJvdXQlM0FibGFuaw=='))
+    }
+  }
+  addListener(onDevtools)
+  if (
+    !window.eval.name
+    || !console.clear.name
+    || !RegExp.toString.toString().includes('toString')
+    || !history.pushState.toString.toString().includes('toString')
+  ) {
+    onDevtools(true)
+  }
+  if (
+    !(
+      whiteList || JSON.parse(
+        env.PROD
+        ? env.VITE_PROD_DEBUGGERABLE_DOMAINS
+        : env.VITE_DEV_DEBUGGERABLE_DOMAINS
+      )
+    ).includes(window.location.hostname)
+  ) {
+    launch()
+    window.addEventListener('contextmenu', (e) => {
+      if (
+        !(e.target instanceof SVGElement)
+        && !['IMG', 'CANVAS', 'AUDIO', 'VIDEO', 'PICTURE', 'INPUT', 'TEXTAREA'].includes(e.target.nodeName)
+      ) {
+        e.preventDefault()
+      }
+    }, true)
+    window.addEventListener('keydown', (e) => {
+      if (
+        e.code === 'F12'
+        || (e.metaKey || e.ctrlKey) && (e.altKey || e.shiftKey) && ['KeyU', 'KeyI', 'KeyJ', 'KeyC'].indexOf(e.code) >= 0
+      ) {
+        e.preventDefault()
+      }
+    }, true)
+  }
+}
+
+export default disallowDevtools

package/packages/utils/effects.js

@@ -0,0 +1,173 @@
+
+export const pop = (canvas) => {
+  const { width, height } = canvas.getBoundingClientRect()
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d')
+
+  class Circle {
+    constructor (x, y, radius, color, vx, vy, ctx) {
+      this.x = x
+      this.y = y
+      this.radius = radius
+      this.color = color
+      this.vx = vx
+      this.vy = vy
+      this.ctx = ctx
+    }
+
+    update () {
+      this.x += this.vx
+      this.y += this.vy
+      this.ctx.beginPath()
+      this.ctx.fillStyle = this.color
+      this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
+      this.ctx.fill()
+      this.detectWall()
+    }
+
+    detectWall () {
+      if (this.x < this.radius) {
+        this.x = this.radius
+        this.vx = -this.vx
+      } else if (this.x + this.radius > width) {
+        this.x = width - this.radius
+        this.vx = -this.vx
+      }
+      if (this.y < this.radius) {
+        this.y = this.radius
+        this.vy = -this.vy
+      } else if (this.y + this.radius > height) {
+        this.y = height - this.radius
+        this.vy = -this.vy
+      }
+    }
+  }
+
+  const clear = () => ctx.clearRect(0, 0, width, height)
+  const randint = max => Math.floor(Math.random() * max)
+
+  let stop = 0
+  let stopStep = 0.01
+  let sleep = 0
+  const drawBackground = () => {
+    const gradient = ctx.createLinearGradient(0, 0, width * 1.5, height * 1.5)
+    if (!sleep) {
+      stop += stopStep
+      if (stop <= 0) {
+        stop = 0
+        stopStep = -stopStep
+        sleep = fps * 30
+      }
+      if (stop >= 1) {
+        stop = 1
+        stopStep = -stopStep
+        sleep = fps * 30
+      }
+    } else {
+      sleep --
+    }
+    gradient.addColorStop(0, 'rgba(250, 220, 20, 0.5)')
+    gradient.addColorStop(stop, 'rgba(20, 20, 20, 0.5)')
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, width, height)
+  }
+  const vw = Math.floor(width / 100)
+  const vh = Math.floor(height / 100)
+
+  const fps = 20
+  const frameGap = Math.round(1000 / fps)
+
+  const circles = Array.from({ length: 52 }).map(() => {
+    const radius = Math.floor(randint(vw + vh) * 1.5 + randint(5))
+    let x = randint(width)
+    let y = randint(height)
+    x = Math.min(Math.max(radius, x), width - radius)
+    y = Math.min(Math.max(radius, y), height - radius)
+    let vx = randint(2) ? (randint(2) + 2) * vw : (randint(-1) - 2) * vw
+    let vy = randint(2) ? (randint(2) + 2) * vh : (randint(-1) - 2) * vh
+    vx = Math.floor(vx / fps)
+    vy = Math.floor(vy / fps)
+    return new Circle(
+      x,
+      y,
+      radius,
+      `rgba(${randint(256)}, ${randint(256)}, ${randint(256)}, ${(randint(5) + 5) / 10})`,
+      vx,
+      vy,
+      ctx
+    )
+  })
+
+  let lastX, lastY
+  canvas.addEventListener('mouseover', e => {
+    lastX = e.pageX
+    lastY = e.pageY
+  })
+  canvas.addEventListener('mousemove', e => {
+    if (lastX === undefined) {
+      lastX = e.pageX
+      lastY = e.pageY
+      return
+    }
+    const diffX = e.pageX - lastX
+    const diffY = e.pageY - lastY
+    circles.forEach(c => {
+      c.x += diffX / fps
+      c.y += diffY / fps
+    })
+    lastX = e.pageX
+    lastY = e.pageY
+  })
+
+  let lastTime = Date.now()
+  let anim = null
+
+  const update = () => {
+    if (Date.now() - lastTime >= frameGap) {
+      clear()
+      drawBackground()
+      circles.forEach(circle => circle.update())
+      lastTime = Date.now()
+    }
+    anim = requestAnimationFrame(update)
+  }
+
+  anim = requestAnimationFrame(update)
+
+  return () => cancelAnimationFrame(anim)
+}
+
+export const createWatermark = ({
+  text,
+  gap,
+  fontSize,
+  color,
+  width = window.innerWidth,
+  height = window.innerHeight,
+  drawMode = 'fill'
+}) => {
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+
+  const ctx = canvas.getContext('2d')
+  ctx.font = `${fontSize}px Arial`
+  ctx[drawMode + 'Style'] = color
+
+  const textWidth = ctx.measureText(text).width
+  const perWidth = textWidth + gap
+  const perHeight = fontSize + gap
+  for (let y = gap / 2; y < height; y += perHeight) {
+    for (let x = gap / 2; x < width; x += perWidth) {
+      ctx[drawMode + 'Text'](text, x, y)
+    }
+  }
+
+  return canvas
+}
+
+export default {
+  pop,
+  createWatermark
+}

package/packages/utils/funcs.js

@@ -0,0 +1,78 @@
+import { toRaw, markRaw } from 'vue'
+
+export const validateForm = async (model) => {
+  const ok = await model.formRef?.validate().then(() => true).catch(() => false)
+  const oks = await Promise.all(model.formItems?.filter(it => {
+    return it.comp?.endsWith('XForm') || it.comp?.endsWith('x-form')
+  }).map(it => validateForm(it.form)))
+  return ok && oks.every(ok => ok)
+}
+
+export const formatPrecision = (number, precision) => {
+  if (typeof number !== 'number') {
+    const parsed = parseFloat(number) || null
+    if (typeof parsed !== 'number') {
+      return number
+    }
+    number = parsed
+  }
+  return number.toFixed(precision) * 1
+}
+
+export const formatOptions = (options, vm) => {
+  const opts = options.__v_isRef ? options.value : toRaw(options)
+  const { text = 'text', value = 'value' } = vm
+  const items = opts.map(op => {
+    if (typeof op === 'object') {
+      return { text: op[text], value: op[value], disabled: op.disabled, raw: markRaw(op) }
+    } else {
+      return { text: op, value: op }
+    }
+  })
+  if (!vm.sort) return items
+  const field = typeof vm.sort === 'string' ? vm.sort : (vm.text || 'text')
+  return items.sort((a, b) => {
+    return a[field].localeCompare(b[field])
+  })
+}
+
+export const injectVanFieldProvide = (vm) => {
+  const provides = vm._.provides
+  const keys = Object.getOwnPropertySymbols(provides)
+  if (!keys.length) return
+  vm.provide = provides[keys[0]]
+  if (!vm.provide?.customValue) {
+    return vm.provide = null
+  }
+  vm.provide.customValue.value = () => vm.modelValue
+}
+
+export const getUrlType = url => {
+  const extname = url?.split('.').pop().toLowerCase()
+  if (['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(extname)) return 'image'
+  else if (['mp4', 'webm', 'ogg', '3gpp', 'avi', 'mov'].includes(extname)) return 'video'
+  else if (extname === 'pdf') return 'pdf'
+  else if (extname === 'doc' || extname === 'docx') return 'docx'
+  else if (extname === 'xls' || extname === 'xlsx') return 'xlsx'
+  else if (extname === 'ppt' || extname === 'pptx') return 'pptx'
+  else if (['zip', 'rar', '7z', 'tar', 'gzip'].includes(extname)) return 'zip'
+  return 'others'
+}
+
+export const getFiletypeIcon = type => {
+  if (type === 'pdf') return 'iwwa:file-pdf'
+  if (type === 'docx') return 'file-icons:microsoft-word'
+  if (type === 'xlsx') return 'file-icons:microsoft-excel'
+  if (type === 'pptx') return 'file-icons:microsoft-powerpoint'
+  if (type === 'zip') return 'formkit:zip'
+  return 'bi:file-pdf-fill'
+}
+
+export default {
+  validateForm,
+  formatPrecision,
+  formatOptions,
+  injectVanFieldProvide,
+  getUrlType,
+  getFiletypeIcon
+}

package/packages/utils/index.js

@@ -0,0 +1,95 @@
+import crypt from './crypt.js'
+import decorators from './decorators.js'
+import effects from './effects.js'
+
+import {
+  validateForm,
+  formatPrecision,
+  formatOptions,
+  getUrlType,
+  getFiletypeIcon
+} from './funcs.js'
+
+import {
+  Message,
+  Notify,
+  Confirm,
+  Prompt
+} from './message.js'
+
+import middlewares from './middlewares.js'
+
+import {
+  baseForm,
+  baseTable,
+  baseDialog,
+  baseModel
+} from './model.js'
+
+import {
+  initFields,
+  initModel,
+  initTable,
+  initDialog,
+  initForm,
+  initFormRules,
+  initDefaultForm,
+  isWhenMatched,
+  triggers
+} from './modelUtils.js'
+
+export {
+  crypt,
+  effects,
+  validateForm,
+  formatPrecision,
+  formatOptions,
+  getUrlType,
+  getFiletypeIcon,
+  Message,
+  Notify,
+  Confirm,
+  Prompt,
+  baseForm,
+  baseTable,
+  baseDialog,
+  baseModel,
+  initFields,
+  initModel,
+  initTable,
+  initDialog,
+  initForm,
+  initFormRules,
+  initDefaultForm,
+  isWhenMatched,
+  triggers
+}
+
+export default {
+  crypt,
+  decorators,
+  effects,
+  validateForm,
+  formatPrecision,
+  formatOptions,
+  getUrlType,
+  getFiletypeIcon,
+  Message,
+  Notify,
+  Confirm,
+  Prompt,
+  middlewares,
+  baseForm,
+  baseTable,
+  baseDialog,
+  baseModel,
+  initFields,
+  initModel,
+  initTable,
+  initDialog,
+  initForm,
+  initFormRules,
+  initDefaultForm,
+  isWhenMatched,
+  triggers
+}