@wp1001/ui 2.9.13

package/packages/utils/message.js

@@ -0,0 +1,110 @@
+let { ElMessage, ElNotification, ElMessageBox } = window.ElementPlus || {}
+let { showToast, showNotify, showConfirmDialog } = window.vant || {}
+
+export const initMessageUtils = ({ ElementPlus, Vant }) => {
+  if (ElementPlus) {
+    ElMessage = ElementPlus.ElMessage
+    ElNotification = ElementPlus.ElNotification
+    ElMessageBox = ElementPlus.ElMessageBox
+  }
+  if (Vant) {
+    showToast = Vant.showToast
+    showNotify = Vant.showNotify
+    showConfirmDialog = Vant.showConfirmDialog
+  }
+}
+
+export const Message = options => {
+  let opts = typeof options !== 'string' ? options : { message: options }
+  opts = {
+    type: 'error',
+    duration: 3000,
+    ...opts
+  }
+  const { isMobile = window.isMobile, type } = opts
+  if (isMobile) {
+    if (type === 'error' || type === 'warning') opts.type = 'fail'
+    opts['z-index'] ||= 1e6
+    showToast(opts)
+  } else {
+    ElMessage({
+      showClose: true,
+      grouping: true,
+      ...opts
+    })
+  }
+}
+
+export const Notify = options => {
+  let opts = typeof options !== 'string' ? options : { message: options }
+  opts = {
+    type: 'error',
+    duration: 3000,
+    ...opts
+  }
+  const { isMobile = window.isMobile, type } = opts
+  if (isMobile) {
+    if (type === 'error') opts.type = 'danger'
+    showNotify(opts)
+  } else {
+    ElNotification({
+      showClose: true,
+      ...opts
+    })
+  }
+}
+
+export const Confirm = options => {
+  let promise = null
+  const { isMobile = window.isMobile } = options
+  if (isMobile) {
+    promise = showConfirmDialog(options)
+  } else {
+    promise = ElMessageBox.confirm(
+      options.message || '',
+      options.title || '',
+      {
+        draggable: true,
+        ...options,
+        type: options.type || 'info',
+        confirmButtonText: options.confirmButtonText || '确定',
+        cancelButtonText: options.cancelButtonText || '取消',
+      }
+    )
+  }
+  return promise.then(() => {
+    return options.distinguishCancelAndClose ? 'confirm' : true
+  }).catch(action => {
+    return options.distinguishCancelAndClose ? action : false
+  })
+}
+
+export const Prompt = options => {
+  return ElMessageBox.prompt(options.message, options.title, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /[^\s]+/,
+    inputErrorMessage: '请输入',
+    ...options
+  }).then(({ value }) => value).catch(() => '')
+}
+
+for (let type of ['success', 'warning', 'info', 'error', 'primary', 'loading', 'fail', 'html']) {
+  Message[type] = Message[type[0]] = options => {
+    const opts = typeof options !== 'string' ? options : { message: options }
+    return Message({ type, ...opts })
+  }
+  Notify[type] = Notify[type[0]] = options => {
+    const opts = typeof options !== 'string' ? options : { message: options }
+    return Notify({ type, ...opts })
+  }
+  Confirm[type] = Confirm[type[0]] = options => Confirm({ type, ...options })
+}
+
+export default {
+  initMessageUtils,
+  Message,
+  Notify,
+  Confirm,
+  Prompt
+}

package/packages/utils/middlewares.js

