@wp1001/ui 2.9.13

package/packages/controllers/TempCrudController.js

@@ -0,0 +1,32 @@
+import CrudController from './CrudController.js'
+
+class TempCrudController extends CrudController {
+  handleAdd () {
+    const $index = this.table.list.length
+    const row = {
+      _index: $index + 1,
+      isEditing: true
+    }
+    this.table.list.push(row)
+    this.handleEdit({ $index, row })
+  }
+
+  handleDelete ({ $index, row }) {
+  	this.table.list.splice($index, 1)
+  }
+
+  handleRowEdit ({ row }) {
+  	row.isEditing = false
+  }
+
+  handleSubmit (params) {
+  	this.dialog.visible = false
+  }
+
+  handleMultiDelete () {
+  	const { list, selection } = this.table
+  	this.table.list = list.filter(ele => !selection.includes(ele))
+  }
+}
+
+export default TempCrudController

package/packages/controllers/index.js

@@ -0,0 +1,15 @@
+import BaseController from './BaseController.js'
+import CrudController from './CrudController.js'
+import TempCrudController from './TempCrudController.js'
+
+export {
+  BaseController,
+  CrudController,
+  TempCrudController
+}
+
+export default {
+  BaseController,
+  CrudController,
+  TempCrudController
+}

package/packages/directives/el-table-infinite-scroll.js

@@ -0,0 +1,55 @@
+const { ElInfiniteScroll } = window.ElementPlus || {}
+
+const elTableScrollWrapperClass = '.el-scrollbar__wrap'
+
+const syncOptions = (sourceElem, targetElem) => {
+  syncAttrs(sourceElem, targetElem, [
+    'infinite-scroll-disabled',
+    'infinite-scroll-delay',
+    'infinite-scroll-immediate',
+    'infinite-scroll-distance',
+  ])
+  const name = 'infinite-scroll-distance'
+  const value = +(sourceElem.getAttribute(name) || 0)
+  targetElem.setAttribute(name, (value < 1 ? 1 : value) + '')
+}
+
+const syncAttrs = (sourceElem, targetElem, attrsKeys) => {
+  let value
+  attrsKeys.forEach((name) => {
+    value = sourceElem.getAttribute(name)
+    if (value !== null) {
+      targetElem.setAttribute(name, value)
+    } else {
+      targetElem.removeAttribute(name)
+    }
+  })
+}
+
+const ElTableInfiniteScroll = {
+  name: 'el-table-infinite-scroll',
+  mounted(el, binding, VNode, oldVNode) {
+    const scrollElem = el.querySelector(elTableScrollWrapperClass)
+    if (!scrollElem) {
+      throw new Error(`${elTableScrollWrapperClass} element not found.`)
+    }
+    scrollElem.style.overflowY = 'auto'
+    setTimeout(() => {
+      if (!el.style.height && !el.style.maxHeight) {
+        scrollElem.style.height = '400px'
+        console.warn('el-table height required, otherwise will set scrollbar default height: 400px')
+      }
+      syncOptions(el, scrollElem)
+      ElInfiniteScroll.mounted(scrollElem, binding, VNode, oldVNode)
+    }, 0)
+  },
+  updated(el) {
+    syncOptions(el, el.querySelector(elTableScrollWrapperClass))
+  },
+  unmounted(el, ...args) {
+    const scrollElem = el.querySelector(elTableScrollWrapperClass)
+    ElInfiniteScroll.unmounted(scrollElem, ...args)
+  }
+}
+
+export default ElTableInfiniteScroll

package/packages/directives/index.js

@@ -0,0 +1,5 @@
+import ElTableInfiniteScroll from './el-table-infinite-scroll.js'
+
+export default {
+  ElTableInfiniteScroll
+}

package/packages/index.js

