@wp1001/ui 2.9.13

package/packages/layout/tagsview/ScrollPane.js

@@ -0,0 +1,65 @@
+const tagAndTagSpacing = 4
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrapRef
+    }
+  },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeUnmount() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    emitScroll() {
+      this.$emit('scroll')
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}

package/packages/layout/tagsview/ScrollPane.vue

@@ -0,0 +1,24 @@
+<script>
+export { default } from './ScrollPane.js'
+</script>
+
+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  :deep(.el-scrollbar__bar) {
+    bottom: 0px;
+  }
+  :deep(.el-scrollbar__wrap) {
+    height: 35px;
+  }
+}
+</style>

package/packages/layout/tagsview/index.js

@@ -0,0 +1,169 @@
+import ScrollPane from './ScrollPane.vue'
+import router from '@/router'
+
+export default {
+  components: { ScrollPane },
+  data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      selectedTag: {},
+      affixTags: []
+    }
+  },
+  computed: {
+    visitedViews() {
+      return this.$store.tagsview.visitedViews
+    },
+    routes() {
+      return router.getRoutes()
+    }
+  },
+  watch: {
+    $route() {
+      this.addTags()
+      this.moveToCurrentTag()
+    },
+    visible(value) {
+      if (value) {
+        document.body.addEventListener('click', this.closeMenu)
+      } else {
+        document.body.removeEventListener('click', this.closeMenu)
+      }
+    }
+  },
+  mounted() {
+    this.initTags()
+    this.addTags()
+  },
+  methods: {
+    isActive(route) {
+      return route.path === this.$route.path
+    },
+    isAffix(tag) {
+      return tag.meta?.affix
+    },
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta?.affix) {
+          const tagPath = this.resolvePath(basePath, route.path)
+          tags.push({
+            fullPath: tagPath,
+            path: tagPath,
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, this.resolvePath(basePath, route.path))
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routes)
+      for (const tag of affixTags) {
+        if (tag.name) {
+          this.$store.tagsview.addVisitedView(tag)
+        }
+      }
+    },
+    addTags() {
+      const { name } = this.$route
+      if (name) {
+        this.$store.tagsview.addView(this.$route)
+      }
+      return false
+    },
+    moveToCurrentTag() {
+      const tags = this.$refs.tag
+      this.$nextTick(() => {
+        for (const tag of tags) {
+          if (tag.to.path === this.$route.path) {
+            this.$refs.scrollPane.moveToTarget(tag)
+            if (tag.to.fullPath !== this.$route.fullPath) {
+              this.$store.tagsview.updateVisitedView(this.$route)
+            }
+            break
+          }
+        }
+      })
+    },
+    refreshSelectedTag(view) {
+      this.$store.tagsview.delCachedView(view).then(() => {
+        const { fullPath } = view
+        this.$nextTick(() => {
+          this.$router.replace({ path: fullPath })
+        })
+      })
+    },
+    closeSelectedTag(view) {
+      this.$store.tagsview.delView(view).then(({ visitedViews }) => {
+        if (this.isActive(view)) {
+          this.toLastView(visitedViews, view)
+        }
+      })
+    },
+    closeOthersTags() {
+      this.$router.push(this.selectedTag)
+      this.$store.tagsview.delOthersViews(this.selectedTag).then(() => {
+        this.moveToCurrentTag()
+      })
+    },
+    closeAllTags(view) {
+      this.$store.tagsview.delAllViews().then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews, view)
+      })
+    },
+    toLastView(visitedViews, view) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView.fullPath)
+      } else {
+        if (view.name === 'Dashboard') {
+          this.$router.replace({ path: view.fullPath })
+        } else {
+          this.$router.push('/')
+        }
+      }
+    },
+    openMenu(tag, e) {
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left
+      const offsetWidth = this.$el.offsetWidth 
+      const maxLeft = offsetWidth - menuMinWidth
+      const left = e.clientX - offsetLeft + 15
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
+
+      this.top = e.clientY
+      this.visible = true
+      this.selectedTag = tag
+    },
+    closeMenu() {
+      this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
+    },
+    resolvePath(base, path) {
+      if (base[0] !== '/') base = '/' + base
+      if (base.length > 1 && base.endsWith('/')) base = base.slice(0, -1)
+      if (base === '/') base = ''
+      if (path[0] !== '/') path = '/' + path
+      return base + path
+    }
+  }
+}