@@ -0,0 +1,86 @@
+import { watch, nextTick } from 'vue'
+import { Message } from './message.js'
+
+const { funcs } = StardustJs
+
+export const check404 = (router, store, routes) => {
+  router.beforeEach(async (to, from) => {
+    return !!to.matched.length || '/404'
+  })
+}
+
+export const setTitle = (router, store, routes) => {
+  router.afterEach((to, from) => {
+    document.title = to.matched[to.matched.length - 1].meta?.title || store.app.sitename
+  })
+}
+
+export const checkRolesPages = (router, store, routes) => {
+  router.beforeEach(async (to, from) => {
+    const path = to.matched[to.matched.length - 1].path.split('/:')[0]
+    if (to.meta.acl === false || to.meta?.visitable) return true
+    while (store.getters.logging) {
+      await funcs.sleep(20)
+    }
+    await nextTick()
+    if (store.acl.paths.includes(path)) return true
+    const query = { redirectTo: to.path, ...to.query }
+    if (store.getters.logined) {
+      query.error = '受限于您的账号权限，暂时无法访问 ' + to.path + ' 页面，如有需要请联系我们'
+      Message({ message: query.error, duration: 1e4 })
+    }
+    return { path: store.acl.paths[0] || '/404', query }
+  })
+  nextTick(() => {
+    let inited = false
+    watch(() => store.acl.menus, menus => {
+      if (!inited) {
+        if (!menus.length) return
+        inited = true
+      }
+      const paths = store.acl.paths
+      const update = (route, parents) => {
+        let path
+        if (route.redirect && !route.component) {
+          path = route.redirect
+        } else {
+          path = [...parents, route].reduce((path, p) => path + '/' + p.path, '').replace('//', '/')
+        }
+        route.meta ||= {}
+        if (route.meta.acl === false) {
+          route.children?.forEach(sub => {
+            sub.meta ||= {}
+            sub.meta.acl ||= false
+            update(sub, [...parents, route])
+          })
+        } else {
+          route.meta._hidden = route.meta.hidden
+          if (parent) {
+            if (route.meta.hidden == null) {
+              route.meta.hidden ??= parent.meta?.hidden
+              route.meta = { ...route.meta }
+            }
+            if (route.meta.visitable == null) {
+              route.meta.visitable ??= parent.meta?.visitable
+              route.meta = { ...route.meta }
+            }
+          }
+          route.children?.forEach(sub => update(sub, [...parents, route]))
+          if (route.meta.hidden !== false && route.meta._hidden !== true) {
+            route.meta.hidden = !paths.includes(path)
+            if (route.children?.some(sub => sub.meta.hidden === false)) {
+              route.meta.hidden = false
+            }
+          }
+        }
+      }
+      routes.forEach(route => update(route, []))
+    }, { immediate: true })
+  })
+}
+
+export default {
+  check404,
+  setTitle,
+  checkRolesPages
+}

package/packages/utils/model.js

@@ -0,0 +1,71 @@
+
+export const baseForm = () => ({
+  loading: false,
+  form: {},
+  initialForm: {},
+  formItems: [],
+  formRef: null,
+  formRules: {},
+  initialFormRules: {},
+  _isBaseForm: true,
+  viewonly: false
+})
+
+export const baseTable = (query = {}) => ({
+  loading: false,
+  query: {
+    page: 1,
+    limit: 10,
+    order: [],
+    ...query
+  },
+  total: 0,
+  moreLoading: false,
+  finished: false,
+  isInfinite: false,
+  list: [],
+  columns: [],
+  tableRef: null,
+  selection: [],
+  checked: null,
+  searchFields: [],
+  _isBaseTable: true
+})
+
+export const baseDialog = () => ({
+  ...baseForm(),
+  visible: false,
+  isEditing: false,
+  editingIndex: '',
+  editingRow: {},
+  _isBaseDialog: true
+})
+
+export const baseModel = ({
+  table = {},
+  dialog = {},
+  columns = [
+    { fixed: 'left', type: 'selection' },
+    { type: '_index' }
+  ],
+  query = {},
+  form = {}
+} = {}) => ({
+  table: {
+    ...baseTable(query),
+    ...table,
+    columns
+  },
+  dialog: {
+    ...baseDialog(),
+    ...dialog,
+    form
+  }
+})
+
+export default {
+  baseForm,
+  baseTable,
+  baseDialog,
+  baseModel
+}

package/packages/utils/modelUtils.js

