@wp1001/ui 2.9.13

package/packages/plop/templates/admin_page/controller.js

@@ -0,0 +1,3 @@
+export default config => new (class extends CrudController {
+
+})({ ...config, dbModelName: '{{ database }}.{{ tableName }}', idField: '{{> idFieldPartial }}' })

package/packages/plop/templates/admin_page/model.js

@@ -0,0 +1,24 @@
+export const $fields = (model, table, dialog) => initFields([
+  {{> fieldsPartial }}
+].map(ele => {
+  const { required = true } = ele
+  return Object.assign(ele, { required })
+}))
+
+export const baseModelQuery = () => ({
+
+})
+
+export const baseModelTable = () => ({
+  uid: '{{ database }}.{{ tableName }}'
+})
+
+export default () => {
+  const model = reactive({
+    ...baseModel({
+      query: baseModelQuery(),
+      table: baseModelTable()
+    })
+  })
+  return initModel(model, $fields(model, model.table, model.dialog))
+}

package/packages/plop/templates/admin_page/{{snakeCase pagename}}-scoped.scss

@@ -0,0 +1,3 @@
+.{{ kebabCase pagename }} {
+
+}

package/packages/plop/templates/admin_page/{{snakeCase pagename}}.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+
+<template>
+  <div class="{{ kebabCase pagename }}">
+    <x-table :table :controller />
+
+    <x-dialog v-model="dialog.visible" :onSubmit :onCancel>
+      <x-form :dialog />
+    </x-dialog>
+  </div>
+</template>

package/packages/plop/templates/simple_page/controller.js

@@ -0,0 +1,3 @@
+export default config => new (class extends BaseController {
+
+})({ ...config })

package/packages/plop/templates/simple_page/model.js

@@ -0,0 +1,6 @@
+export default () => {
+  const model = reactive({
+
+  })
+  return model
+}

package/packages/plop/templates/simple_page/{{snakeCase pagename}}-scoped.scss

@@ -0,0 +1,3 @@
+.{{ kebabCase pagename }} {
+
+}

package/packages/plop/templates/simple_page/{{snakeCase pagename}}.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <div class="{{ kebabCase pagename }}">
+
+  </div>
+</template>

package/packages/plop/utils/index.js

@@ -0,0 +1,168 @@
+import path from 'node:path'
+import chalk from 'chalk'
+import { fsUtils } from '@stardust_js/node'
+
+const importFile = async (filePath) => {
+  return new Promise(resolve => {
+    import(filePath).then(resolve)
+  })
+}
+
+const viewOnlyFields = [
+  'creator_id',
+  'updater_id',
+  'created_at',
+  'updated_at',
+  'deleted_at'
+]
+
+const operatorFields = [
+  'creator_id',
+  'updater_id'
+]
+
+const getModel = async (plop, data) => {
+  const initModelsPath = path.join(plop.backenderPath, 'models', data.database, 'init-models.js')
+  if (!await fsUtils.exists(initModelsPath)) {
+    const err = chalk.red(`${initModelsPath} not found`)
+    throw err
+  }
+  const configPath = path.join(plop.backenderPath, 'config.js')
+  const dbPath = path.join(plop.backenderPath, '.stardust/db.js')
+  const config = (await importFile(configPath)).default
+  const initModelFunc = (await importFile(initModelsPath)).default
+  const source = config.datasources.find(ele => ele.database === data.database)
+  const { connect } = (await importFile(dbPath))
+  const sequelize = connect(config, source)
+  const models = Object.values(initModelFunc(sequelize, false))
+  const model = models.find(m => m.tableName.toLowerCase() === data.table)
+  return model
+}
+
+const getSequeliezeDataType = (options) => {
+  const type = options.type || options
+  const dataType = {
+    name: type.key || type.name 
+  }
+  if (type._length) {
+    dataType._length = type._length
+  }
+  return dataType
+}
+
+const makeFields = (model) => {
+  const fields = Object.entries(model.tableAttributes).map((ele) => {
+    const [prop, options] = ele
+    const type = getSequeliezeDataType(options)
+
+    let label = options.label || options.comment || prop
+    label = label.replaceAll("'", '"')
+    const field = {
+      label,
+      prop,
+      tableAttrs: {
+        ...calcColumnWidth(type)
+      },
+      formAttrs: {}
+    }
+    fillFieldType(field, type)
+    fillFieldForeign(field, model, prop)
+    const { autoIncrement, _autoGenerated } = options
+    if (autoIncrement || _autoGenerated || viewOnlyFields.includes(prop)) {
+      field.visible = false
+      field.canView = true
+      delete field.comp
+      delete field.formAttrs
+    }
+    return field
+  })
+  return fields
+}
+
+const calcColumnWidth = (type) => {
+  switch (type.name) {
+    case 'STRING': {
+      if (type._length > 20) {
+        return { minWidth: 150 }
+      } else {
+        return { width: 25 + type._length * 12 }
+      }
+    };
+    case 'TEXT': {
+      return { minWidth: 200 }
+    }
+    case 'DATE': {
+      return { width: 175 }
+    };
+    default: {
+      return { width: 100 }
+    }
+  }
+}
+
+const fillFieldType = (field, type) => {
+  const { formAttrs } = field
+  switch (type.name) {
+    case 'INTEGER': {
+      field.type = 'number'
+      formAttrs.precision = 1
+      break
+    }
+    case 'FLOAT': {
+      field.type = 'number'
+      break
+    }
+    case 'BOOLEAN': {
+      field.comp = 'x-select'
+      field.options = '$$ store.dictionaries.yesNo $$'
+      break
+    }
+    case 'STRING': {
+      formAttrs.maxlength = type._length
+      break
+    }
+    case 'TEXT': {
+      field.type = 'textarea'
+      break
+    }
+    case 'DATE': {
+      field.comp = 'ElDatePicker'
+      formAttrs.prefixIcon = 'calendar'
+      break
+    }
+  }
+}
+
+const fillFieldForeign = (field, model, prop) => {
+  const foreigns = Object.values(model.associations)
+  const foreignAttrs = foreigns.map(ele => ele.foreignKey)
+  const database = model.sequelize.config.database
+
+  if (foreignAttrs.includes(prop)) {
+    const foreign = foreigns.find(ele => ele.foreignKey === prop)
+    delete field.formAttrs.precision
+    delete field.type
+    field.options = []
+    field.comp = 'x-select'
+    const idField = foreign.target.primaryKeyField || ''
+    Object.assign(field.formAttrs, {
+      modelName: database + '.' + foreign.target.options.tableName,
+      text: idField,
+      value: idField
+    })
+  } else if (viewOnlyFields.includes(prop)) {
+    delete field.formAttrs.precision
+    delete field.type
+    if (operatorFields.includes(prop)) {
+      field.visible = false
+    }
+  }
+}
+
+export {
+  importFile,
+  getModel,
+  getSequeliezeDataType,
+  makeFields,
+  calcColumnWidth
+}

