@wp1001/ui 2.9.13

package/packages/layout/mobile-tabs.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { reactive, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const tabs = [
+  {
+    text: '首页',
+    icon: 'home-o'
+  },
+  {
+    text: '设置',
+    icon: 'setting-o'
+  }
+]
+</script>
+
+<template>
+  <div class="mobile-tabs-layout">
+    <van-nav-bar
+      v-show="!route.meta.hideNavBar"
+      :left-text="!route.meta.hideLeftArrow ? '返回' : ''"
+      :left-arrow="!route.meta.hideLeftArrow"
+      :title="route.meta.title"
+      @click-left="$router.go(-1)"
+    />
+    <main>
+      <router-view />
+    </main>
+    <van-tabbar v-show="!route.meta.hideTabBar">
+      <van-tabbar-item
+        v-for="(item, index) in tabs"
+        :key="index"
+        v-bind="item"
+      >
+        {{ item.text }}
+      </van-tabbar-item>
+    </van-tabbar>
+  </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;
+}
+</style>

package/packages/layout/pc.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed } from 'vue'
+import store from '@/store'
+import { utils } from '@stardust_js/ui'
+
+import Header from './header/header.vue'
+import Sidebar from './sidebar/sidebar.vue'
+import TagsView from './tagsview/index.vue'
+import ScreenLock from './screenlock/screenlock.vue'
+
+const { app } = store
+const watermarkUrl = computed(() => utils.effects.createWatermark(app.watermark).toDataURL())
+</script>
+
+<template>
+  <el-container
+    class="pc-layout"
+    :class="{ mobile: app.isMobile, 'has-tagsview': app.tagsviewVisible }"
+  >
+    <Sidebar />
+
+    <el-container>
+      <el-header>
+        <Header class="header" />
+        <TagsView v-if="app.tagsviewVisible" />
+      </el-header>
+
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+
+    <ScreenLock />
+
+    <div
+      class="watermark"
+      :style="{ 'background-image': app.watermark.visible ? `url(${watermarkUrl})` : '' }"
+    />
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.pc-layout {
+  .el-header {
+    height: var(--x-head-height);
+    padding: 0;
+    color: #606666;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    background-color: var(--x-header-bg-color);
+    height: var(--x-header-height);
+  }
+  .el-main {
+    background-color: var(--x-bg-color);
+    padding: 10px;
+    height: calc(100% - #{var(--x-head-height)});
+    overflow-y: auto;
+  }
+
+  &.mobile {
+    zoom: 0.8;
+  }
+  &.has-tagsview {
+    .el-header {
+      height: calc(var(--x-head-height) + var(--x-tagsview-height));
+    }
+    .el-main {
+      height: calc(100% - #{var(--x-head-height)} - #{var(--x-tagsview-height)});
+    }
+  }
+}
+
+.watermark {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform: rotate(-10deg);
+  z-index: 9999;
+}
+</style>

package/packages/layout/screenlock/index.js

@@ -0,0 +1,129 @@
+import { utils } from '@stardust_js/ui'
+import { service } from '@/stardust'
+const { funcs } = StardustJs
+
+export default {
+  data () {
+    return {
+      lastTime: Date.now(),
+      isVerifing: false,
+      pin: new Array(6).fill(''),
+      inputs: [],
+      stoper: null
+    }
+  },
+  computed: {
+    screenLock () {
+      return this.$store.app.screenLock
+    }
+  },
+  mounted () {
+    if (!this.screenLock.enabled) {
+      return
+    }
+    this.detectInteractive(this.onInteractive)
+    setInterval(this.checkInteractive, 200)
+    this.checkInteractive()
+  },
+  methods: {
+    handleCustomPin () {
+      const pin = window.prompt('请输入自定义PIN码（6位字母或数字）')
+      if (pin === null) return
+      if (!pin || pin.length !== 6 || !/\w{6}/.test(pin)) {
+        return utils.Message('PIN码格式错误')
+      }
+      service.restful.update('users', this.$store.user.info.id, { pin })
+      this.$store.user.info.pin = pin
+    },
+    async checkInteractive () {
+      this.checkMask()
+      if (
+        this.screenLock.isLocked && !this.stoper ||
+        !this.screenLock.isLocked && Date.now() - this.lastTime > this.screenLock.time * 1000
+      ) {
+        await this.toggleScreenLock(true)
+        this.effect()
+      }
+    },
+    effect () {
+      this.stoper = utils.effects.pop(this.$refs.canvas)
+    },
+    detectInteractive (callback) {
+      const eventTypes = ['click', 'keydown', 'mousemove', 'mousewheel']
+      eventTypes.forEach(type => {
+        document.addEventListener(type, () => callback(type), true)
+      })
+    },
+    onInteractive (type) {
+      if (this.screenLock.isLocked) {
+        if (type === 'click') {
+          this.isVerifing = true
+          this.$nextTick(() => {
+            const index = this.pin.findIndex(c => !c)
+            this.$refs.inputs[index].input.focus()
+          })
+        }
+      } else {
+        this.lastTime = Date.now()
+      }
+    },
+    async checkMask () {
+      if (!this.screenLock.isLocked) {
+        return
+      }
+      const mask = document.querySelector('.screen-lock .fullscreen')
+      let exists = !!mask
+      if (exists) {
+        const rect = mask.getBoundingClientRect()
+        const zoom = document.documentElement.style.zoom * 1 || 1
+        exists = rect.left === 0 &&
+                rect.top === 0 &&
+                Math.round(rect.width - window.innerWidth / zoom) < 1 &&
+                Math.round(rect.height - window.innerHeight / zoom) < 1
+      }
+      if (!exists) {
+        window.location.reload()
+      }
+    },
+    async handlePinInput (index, event) {
+      const char = event.key
+      if (/[0-9]/.test(char)) {
+        this.pin[index] = char
+      } else {
+        if (char.toLowerCase() === 'backspace' && index > 0) {
+          this.pin[index - 1] = ''
+          this.$refs.inputs[index - 1].input.focus()
+        }
+        return
+      }
+      if (index < this.pin.length - 1) {
+        await funcs.sleep(20)
+        this.$refs.inputs[index + 1].input.focus()
+      } else {
+        if (this.pin.join('') !== this.$store.getters.user.pin) {
+          this.$message({
+            type: 'warning',
+            message: '锁屏密码错误',
+          })
+          this.$refs.inputs[0].input.focus()
+        } else {
+          this.isVerifing = false
+          this.stoper()
+          this.stoper = null
+          this.lastTime = Date.now()
+          this.toggleScreenLock(false)
+        }
+        this.pin = new Array(6).fill('')
+      }
+    },
+    async handleCompositionstart (index, event) {
+      event.target.blur()
+      await StardustJs.funcs.sleep(10)
+      event.target.focus()
+    },
+    async toggleScreenLock (isLocked) {
+      this.$store.app.screenLock.isLocked = isLocked
+      await this.$nextTick()
+    }
+  }
+}

package/packages/layout/screenlock/screenlock.vue

@@ -0,0 +1,85 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div
+    v-if="screenLock.enabled && screenLock.isLocked"
+    class="screen-lock fullscreen flex-center"
+  >
+    <canvas
+      ref="canvas"
+      class="fullscreen"
+    />
+
+    <div v-if="isVerifing" class="verify abs-center">
+      <div class="pin">
+        <el-input
+          v-for="(c, index) in pin"
+          :key="index"
+          v-model="pin[index]"
+          type="tel"
+          ref="inputs"
+          :readonly="!!c"
+          spellcheck="false"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          @compositionstart.stop.prevent="handleCompositionstart(index, $event)"
+          @keydown.stop.prevent="handlePinInput(index, $event)"
+        />
+      </div>
+      <el-button
+        type="primary"
+        class="custom-pin"
+        @click="handleCustomPin"
+      >
+        自定义锁屏PIN码
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.screen-lock {
+  z-index: 9998;
+  .pin {
+    .el-input {
+      width: 50px;
+      height: 50px;
+      margin: 5px;
+      font-size: 40px;
+    }
+    :deep(input) {
+      color: #409eff;
+      text-align: center;
+      padding-bottom: 3px;
+      -moz-appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none !important;
+      }
+    }
+  }
+  .verify {
+    z-index: 9999;
+    text-align: center;
+    .custom-pin {
+      margin-top: 20px;
+    }
+  }
+  canvas {
+    animation-name: fade-in;
+    animation-duration: 1s;
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/packages/layout/sidebar/item.js

@@ -0,0 +1,16 @@
+export default {
+  name: 'Item',
+  props: {
+    node: Object,
+    data: Object,
+    hover: Boolean
+  },
+  computed: {
+    collapse () {
+      return this.$store.getters.collapse
+    },
+    isBranch () {
+      return this.data.children?.length > 0
+    }
+  }
+}

package/packages/layout/sidebar/item.vue

@@ -0,0 +1,16 @@
+<script>
+export { default } from './item.js'
+</script>
+
+<template>
+  <span
+    class="menu-item flex-center"
+    :class="{ branch: isBranch }"
+  >
+    <x-icon v-if="data.meta.icon" :name="data.meta.icon" class="icon" />
+    <span v-show="hover || !collapse">
+      <span>{{ data.meta.title }}</span>
+      <x-icon v-if="isBranch" :name="`arrow-${node?.expanded ? 'up' : 'down'}`" class="arrow-toggle" />
+    </span>
+  </span>
+</template>

package/packages/layout/sidebar/menu.js

@@ -0,0 +1,72 @@
+import Item from './item.vue'
+
+export default {
+  name: 'Menu',
+  components: { Item },
+  props: {
+    menu: Array,
+    hover: Boolean
+  },
+  data () {
+    return {
+      defaultProps: { label: 'name' }
+    }
+  },
+  computed: {
+    collapse () {
+      return this.$store.getters.collapse
+    }
+  },
+  watch: {
+    collapse: {
+      handler () {
+        this.filter()
+        this.updateCurrent()
+      },
+      immediate: true
+    },
+    $route: {
+      handler: 'updateCurrent',
+      immediate: true
+    }
+  },
+  mounted () {
+    this.filter()
+    this.updateCurrent()
+  },
+  methods: {
+    filter () {
+      this.$refs.tree?.filter()
+    },
+    updateCurrent () {
+      (this.hover || !this.collapse) && this.$refs.tree?.setCurrentKey(this.$route.name)
+    },
+    filterMenu (_, data) {
+      if (!this.hover && this.collapse && data.path[0] !== '/') {
+        return false
+      }
+      return !data.meta?.hidden
+    },
+    checkIsRoot (data) {
+      return this.checkIsBranch(data) && data.path.split('/').length === 2
+    },
+    checkIsBranch (data) {
+      return data.children?.length > 0
+    },
+    handleNodeClick (data, node, _, e) {
+      if (!this.checkIsBranch(data)) {
+        this.$router.push({ name: data.name })
+        return
+      }
+      if (this.collapse && this.checkIsRoot(data)) {
+        this.$store.app.$patch({ sidebarCollapse: false })
+        this.$refs.tree.setCurrentKey(this.$route.name)
+      }
+    },
+    handleKeydown ($event, node, data) {
+      if ($event.key === 'Enter') {
+        this.$router.push({ name: data.name })
+      }
+    }
+  }
+}

package/packages/layout/sidebar/menu.vue

@@ -0,0 +1,106 @@
+<script>
+export { default } from './menu.js'
+</script>
+
+<template>
+  <el-tree
+    ref="tree"
+    :data="menu"
+    :props="defaultProps"
+    :filter-node-method="filterMenu"
+    node-key="name"
+    class="side-menu"
+    @node-click="handleNodeClick"
+  >
+    <template #default="{ node, data }">
+      <div :tabindex="data.tabindex" @keydown="handleKeydown($event, node, data)">
+        <slot v-if="collapse && checkIsRoot(data)" name="root-menu" :node="node" :data="data" />
+        <Item v-else :node="node" :data="data" :hover="hover" />
+      </div>
+    </template>
+  </el-tree>
+</template>
+
+<style lang="scss">
+.side-menu {
+  min-width: 100%;
+  max-height: 100vh;
+  overflow-y: auto;
+  display: inline-block !important;
+  background-color: var(--x-sidebar-bg-color);
+  color: #a0aaaa;
+  .el-tree-node__expand-icon {
+    display: none;
+  }
+  .el-tree-node__content {
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+  }
+  .el-tree-node__chilren,
+  .el-tree-node__content {
+    background-color: transparent !important;
+  }
+  .el-tree-node {
+    &.is-current {
+      background-color: var(--x-sidebar-current-bg-color);
+      .menu-item {
+        color: var(--x-sidebar-current-text-color);
+      }
+    }
+    &.is-expanded .el-tree-node__content:hover, &:not(.is-expanded):hover {
+      background-color: var(--x-sidebar-hover-bg-color) !important;
+      .menu-item {
+        color: var(--x-sidebar-current-text-color);
+        animation-name: tick;
+        animation-duration: 0.3s;
+        @keyframes tick {
+          0% {
+            left: 0;
+          }
+          50% {
+            left: 10px;
+          }
+          100% {
+            left: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .menu-item {
+    width: 100%;
+    justify-content: start;
+    padding: 0 10px 0 22px;
+    color: var(--x-sidebar-text-color);
+    &.branch {
+      padding-left: 22px;
+    }
+  }
+  .icon {
+    font-size: 20px;
+    margin-right: 10px;
+  }
+  .arrow-toggle {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: #e0eeee;
+  }
+}
+.mobile {
+  .side-menu {
+    .menu-item {
+      padding-left: 0;
+      &.branch {
+        padding-left: 0;
+      }
+    }
+    .arrow-toggle {
+      top: 0.48rem;
+      right: 0;
+    }
+  }
+}
+</style>

package/packages/layout/sidebar/sidebar.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import store from '@/store'
+import Menu from './menu.vue'
+import Item from './item.vue'
+
+const props = defineProps({ menu: Array })
+const route = useRoute()
+const hoverMenu = ref(null)
+
+const { app, routes } = store
+
+const collapse = computed(() => app.sidebarCollapse)
+const toggled = computed(() => app.sidebarToggled)
+const toggleDuration = computed(() => app.toggleDuration + 's')
+
+const _menu = computed(() => {
+  const filtered = routes.enabledRoutes.filter(route => {
+    return !route.meta.hidden && route.path.split('/').length === 2
+  })
+  setTabIndex(filtered)
+  return filtered
+})
+
+const setTabIndex = (menu, start = 1) => {
+  menu.forEach(ele => {
+    ele.tabindex = start ++
+    if (ele.children?.length) {
+      start = setTabIndex(ele.children, start)
+    }
+  })
+  return start
+}
+
+const menu = computed(() => props.menu || _menu.value)
+
+const sidebarClasses = computed(() => ({
+  collapse: collapse.value,
+  expand: !collapse.value,
+  collapsing: toggled.value && collapse.value,
+  expanding: toggled.value && !collapse.value,
+  mobile: app.isMobile
+}))
+
+const onPopoverShow = () => hoverMenu.value.updateCurrent()
+
+</script>
+
+<template>
+  <el-aside class="sidebar" :class="sidebarClasses">
+    <router-link :to="{ path: '/' }" class="logo-name flex-center">
+      <img src="/logo.png" alt="logo" class="logo" />
+      <span v-show="!collapse" class="site-name">{{ app.sitename }}</span>
+    </router-link>
+    <el-scrollbar>
+      <Menu :menu="menu">
+        <template #root-menu="{ node, data }">
+          <el-popover
+            placement="right"
+            :width="200"
+            trigger="hover"
+            popper-class="menu-popover"
+            @show="onPopoverShow"
+          >
+            <template #reference>
+              <Item :data="data" />
+            </template>
+            <Menu ref="hoverMenu" :menu="data.children" :hover="true" />
+          </el-popover>
+        </template>
+      </Menu>
+    </el-scrollbar>
+  </el-aside>
+</template>
+
+<style lang="scss" scoped>
+.sidebar {
+  position: relative;
+  background-color: var(--x-sidebar-bg-color);
+  color: white;
+  overflow-x: hidden;
+  animation-duration: v-bind('toggleDuration');
+  font-size: 15px;
+  &.expand {
+    width: var(--x-sidebar-width);
+  }
+  &.collapse {
+    width: var(--x-sidebar-collapse-width);
+  }
+  &.expanding {
+    animation-name: expanding;
+  }
+  &.collapsing {
+    animation-name: collapsing;
+  }
+  .logo-name {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: var(--x-sidebar-bg-color);
+    width: var(--x-sidebar-width);
+    height: var(--x-header-height);
+    line-height: var(--x-header-height);
+    z-index: 100;
+    font-weight: 600;
+    font-style: italic;
+    font-size: 18px;
+    color: white;
+    justify-content: start;
+    border-bottom: 1px solid #409eff;
+    .logo {
+      height: 80%;
+      margin: 10% 10px;
+    }
+  }
+  .el-scrollbar {
+    width: 100%;
+    padding-top: var(--x-header-height);
+  }
+}
+
+@keyframes expanding {
+  0% {
+    width: var(--x-sidebar-collapse-width);
+  }
+  100% {
+    width: var(--x-sidebar-width);
+  }
+}
+
+@keyframes collapsing {
+  0% {
+    width: var(--x-sidebar-width);
+  }
+  100% {
+    width: var(--x-sidebar-collapse-width);
+  }
+}
+</style>
+
+<style lang="scss">
+.menu-popover {
+  padding: 0 !important;
+}
+</style>