@@ -0,0 +1,203 @@
+import { watch } from 'vue'
+
+const { funcs } = StardustJs
+
+export const initFields = fields => {
+  return fields.map(f => {
+    const keys = Object.keys(f)
+    for (let key of keys) {
+      if (key.startsWith('ta_')) {
+        f.tableAttrs ??= {}
+        f.tableAttrs[key.slice(3)] = f[key]
+        delete f[key]
+      } else if (key.startsWith('fa_')) {
+        f.formAttrs ??= {}
+        f.formAttrs[key.slice(3)] = f[key]
+        delete f[key]
+      }
+    }
+    if (f.type === 'date') {
+      f.formAttrs ??= {}
+      f.formAttrs['value-format'] ??= 'YYYY-MM-DD'
+    } else if (f.type === 'datetime') {
+      f.formAttrs ??= {}
+      f.formAttrs['value-format'] ??= 'YYYY-MM-DD HH:mm:ss'
+    }
+    f.xs ??= 24
+    return f
+  })
+}
+
+export const initModel = (model, fields) => {
+  for (let key in model) {
+    const value = model[key]
+    if (!value || typeof value !== 'object') {
+      continue
+    }
+    if (key === 'table' && model[key]._isBaseTable) {
+      initTable(value, fields)
+    }
+    if (key === 'dialog' && model[key]._isBaseDialog) {
+      initDialog(value, fields)
+    }
+    if (key === 'form' && model[key]._isBaseForm) {
+      initForm(value, fields)
+    }
+  }
+  return model
+}
+
+export const initTable = (table, fields) => {
+  table.columns.push(...fields.filter(field => {
+    return field.visible === false ? field.canView : field.canView !== false
+  }))
+  return table
+}
+
+export const initDialog = (dialog, fields) => {
+  dialog.formItems = fields.filter(field => {
+    if (field.visible === false) {
+      return field.canAdd || field.canEdit
+    }
+    return (field.canAdd !== false) || (field.canEdit !== false)
+  })
+  initForm(dialog, fields)
+  return dialog
+}
+
+export const initForm = (form, fields) => {
+  if (form._isBaseForm && !form._isBaseDialog) {
+    form.formItems = fields.filter(field => field.visible !== false)
+  }
+  initDefaultForm(form.form, form.formItems)
+  form.initialForm = funcs.deepCopy(form.form)
+  form.initialFormRules = funcs.deepCopy(form.formRules)
+
+  const init = () => {
+    initFormRules(form)
+  }
+  watch(() => form.formItems, init, { immediate: true, deep: true })
+  return form
+}
+
+export const initFormRules = (container) => {
+  const { formItems, initialFormRules } = container
+  Object.assign(container.formRules, funcs.deepCopy(initialFormRules))
+  Object.keys(container.formRules).forEach(key => {
+    if (!initialFormRules.hasOwnProperty(key)) {
+      delete container.formRules[key]
+    }
+  })
+  const rules = {}
+  formItems.forEach(item => {
+    if (container.formRules[item.prop]) return
+    if (!item.required && !item.validator && !item.asyncValidator) return
+    const platform = item.platform || container.platform || (window.isMobile ? 'mobile' : 'pc')
+    const trigger = triggers[platform]
+    const itemRules = []
+    const isSelects = 'options' in item
+    const message = `请${item.validator || item.asyncValidator ? '正确' : ''}${isSelects ? '选择' : '输入'}${item?.label || item.prop}`
+    const baseRule = { required: true, message }
+    if (item.validator) baseRule.validator = (param1, param2) => {
+      return platform === 'pc' ? item.validator(param1, param2) : item.validator(param2, param1)
+    }
+    if (item.asyncValidator) baseRule.asyncValidator = (param1, param2) => {
+      return platform === 'pc' ? item.asyncValidator(param1, param2) : item.asyncValidator(param2, param1)
+    }
+    if (!item.comp) {
+      itemRules.push({ ...baseRule, trigger: trigger.blur })
+    } else {
+      itemRules.push({ ...baseRule, trigger: trigger.change })
+    }
+    if (item.comp === 'ElInputNumber') {
+      itemRules.push({ ...baseRule, trigger: trigger.blur })
+    }
+    rules[item.prop] = itemRules
+  })
+  Object.assign(container.formRules, rules)
+  return container.formRules
+}
+
+export const initDefaultForm = (form, formItems, number0 = true) => {
+  const defaultForm = {}
+  formItems.forEach(item => {
+    if (!item.prop || item.virtual) return
+    let value = ''
+    const { type, options } = item
+    const { multiple } = item.formAttrs || {}
+    if (number0 && type === 'number' || item.comp === 'ElInputNumber') {
+      value = null
+    } else if (item.comp === 'ElSwitch') {
+      value = false
+    } else if (options && (item.comp?.endsWith('XCheckboxs') || item.comp?.endsWith('x-checkboxs') || multiple)) {
+      value = []
+    } else if (item.comp === 'ElDatePicker' && ['datetimerange', 'daterange', 'monthrange'].includes(item.type)) {
+      const placeholer = ({
+        datetimerange: '时间',
+        daterange: '日期',
+        monthrange: '月份'
+      })[item.type]
+      if (!item['start-placeholder']) {
+        item['start-placeholder'] = '开始' + placeholer
+      }
+      if (!item['end-placeholder']) {
+        item['end-placeholder'] = '结束' + placeholer
+      }
+      value = []
+    }
+    defaultForm[item.prop] = value
+  })
+  Object.assign(form, { ...defaultForm, ...form })
+  return form
+}
+
+export const isWhenMatched = (when, form) => {
+  if (!when) return true
+  const parts = when.split(/\s?(&&|\|\|)\s?/g)
+  if (parts.includes('&&') && parts.includes('||')) {
+    throw '一个 when 表达式中仅支持 && 模式或 || 模式'
+  }
+  const isEvery = parts.includes('&&')
+  const reg = /[\^\*\$\~\!]?=/
+  const groups = parts.filter(p => p !== '&&' && p !== '||')
+  return groups[isEvery ? 'every' : 'some'](group => {
+    let [field, values] = group.split(reg)
+    values = values.split('|')
+    let v = form[field]
+    if (typeof v === 'number') v += ''
+    else if (typeof v === 'string') v = v.trim()
+    const type = group.match(reg)[0]
+    if (type === '!=') return !values.includes(v)
+    return values.some(ele => {
+      if (type === '^=') return v?.startsWith(ele)
+      else if (type === '*=') return v?.includes(ele)
+      else if (type === '$=') return v?.endsWith(ele)
+      else if (type === '~=') return !v?.includes(ele)
+      else if (type === '!=') return v !== ele
+      return ele === v
+    })
+  })
+}
+
+export const triggers = {
+  mobile: {
+    blur: 'onBlur',
+    change: 'onChange'
+  },
+  pc: {
+    blur: 'blur',
+    change: 'change'
+  }
+}
+
+export default {
+  initFields,
+  initModel,
+  initTable,
+  initDialog,
+  initForm,
+  initFormRules,
+  initDefaultForm,
+  isWhenMatched,
+  triggers
+}