package/packages/plop/utils/plop-utils.js

@@ -0,0 +1,86 @@
+import path from 'node:path'
+import generatorRunner from 'node-plop/src/generator-runner.js'
+
+const getGenerator = (plop, name, options) => {
+  const runner = generatorRunner(plop, options)
+  const generator = plop.getGenerator(name)
+  Object.assign(generator, {
+    runActions: (data, hooks) => runner.runGeneratorActions(generator, data, hooks),
+    runPrompts: (bypassArr = []) => runner.runGeneratorPrompts(generator, bypassArr)
+  })
+  return generator
+}
+
+const absPath = (plop, p) => {
+  return path.resolve(plop.getPlopfilePath(), p)
+}
+
+const addValidator = (prompt, name) => {
+  prompt.validate = (value) => {
+    return /.+/.test(value) ? true : `请输入${name}`
+  }
+}
+
+const makeInputPrompt = (name, label, validate = true) => {
+  const prompt = {
+    type: 'input',
+    name,
+    message: `请输入 ${label}(${validate ? '必填' : '选填'})`
+  }
+  if (validate) {
+    addValidator(prompt, name)
+  }
+  return prompt
+}
+
+const makeConfirmPrompt = (name, message, value) => {
+  const prompt = {
+    type: 'confirm',
+    name,
+    message,
+    default: value
+  }
+  return prompt
+}
+
+const makeSelectPrompt = (name, choices, message, value) => {
+  const prompt = {
+    type: 'list',
+    name,
+    choices,
+    message,
+    default: value
+  }
+  return prompt
+}
+
+const makePartial = (obj) => {
+  const lines = JSON.stringify(obj, null, 2).split('\n').slice(1, -1).map((line, i) => {
+    line = line.slice(2)
+    let parts = line.split(':')
+    if (parts[0].indexOf('-') >= 0) {
+      parts[0] = parts[0].replaceAll('"', '\'')
+    } else {
+      parts[0] = parts[0].replaceAll('"', '')
+    }
+    parts = parts.map((part, index) => {
+      return index === 0 ? part : part.replaceAll('"', '\'')
+    })
+    return parts.join(':')
+  })
+  let code = lines.join('\n') + '\n'
+  code = code.replaceAll('\'$$ ', '').replaceAll(' $$\'', '')
+  return code
+}
+
+const plopUtils = {
+  getGenerator,
+  absPath,
+  addValidator,
+  makeInputPrompt,
+  makeConfirmPrompt,
+  makeSelectPrompt,
+  makePartial
+}
+
+export default plopUtils

package/packages/styles/common.scss