@@ -0,0 +1,81 @@
+import { h } from 'vue'
+
+import './index.scss'
+
+import { initMessageUtils } from './utils/message.js'
+import utils from './utils/index.js'
+import controllers from './controllers/index.js'
+import all from './comps'
+import directives from './directives/index.js'
+
+const makePlatformComp = (name) => {
+  return {
+    name,
+    props: {
+      platform: {
+        type: String,
+        default: window.isMobile ? 'mobile' : 'pc'
+      }
+    },
+    data () {
+      return { name: '' }
+    },
+    created () {
+      this.name = (this.platform.toLowerCase() === 'pc' ? 'Pc' : 'Mobile') + name
+    },
+    render () {
+      return h(all[this.name], {
+        platform: this.platform,
+        ...this.$attrs
+      }, this.$slots)
+    }
+  }
+}
+
+const components = (() => {
+  const names = Object.keys(all)
+  const union = [...new Set(names.map(n => n.replace(/(pc|mobile)/i, '')))]
+
+  const comps = {}
+  for (const name of names) {
+    if (/(pc|mobile)/i.test(name)) {
+      comps[name] = all[name]
+    }
+  }
+  for (const name of union) {
+    if (!names.find(n => /(pc|mobile)/i.test(n) && n.toLowerCase().includes(name.toLowerCase()))) {
+      comps[name] = all[name]
+    } else {
+      comps[name] = makePlatformComp(name)
+    }
+  }
+  return comps
+})()
+
+const install = (app, options) => {
+  initMessageUtils(options)
+  for (let key in components) {
+    app.component(key, components[key])
+  }
+  for (let key in directives) {
+    app.directive(directives[key].name, directives[key])
+  }
+}
+
+const StardustUI = {
+  version: '2.9.13',
+  ...components,
+  ...utils,
+  ...controllers,
+  install
+}
+
+export {
+  utils,
+  controllers
+}
+
+export * from './utils/index.js'
+export * from './controllers/index.js'
+
+export default StardustUI

package/packages/index.scss

@@ -0,0 +1,4 @@
+@import "./styles/variables.scss";
+@import "./styles/element-ui.scss";
+@import "./styles/vant.scss";
+@import "./styles/common.scss";

package/packages/layout/breadcrumb/breadcrumb.vue

@@ -0,0 +1,31 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+
+  .el-breadcrumb__inner a {
+    font-weight: 400;
+  }
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

package/packages/layout/breadcrumb/index.js