package/packages/utils/request.js

@@ -0,0 +1,57 @@
+import { Message } from './message.js'
+
+const requestUse = (app, crypt, store, router, config) => {
+  config.headers.Authorization ||= store.user.token
+  const type = app.config.globalProperties.httpEncrypt
+  if (type !== false) {
+    config.headers['Http-Encrypt'] = type
+    config.headers['Content-Type'] ||= 'application/json; charset=UTF-8'
+    if (config.url.indexOf('?') >= 0) {
+      const [path, ...others] = config.url.split('?')
+      const encrypted = crypt.encrypt[type](others.join('?'), 'query')
+      config.url = path + '?' + encrypted
+    } else {
+      config.params ||= { __placeholder__: Date.now().toString(16) }
+    }
+    if (config.params) {
+      const query = decodeURIComponent(new URLSearchParams(config.params).toString())
+      config.url += '?' + crypt.encrypt[type](query, 'query')
+      delete config.params
+    }
+    if (config.data !== undefined && !(config.data instanceof FormData)) {
+      const encrypted = crypt.encrypt[type](JSON.stringify(config.data), 'body')
+      config.data = encrypted
+    }
+  }
+  return config
+}
+
+const responseUse = (app, crypt, store, router, res) => {
+  if ([401, 402, 10001].includes(res.data.code)) {
+    store.user.setExpired()
+    const currentPath = '/' + location.hash.slice(2).split('?')[0]
+    const query = StardustJs.funcs.decodeQuery(location.href.split('?')[1] || '')
+    router.replace(query.redirectTo ? `/login?redirectTo=${query.redirectTo || currentPath}` : '/login')
+    return Promise.reject(res)
+  } else if ([10002].includes(res.data.code)) {
+    Message.e(res.data.err)
+    return Promise.reject(res)
+  }
+  const token = res.headers['refresh-token'] || res.data.token
+  if (token) {
+    store.user.setToken(token)
+  }
+  if (res.data.err) {
+    Message.e(res.data.err || '未知错误')
+    return Promise.reject(res)
+  }
+  if (res.headers['content-type']?.includes('application/json')) {
+    res.data = JSON.parse(StardustJs.dates.convertIsoDates(JSON.stringify(res.data)))
+  }
+  return Promise.resolve(res.data)
+}
+
+export {
+  requestUse,
+  responseUse
+}

package/packages/utils/site.js

@@ -0,0 +1,33 @@
+
+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 {
+  createWatermark
+}

package/packages/vite-plugins.js