@@ -0,0 +1,137 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body, #app, .page {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  font-size: var(--x-font-size);
+  color: var(--x-text-color);
+}
+
+.page {
+  overflow-y: auto;
+}
+
+.fullscreen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.abs-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.overflow-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-form {
+  &.viewonly {
+    .el-form-item__label {
+      color: #909999;
+      &:before {
+        display: none;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 0;
+    }
+  }
+  &.hide-labels {
+    .el-form-item__label-wrap, .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      width: 100%;
+    }
+  }
+}
+
+.van-form {
+  &.viewonly {
+    .van-field__label {
+      &:before {
+        display: none;
+      }
+    }
+  }
+  &.hide-labels {
+    .van-cell__title {
+      display: none;
+    }
+  }
+}
+
+.el-collapse {
+  &.use-collapse {
+    .el-collapse-item__header {
+      padding-left: 10px;
+      font-size: var(--x-font-size);
+      color: var(--x-text-color);
+    }
+    .el-collapse-item__content {
+      padding: var(--x-medium-padding);
+      border-top: var(--x-default-border);
+    }
+  }
+  &.no-collapse {
+    .el-collapse-item__header {
+      display: none;
+    }
+    .el-collapse-item__wrap {
+      background-color: transparent;
+    }
+    .el-collapse-item__content {
+      line-height: 1;
+      padding-bottom: 0;
+      padding: 0;
+      border-top: 0;
+    }
+  }
+}
+
+.pc-x-dialog {
+  .el-dialog__title {
+    font-size: var(--el-font-size-large);
+  }
+}
+
+.el-table__row {
+  .el-input, .el-input-number {
+    width: 100%;
+  }
+}
+
+.card-field__value {
+  .el-input, .el-input-number, .el-select, .el-date-editor, .el-input__wrapper {
+    width: 100%;
+  }
+}
+
+.pc-x-col > * {
+  width: 100%;
+}
+
+body > .tox {
+  z-index: 9999;
+}

package/packages/styles/element-ui.scss

@@ -0,0 +1,142 @@
+:root {
+  --x-tr-height: 45px;
+  --x-table-img-height: 40px;
+  --el-dialog-body-padding: 15px 15px 0;
+}
+
+.el-table {
+  thead tr {
+    height: var(--x-tr-height);
+  }
+  .el-image, img, video {
+    height: var(--x-table-img-height);
+  }
+}
+
+.el-table-v2 {
+  color: var(--el-table-text-color);
+}
+
+.el-table, .el-table-v2 {
+  .el-switch {
+    height: 20px;
+  }
+  .el-switch__core {
+    width: 40px !important;
+  }
+}
+
+.el-form {
+  width: 100%;
+  margin: auto;
+  display: inline-block;
+  vertical-align: middle;
+  .el-form-item__label,
+  .el-form-item__content {
+    display: inline-block;
+    vertical-align: top;
+    & > * {
+      vertical-align: top;
+    }
+  }
+  .el-form-item__label {
+    padding-right: 2px;
+  }
+  .el-select, .el-input__wrapper, .el-input-number, .el-date-editor, .el-cascader {
+    width: 100%;
+  }
+}
+
+.el-dialog {
+  padding: 0;
+  &.x-chart-dialog {
+    .el-dialog__body {
+      height: calc(100vh - 280px);
+    }
+  }
+  &.is-fullscreen {
+    .el-dialog__body {
+      height: calc(100% - 107px);
+      max-height: calc(100% - 107px);
+      overflow-y: auto;
+    }
+  }
+  &.no-footer {
+    & > .el-dialog__body {
+      padding-bottom: 15px;
+    }
+    & > .el-dialog__footer {
+      display: none;
+    }
+  }
+  &.is-fullscreen.no-footer {
+    .el-dialog__body {
+      height: calc(100% - 46px);
+      max-height: calc(100% - 46px);
+    }
+  }
+  .el-dialog__header {
+    text-align: left;
+    border-bottom: var(--x-default-border);
+    padding: 10px;
+    .el-dialog__close {
+      font-size: 22px;
+    }
+  }
+  .el-dialog__body {
+    padding: var(--el-dialog-body-padding);
+    max-height: calc(100vh - 280px);
+    overflow-y: auto;
+  }
+  .el-dialog__footer {
+    padding: 15px !important;
+  }
+  .el-form {
+    display: block;
+  }
+  .el-select, .el-input-number, .el-date-editor, .el-cascader {
+    width: 100%;
+  }
+  .el-dialog__footer {
+    background-color: var(--x-bg-color);
+    padding-top: var(--x-large-padding);
+  }
+}
+
+.el-drawer {
+  .el-drawer__header {
+    margin-bottom: 0;
+  }
+}
+
+.el-icon {
+  vertical-align: bottom;
+}
+
+.el-input-number__decrease, .el-input-number__increase {
+  top: 2px !important;
+}
+
+.el-pagination {
+  margin: var(--x-medium-padding) 0;
+  .el-select .el-input {
+    width: 105px
+  }
+}
+
+.el-overlay.is-message-box {
+  z-index: 3000 !important;
+}
+
+.el-message {
+  z-index: 11111 !important;
+}
+
+.el-collapse {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.el-collapse-item__wrap {
+  border-bottom: 0;
+}