package/packages/layout/tagsview/index.vue

@@ -0,0 +1,124 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tag"
+        :key="tag.path"
+        :class="isActive(tag)?'active':''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        tag="span"
+        class="tags-view-item"
+        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
+        @contextmenu.prevent.native="openMenu(tag,$event)"
+      >
+        {{ tag.title }}
+        <x-icon v-if="!isAffix(tag)" name="Close" class="close" @click.prevent.stop="closeSelectedTag(tag)" />
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
+      <li @click="closeOthersTags">Close Others</li>
+      <li @click="closeAllTags(selectedTag)">Close All</li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  position: relative;
+  height: var(--x-tagsview-height);
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 29px;
+      line-height: 27px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #ecf5ff;
+      padding: 0 6px 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 5px;
+      &:first-of-type {
+        margin-left: 10px;
+      }
+      &:last-of-type {
+        margin-right: 10px;
+      }
+      &.active {
+        background-color: var(--el-color-primary);
+        color: #fff;
+        border-color: #42b983;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.tags-view-wrapper {
+  .tags-view-item {
+    .close {
+      position: relative;
+      top: 5px;
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

package/packages/plop/actions/make-fill-admin-partials-action.js

@@ -0,0 +1,95 @@
+import plopUtils from '../utils/plop-utils.js'
+import {
+  getModel,
+  makeFields,
+} from '../utils/index.js'
+
+const {
+  makePartial
+} = plopUtils
+
+const viewOnlyFields = [
+  'creator_id',
+  'updater_id',
+  'created_at',
+  'updated_at',
+  'deleted_at'
+]
+
+const makeFillAdminPartialsAction = (plop) => {
+  return async function (data) {
+    const model = await getModel(plop, data)
+    const attrs = model.tableAttributes
+
+    data.tableName = model.tableName
+
+    Object.keys(attrs).forEach(key => {
+      if (attrs[key]._autoGenerated) {
+        if (key.startsWith('created')) {
+          attrs[key].label = '创建时间'
+        } else if (key.startsWith('updated')) {
+          attrs[key].label = '更新时间'
+        } else if (key.startsWith('deleted')) {
+          attrs[key].label = '删除时间'
+        }
+      }
+    })
+
+    fillIdFieldPartial(plop, model)
+    fillFieldsPartial(plop, model)
+
+    Object.keys(attrs).forEach(key => {
+      const { autoIncrement, _autoGenerated } = attrs[key]
+      if (autoIncrement || _autoGenerated) {
+        delete attrs[key]
+      }
+    })
+
+    viewOnlyFields.forEach(field => delete attrs[field])
+  }
+}
+
+const fillIdFieldPartial = (plop, model) => {
+  plop.setPartial('idFieldPartial', model.primaryKeyField)
+}
+
+const fillFieldsPartial = (plop, model) => {
+  const fields = makeFields(model)
+  plop.setPartial('fieldsPartial', makeFieldsPartial(fields))
+}
+
+const makeFieldsPartial = (fields) => {
+  const afterKeys = ['tableAttrs', 'formAttrs']
+  fields.map(field => {
+    const values = afterKeys.map(key => field[key])
+    afterKeys.forEach(key => delete field[key])
+    values.forEach((value, index) => {
+      const prefix = afterKeys[index][0] + afterKeys[index].match(/[A-Z]/)[0].toLowerCase() + '_'
+      if (value && Object.keys(value).length) {
+        for (let k in value) {
+          field[prefix + k] = value[k]
+        }
+      }
+    })
+  })
+  const partial = makePartial(fields)
+  let code = ''
+  partial.split('\n').forEach(line => {
+    const trimed = line.trim()
+    if ('[{}]'.includes(trimed[0])) {
+      code += line
+      if ('{'.includes(trimed[0])) {
+        code += ' '
+      }
+      if ('}'.includes(trimed[0])) {
+        code += '\n'
+      }
+    } else {
+      code += trimed + ' '
+    }
+  })
+  code = code.slice(0, -1)
+  return code
+}
+
+export default makeFillAdminPartialsAction

package/packages/plop/generators/make-admin-page.js

@@ -0,0 +1,39 @@
+import plopUtils from '../utils/plop-utils.js'
+import makePageGenerator from './make-page-generator.js'
+import makeFillAdminPartialsAction from '../actions/make-fill-admin-partials-action.js'
+
+const {
+  makeInputPrompt,
+  makeConfirmPrompt
+} = plopUtils
+
+const makeGenerator = (plop) => {
+  const dir = 'admin_page'
+
+  const generator = makePageGenerator(plop, dir)
+
+  plop.setPartial('fieldsPartial', '[\n]')
+
+  return {
+    name: 'make-admin-page',
+    description: '创建新的后台管理页面',
+    prompts: [
+      ...generator.prompts,
+      makeConfirmPrompt('autoGenerateColumns', '是否需要自动生成 table.columns (表格的数据列)？'),
+      {
+        ...makeInputPrompt('database', '数据库名称'),
+        when: anwsers => anwsers.autoGenerateColumns
+      },
+      {
+        ...makeInputPrompt('table', '数据表名称'),
+        when: anwsers => anwsers.autoGenerateColumns
+      }
+    ],
+    actions: [
+      makeFillAdminPartialsAction(plop),
+      ...generator.actions,
+    ]
+  }
+}
+
+export default makeGenerator

package/packages/plop/generators/make-database-admin-pages.js

@@ -0,0 +1,84 @@
+import path from 'node:path'
+import chalk from 'chalk'
+import clipboardy from 'clipboardy'
+import { fsUtils } from '@stardust_js/node'
+
+import plopUtils from '../utils/plop-utils.js'
+
+const {
+  makeInputPrompt,
+  getGenerator
+} = plopUtils
+
+const makeGenerator = (plop) => {
+  const mapGenerator = getGenerator(plop, 'make-admin-page', { force: false })
+  const pascalCase = plop.getHelper('pascalCase')
+  const snakeCase = plop.getHelper('snakeCase')
+
+  const generator = {
+    name: 'make-database-admin-pages',
+    description: '根据 backender 中已存在的数据库模型目录为其中所有模型创建后台管理页面',
+    prompts: [
+      makeInputPrompt('database', '数据库名称'),
+      makeInputPrompt('dir', '目的文件夹路径')
+    ],
+    actions: [
+      async ({ database, dir }) => {
+        const databaseDir = path.join(plop.backenderPath, `/models/${database}`)
+        let files = await fsUtils.listDir(databaseDir)
+        files = files.filter(file => file.includes('.js') && !file.includes('init-models.js') && file.split('/').pop() !== 'index.js')
+        const tables = files.map(file => file.slice(0, -3))
+
+        const results = []
+        for (let i = 0, len = tables.length; i < len; i++) {
+          const table = tables[i]
+          const result = await mapGenerator.runActions({
+            dir,
+            pagename: table,
+            database,
+            table: snakeCase(table),
+          })
+          if (!result.changes[2]) {
+            console.log(chalk.red(`数据表 ${database}.${table} 构建页面失败`), result.changes)
+          } else {
+            results.push(result)
+          }
+          console.log(chalk.cyan(`Finished ${i + 1} / ${len} ${((i + 1) / len * 100).toFixed(2)}%`))
+        }
+        console.log(chalk.bgCyan('^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^'))
+        console.log(chalk.bgCyan('^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^'))
+        const routes = results.map(result => result.changes[2].path)
+        const childrenCode = routes.map(c => {
+          return c.split('\n').map(line => '  ' + line).join('\n').trimEnd()
+        }).join('').trimStart()
+        const rootCode = `
+          {
+            path: '/${dir}',
+            name: '${pascalCase(dir)}',
+            redirect: '/${dir}/${snakeCase(tables[0])}',
+            component: Layout,
+            meta: {
+              title: '${pascalCase(dir)}',
+              icon: 'menu'
+            },
+            children: [
+              #code#
+            ]
+          },
+        `.split('\n').map(line => line.slice(10)).join('\n')
+        const numDirLevels = dir.split('/').length
+        const code = rootCode.replace('#code#', childrenCode).split('\n').map(line => {
+          return '  '.repeat(numDirLevels) + line
+        }).join('\n').trim()
+        clipboardy.writeSync(code)
+        console.log(code)
+        console.log(chalk.black.bgYellow('上面有一个参考的 route 代码, (已复制到剪贴板)'))
+        console.log(chalk.bgCyan('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'))
+        console.log(chalk.bgCyan('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'))
+      }
+    ]
+  }
+  return generator
+}
+
+export default makeGenerator

package/packages/plop/generators/make-page-generator.js

@@ -0,0 +1,52 @@
+import path from 'node:path'
+import chalk from 'chalk'
+import clipboardy from 'clipboardy'
+
+import plopUtils from '../utils/plop-utils.js'
+
+const dirname = import.meta.dirname.split('node_modules')[0]
+
+const {
+  makeInputPrompt,
+} = plopUtils
+
+const makePageGenerator = (plop, dir) => {
+  const properCase = plop.getHelper('properCase')
+  const snakeCase = plop.getHelper('snakeCase')
+
+  return {
+    prompts: [
+      makeInputPrompt('dir', '目的文件夹路径'),
+      makeInputPrompt('pagename', '目的页面名称'),
+    ],
+    actions: [
+      {
+        type: 'addMany',
+        destination: path.join(dirname, 'src/views/{{dir}}/{{snakeCase pagename}}'),
+        base: path.join(dirname, 'node_modules/@stardust_js/ui/packages/plop/templates/' + dir),
+        templateFiles: path.join(dirname, 'node_modules/@stardust_js/ui/packages/plop/templates/' + dir + '/*.*')
+      },
+      function (data) {
+        let { dir, pagename } = data
+        const title = properCase(pagename)
+        const name = (dir ? properCase(dir) : '') + title
+        pagename = snakeCase(pagename)
+        const code = `
+          {
+            path: '${pagename}',
+            name: '${name}',
+            component: () => import('@/views/${dir ? (dir + '/') : ''}${pagename}/${pagename}.vue'),
+            meta: {
+              title: '${title}'
+            }
+          },
+        `.split('\n').map(line => line.slice(8)).join('\n')
+        clipboardy.writeSync(code)
+        console.log(chalk.black.bgYellow('这里有一个参考的 route 代码, (已复制到剪贴板)'))
+        return code
+      }
+    ]
+  }
+}
+
+export default makePageGenerator

package/packages/plop/generators/make-simple-page.js

@@ -0,0 +1,20 @@
+import makePageGenerator from './make-page-generator.js'
+
+const makeGenerator = (plop) => {
+  const dir = 'simple_page'
+
+  const generator = makePageGenerator(plop, dir)
+
+  return {
+    name: 'make-simple-page',
+    description: '创建新的页面',
+    prompts: [
+      ...generator.prompts
+    ],
+    actions: [
+      ...generator.actions
+    ]
+  }
+}
+
+export default makeGenerator

package/packages/plop/plopfile.js

@@ -0,0 +1,24 @@
+import path from 'node:path'
+import chalk from 'chalk'
+import plopUtils from './utils/plop-utils.js'
+
+import makeAdminPage from './generators/make-admin-page.js'
+import makeDatabaseAdminPages from './generators/make-database-admin-pages.js'
+import makeSimplePage from './generators/make-simple-page.js'
+
+const generators = {
+  makeAdminPage,
+  makeDatabaseAdminPages,
+  makeSimplePage
+}
+
+export default function (plop) {
+  const hello = '欢迎使用 stardust-frontender 代码生成工具，请从以下生成器中选择一个 : '
+  plop.setWelcomeMessage(chalk.bgGreen.white(hello))
+  plop.backenderPath = plopUtils.absPath(plop, '../backender')
+
+  Object.keys(generators).forEach(name => {
+    const generator = generators[name](plop)
+    plop.setGenerator(generator.name, generator)
+  })
+}