@@ -0,0 +1,141 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const filterPrivateFields = `
+  const filterPrivateFields = source => {
+    const target = {}
+    for (let key in source) {
+      if (key[0] !== "$" && key[0] !== "_") {
+        target[key] = source[key]
+      }
+    }
+    return target
+  }
+  const wrapCtx = (_ctx, model, controller) => {
+    return new Proxy(_ctx, {
+      get (obj, prop) {
+        if (prop in obj) return obj[prop]
+        return model?.[prop] ?? controller?.[prop]
+      }
+    })
+  }
+`
+
+const inject = (src, id) => {
+  const dirname = path.dirname(id)
+  const basename = path.basename(id)
+  const name = basename.split('.')[0]
+  const hasScopedScss = fs.existsSync(path.join(dirname, name + '-scoped.scss'))
+  const hasScss = fs.existsSync(path.join(dirname, name + '.scss'))
+  const hasModel = fs.existsSync(path.join(dirname, 'model.js'))
+  const hasController = fs.existsSync(path.join(dirname, 'controller.js'))
+  const needModel = hasModel && !src.includes('no model') && !src.includes('const model')
+  const needController = hasController && !src.includes('no controller') && !src.includes('const controller')
+
+  if (id.includes('/src/') && basename.includes('.vue') && src.startsWith('<script setup>')) {
+    src = src.replace('<script setup>', '<script setup>\n')
+    const lines = src.split('\n')
+    if (hasScopedScss) {
+      lines.push(...['<style lang="scss" scoped>', `@use "./${name}-scoped.scss";`, '</style>'])
+    }
+    if (hasScss) {
+      lines.push(...['<style lang="scss">', `@use "./${name}.scss";`, '</style>'])
+    }
+    if (needController) {
+      lines.splice(1, 0, `import makeController from './controller.js'`, `const controller = makeController({ ${needModel ? 'model, ' : ''}vue })`)
+    }
+    if (needModel) {
+      lines.splice(1, 0, `import makeModel from './model.js'`, `const model = makeModel()`)
+    }
+    src = lines.join('\n')
+  }
+  return src
+}
+
+const instantiateTables = (src, id) => {
+  const basename = path.basename(id)
+  const isVue = basename.includes('.vue')
+  const isJs = basename.includes('.js')
+  if (id.includes('/src/') && (isVue || isJs)) {
+    const code = src.split('\n').map(l => l.trim()).filter(l => !l.startsWith('//')).join('\n')
+    const names = new Set([...code.matchAll(/[^a-z][A-Z]\w+\.(search|add|update|remove|func|batch|get)/g)].map(e => e[0].slice(1).split('.')[0]))
+    if (names.size) {
+      let top = ''
+      names.forEach(name => {
+        let [dbname, tablename] = name.split('_').map(n => n.replace(/[A-Z]/g, c => '_' + c.toLowerCase()).slice(1))
+        if (tablename) {
+          dbname = `'${dbname}'`
+        } else {
+          tablename = dbname
+          dbname = 'DbName'
+        }
+        top += `const ${name} = new Table(${dbname}, '${tablename}')\n`
+      })
+      if (isVue) {
+        src = src.replace('<script setup>', '<script setup>\n' + top).replace('<script>', '<script>\n' + top)
+      } else {
+        src = top + src
+      }
+    }
+  }
+  return src
+}
+
+const deconstruct = (src, id) => {
+  const basename = path.basename(id)
+  const isVue = basename.includes('.vue')
+  if (id.includes('/src/') && isVue) {
+    const devText = 'return __returned__'
+    const buildText = 'return (_ctx, _cache) => {'
+    const isDev = src.includes(devText)
+    const isBuild = src.includes(buildText)
+    const needModel = (isDev || isBuild) && src.includes('import makeModel ')
+    const needController = (isDev || isBuild) && src.includes('import makeController ')
+    if (needModel || needController) {
+      let replacement = filterPrivateFields
+      if (isDev) {
+        if (needModel && needController) {
+          replacement += 'return { ...__returned__, ...filterPrivateFields(model), ...filterPrivateFields(controller) }'
+        } else if (needModel) {
+          replacement += 'return { ...__returned__, ...filterPrivateFields(model) }'
+        } else if (needController) {
+          replacement += 'return { ...__returned__, ...filterPrivateFields(controller) }'
+        }
+      } else {
+        replacement += buildText + '\n'
+        if (needModel && needController) {
+          replacement += '_ctx = wrapCtx(_ctx, filterPrivateFields(model), filterPrivateFields(controller))'
+        } else if (needModel) {
+          replacement += '_ctx = wrapCtx(_ctx, filterPrivateFields(model))'
+        } else if (needController) {
+          replacement += '_ctx = wrapCtx(_ctx, null, filterPrivateFields(controller))'
+        }
+        replacement += '\n'
+      }
+      src = src.replace(isDev ? devText : buildText, replacement)
+    }
+  }
+  return src
+}
+
+export const autoInject = (config = {}) => {
+  return {
+    name: 'auto-inject',
+    transform (src, id) {
+      src = inject(src, id)
+      if (config.instantiateTables !== false) {
+        src = instantiateTables(src, id)
+      }
+      return { code: src }
+    }
+  }
+}
+
+export const autoDeconstruct = () => {
+  return {
+    name: 'auto-deconstruct',
+    transform (src, id) {
+      return { code: deconstruct(src, id) }
+    }
+  }
+}