@@ -0,0 +1,41 @@
+import { pathToRegexp } from 'path-to-regexp'
+
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route(route) {
+      if (route.path.startsWith('/redirect/')) {
+        return
+      }
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.meta?.title)
+      const first = matched[0]
+
+      this.levelList = matched.filter(item => item.meta?.title && item.meta.breadcrumb !== false)
+    },
+    pathCompile(path) {
+      const { params } = this.$route
+      var toPath = pathToRegexp(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}

package/packages/layout/header/header.vue

@@ -0,0 +1,281 @@
+<script setup>
+import { reactive, inject, computed, nextTick } from 'vue'
+import store from '@/store'
+import router from '@/router'
+
+import Breadcrumb from '../breadcrumb/breadcrumb.vue'
+import Inner from './inner.vue'
+
+const { funcs } = StardustJs
+const { storage, fullscreen } = StardustBrowser
+
+const { session, local } = storage
+const { app, user } = store
+const { info } = user
+
+const model = reactive({
+  themeDialogVisible: false,
+  colorIndex: -1,
+  themeColors: ['#1B5297', '#F5222D', '#FA541C', '#FAAD14', '#13C2C2', '#52C41A', '#1890FF', '#2F54EB', '#722ED1']
+})
+
+const handleToggleSidebar = () => {
+  app.$patch({
+    sidebarToggled: true,
+    sidebarCollapse: !app.sidebarCollapse
+  })
+}
+
+const handleToggleFullscreen = () => {
+  const { isOpened, open, exit } = fullscreen
+  isOpened() ? exit() : open()
+}
+
+const handleClearStorage = () => {
+  session.clear()
+  local.noClearKeys.add('cacheState')
+  local.clear()
+  local.noClearKeys.delete('cacheState')
+  window.location.reload()
+}
+
+const handleLockScreen = () => {
+  app.screenLock.isLocked = true
+}
+
+const handleSetTheme = () => {
+  model.themeDialogVisible = true
+}
+
+const handleReset = () => {
+  const theme = local.getJson('theme')
+  for (let key in theme) {
+    theme[key] = ''
+  }
+  setTheme(theme)
+  local.setJson('theme', theme)
+}
+
+const handleSetThemeColor = (color) => {
+  const root = document.documentElement
+  const [r, g, b] = [0, 1, 2].map(n => parseInt(color.slice(1 + n * 2, 1 + n * 2 + 2), 16))
+  const avg = (r + g + b) / 3
+  const rgb2Hex = (...rgba) => '#' + rgba.map(n => n.toString(16)).join('')
+  const theme = {
+    color,
+    '--x-bg-color': rgb2Hex(r, g, b, 30),
+    '--x-sidebar-bg-color': color,
+    '--x-sidebar-current-bg-color': rgb2Hex(20, 20, 20, 170),
+    '--x-sidebar-hover-bg-color': rgb2Hex(20, 20, 20, 200),
+    '--x-sidebar-text-color': avg < 128 ? '#e0eeee' : '#303333',
+    '--x-sidebar-current-text-color': avg < 128 ? '#b0bbbb' : '#606666'
+  }
+  setTheme(theme)
+  local.setJson('theme', theme)
+}
+
+const setTheme = theme => {
+  model.colorIndex = model.themeColors.indexOf(theme.color)
+  const root = document.documentElement
+  for (let key in theme) {
+    if (key === 'color') continue
+    root.style.setProperty(key, theme[key])
+  }
+}
+
+const handleLogout = async () => {
+  await router.replace('/login')
+  await funcs.sleep(50)
+  session.clear()
+  local.clear()
+  window.location.reload()
+}
+
+const config = inject('config')
+const { icons = null } = config?.header || {}
+setTheme(local.getJson('theme', {}))
+</script>
+
+<template>
+  <div class="header">
+    <div class="toggler flex-center" @click="handleToggleSidebar">
+      <svg
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        width="23"
+        height="23"
+        :class="{ active: app.sidebarCollapse }"
+      >
+        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      </svg>
+    </div>
+
+    <Breadcrumb v-if="app.breadcrumbVisible" class="breadcrumb" />
+
+    <Inner />
+
+    <div class="right flex-center">
+      <span class="user flex-center">
+        <el-avatar shape="circle" :src="info.avatar" class="avatar">
+          {{ info.username[0].toUpperCase() }}
+        </el-avatar>
+        <span class="name">{{ info.username }}</span>
+      </span>
+      <el-tooltip
+        v-if="!icons || icons.includes('fullscreen')"
+        effect="light"
+        content="全屏"
+      >
+        <x-icon
+          name="FullScreen"
+          class="full"
+          @click="handleToggleFullscreen"
+        />
+      </el-tooltip>
+      <el-tooltip
+        v-if="!icons || icons.includes('screen_lock')"
+        effect="light"
+        content="锁屏"
+      >
+        <x-icon
+          name="Lock"
+          class="lock"
+          @click="handleLockScreen"
+        />
+      </el-tooltip>
+      <el-tooltip
+        v-if="!icons || icons.includes('clear_storage')"
+        effect="light"
+        content="清除缓存"
+      >
+        <x-icon
+          name="Delete"
+          class="clear"
+          @click="handleClearStorage"
+        />
+      </el-tooltip>
+      <el-tooltip
+        v-if="!icons || icons.includes('theme')"
+        effect="light"
+        content="主题"
+      >
+        <x-icon
+          name="Brush"
+          class="theme"
+          @click="handleSetTheme"
+        />
+      </el-tooltip>
+      <el-tooltip
+        v-if="!icons || icons.includes('logout')"
+        effect="light"
+        content="退出"
+      >
+        <x-icon
+          :name="app.isMobile ? 'stop-circle-o' : 'SwitchButton'"
+          class="logout"
+          @click="handleLogout"
+        />
+      </el-tooltip>
+    </div>
+
+    <x-dialog
+      title="主题设置"
+      v-model="model.themeDialogVisible"
+      drawer
+      class="theme-dialog"
+    >
+      <div class="block">
+        <div class="title">主题色</div>
+        <div class="theme-colors">
+          <div
+            v-for="(color, index) in model.themeColors"
+            :key="color"
+            class="color"
+            :class="{ active: index === model.colorIndex }"
+            :style="{ backgroundColor: color }"
+            @click="handleSetThemeColor(color)"
+          />
+        </div>
+      </div>
+      <el-button type="primary" @click="handleReset">恢复默认</el-button>
+    </x-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  padding: 10px 0;
+  position: relative;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+  .toggler {
+    cursor: pointer;
+    width: var(--x-header-height);
+    height: var(--x-header-height);
+    margin-right: 10px;
+    &:hover {
+      background-color: #f8f8f8;
+    }
+    svg {
+      transform: rotate(180deg);
+      &.active {
+        transform: rotate(0);
+      }
+    }
+  }
+  .right {
+    position: absolute;
+    right: 0.1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 15px;
+    .el-icon {
+      font-size: 20px;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+    .user {
+      color: #626aef;
+      display: inline-flex;
+      vertical-align: top;
+    }
+    .avatar {
+      margin-right: 10px;
+    }
+    .el-icon {
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+}
+.theme-dialog {
+  .block {
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #e0eeee;
+  }
+  .title {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+  .color {
+    display: inline-block;
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    border-radius: 2px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    position: relative;
+    &.active::after {
+      content: '✓';
+      display: inline-block;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+    }
+  }
+}
+</style>

package/packages/layout/header/inner.js

@@ -0,0 +1,11 @@
+import { h } from 'vue'
+
+export default {
+  name: 'Inner',
+  render () {
+    const inner = this.HeaderInner
+    if (inner) {
+      return typeof inner === 'function' ? inner() : h(inner)
+    }
+  }
+}

package/packages/layout/header/inner.vue

@@ -0,0 +1,3 @@
+<script>
+export { default } from './inner.js'
+</script>

package/packages/layout/mobile-menu.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import store from '@/store'
+
+import Sidebar from './sidebar/sidebar.vue'
+
+const route = useRoute()
+
+const sidebarVisible = ref(false)
+
+watch(route, () => sidebarVisible.value = false)
+
+onMounted(() => {
+  store.app.sidebarCollapse = false
+})
+
+const handleToggleSidebar = () => {
+  sidebarVisible.value = !sidebarVisible.value
+}
+</script>
+
+<template>
+  <div class="mobile-menu-layout" :class="{ 'hide-nav-bar': route.meta.hideNavBar }">
+    <van-nav-bar
+      v-show="!route.meta.hideNavBar"
+      :left-text="route.meta.canBack !== false ? '返回' : ''"
+      :left-arrow="route.meta.canBack !== false"
+      :title="route.meta.title"
+      @click-left="$router.go(-1)"
+    >
+      <template #right>
+        <div class="toggler flex-center" @click="handleToggleSidebar">
+          <svg
+            viewBox="0 0 1024 1024"
+            xmlns="http://www.w3.org/2000/svg"
+            width="23"
+            height="23"
+            :class="{ active: sidebarVisible }"
+          >
+            <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+          </svg>
+        </div>
+      </template>
+    </van-nav-bar>
+    <main :class="{ 'has-sidebar': sidebarVisible }">
+      <router-view />
+      <van-overlay
+        v-if="sidebarVisible"
+        :show="true"
+        @click="handleToggleSidebar"
+      >
+        <Sidebar />
+      </van-overlay>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+svg {
+  transform: rotate(180deg);
+  &.active {
+    transform: rotate(0);
+  }
+}
+main {
+  height: calc(100vh - var(--van-nav-bar-height));
+  overflow-y: auto;
+  .sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    :deep(.arrow-down) {
+      top: 0.3rem;
+      right: 0.15rem;
+    }
+  }
+}
+.hide-nav-bar main {
+  height: 100%;
+}
+</style>