adtec-core-package 0.0.2 → 0.0.4

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "adtec-core-package",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "type": "module",
-  "main": "dist/adtec-core-package.umd.cjs",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -16,7 +15,12 @@
   "dependencies": {
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "element-plus": "^2.8.7",
+    "scss": "^0.2.4",
+    "scss-loader": "^0.0.1",
+    "axios": "^1.7.7",
+    "@element-plus/icons-vue": "^2.3.1"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
@@ -27,13 +31,15 @@
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.14.0",
+
     "eslint-plugin-vue": "^9.30.0",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.3.3",
     "typescript": "~5.6.3",
     "vite": "^6.0.5",
     "vite-plugin-vue-devtools": "^7.6.8",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.1.10",
+    "less": "^4.2.0"
   },
   "description": "This template should help get you started developing with Vue 3 in Vite.",
   "main": "eslint.config.js",

package/src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
@@ -8,8 +7,6 @@ import HelloWorld from './components/HelloWorld.vue'
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>

package/src/assets/base.css

@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

package/src/assets/main.css

@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

package/src/components/ElFlex/ElFlex.vue

@@ -0,0 +1,297 @@
+<!--创建人 丁盼-->
+<!--说明: ElFlex-->
+<!--创建时间: 2024/9/5 下午3:15-->
+<!--修改时间: 2024/9/5 下午3:15-->
+<template>
+  <div :style="getStyleComp" ref="ref_div">
+    <slot />
+    <div
+      draggable="false"
+      style="
+        position: absolute;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+      "
+      :style="{
+        bottom: bottomComputed,
+        right: rightComuted,
+      }"
+      ref="ref_div_resizable"
+      @mousemove="handleMouseMove"
+      v-if="resizable"
+    >
+      <el-icons
+        v-if="parent?.props.vertical + '' === 'true'"
+        model-value="adtec-upanddownpull"
+        style="cursor: pointer; font-size: 32px; color: #cccccc"
+      ></el-icons>
+      <el-icons
+        v-else
+        model-value="adtec-aboutpull"
+        style="cursor: pointer; font-size: 32px; color: #cccccc"
+      ></el-icons>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  alignItemsEnum,
+  flexWrapEnum,
+  gapEnum,
+  justifyContentEnum,
+} from '@/interface/enum/FlexEnum.ts'
+import { computed, nextTick, onMounted, ref, watch, getCurrentInstance } from 'vue'
+import { useMousePressed } from '@vueuse/core'
+import ElIcons from '@/components/icon/ElIcons.vue'
+const instance = getCurrentInstance()
+const parent = instance?.parent
+const ref_div = ref()
+const ref_div_resizable = ref()
+const { pressed } = useMousePressed({ target: ref_div_resizable })
+const divWidth = ref('')
+const divHeight = ref('')
+const bottomComputed = computed(() => {
+  if (parent?.props.vertical + '' === 'true') {
+    return '0px'
+  } else {
+    return '50%'
+  }
+})
+const rightComuted = computed(() => {
+  if (parent?.props.vertical + '' === 'true') {
+    return '50%'
+  } else {
+    return '0px'
+  }
+})
+watch(pressed, (val) => {
+  if (!val) {
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+})
+const handleMouseMove = (e: any) => {
+  if (pressed.value) {
+    const disX = e.clientX - ref_div.value?.offsetLeft
+    const disY = e.clientY - ref_div.value?.offsetTop
+    const layoutWidth = ref_div.value?.clientWidth
+    const layoutHeight = ref_div.value?.clientHeight
+    document.onmousemove = (e) => {
+      document.body.style.cursor = 'pointer'
+      // 鼠标按下并移动的事件
+      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+      const left = e.screenX - disX
+      const top = e.clientY - disY
+      if (parent?.props.vertical) {
+        let after = layoutHeight + top
+        after = after <= 8 ? 8 : after
+        if (after < parseInt((props.minHeight + '').replace('px', ''))) {
+          after = parseInt((props.minHeight + '').replace('px', ''))
+        }
+        nextTick(() => {
+          divHeight.value = after + 'px'
+        })
+      } else {
+        let after = layoutWidth + left
+        after = after <= 8 ? 8 : after
+        if (after < parseInt((props.minWidth + '').replace('px', ''))) {
+          after = parseInt((props.minWidth + '').replace('px', ''))
+        }
+        nextTick(() => {
+          divWidth.value = after + 'px'
+        })
+      }
+    }
+    document.onmouseup = () => {
+      document.body.style.cursor = 'default'
+      document.onmousemove = null
+      document.onmouseup = null
+    }
+  }
+}
+const flexShrinkComp = computed(() => {
+  return (divHeight.value + '').indexOf('px') > -1 || (divWidth.value + '').indexOf('px') > -1
+    ? '0'
+    : 'initial'
+  // return (props.height+'').indexOf('px') > -1 || (props.width+'').indexOf('px') > -1 ? '0' : 'initial'
+})
+const heightComp = computed(() => {
+  return divHeight.value
+})
+const widthComp = computed(() => {
+  return divWidth.value
+})
+const getStyleComp = computed(() => {
+  const style = {
+    display: 'flex',
+    flexDirection: verticalComputed.value ? 'column' : 'row',
+    justifyContent: props.justify + '',
+    alignItems: props.align + '',
+    gap: props.gap + '',
+    flexWrap: props.flexWrap + '',
+    flexGrow: props.flexGrow ? props.flexGrow : 0,
+    height: heightComp.value,
+    width: widthComp.value,
+    flex: getFlex(),
+    overflow: 'auto',
+    boxSizing: 'border-box',
+    minWidth: props.minWidth ? props.minWidth : '',
+    flexShrink: flexShrinkComp.value,
+  }
+  if (props.resizable) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-expect-error
+    style.position = 'relative'
+  }
+  return style
+})
+
+const getFlex = () => {
+  let v = '0 0'
+  if ((widthComp.value + '').indexOf('px') > -1) {
+    v += ' ' + widthComp.value
+  } else {
+    v += ' 0'
+  }
+  if ((heightComp.value + '').indexOf('px') > -1) {
+    v += ' ' + heightComp.value
+  } else {
+    v += ' 0'
+  }
+  return v
+}
+onMounted(() => {
+  divWidth.value = props.width ? props.width + '' : '100%'
+  divHeight.value = props.height ? props.height + '' : '100%'
+})
+const verticalComputed = computed(() => {
+  if (typeof props.vertical === 'string') {
+    return Boolean(props.vertical)
+  } else {
+    return props.vertical
+  }
+})
+
+const props = defineProps({
+  /**
+   * @type boolean|String
+   * @default false
+   * @description 横向布局
+   */
+  //@ts-ignore
+  vertical: {
+    type: [Boolean, String],
+    default: false,
+  },
+  /**
+   * @type {"flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly"}
+   * @default 'flex-start'
+   * @description 横向对齐方式
+   */
+  justify: {
+    type: [justifyContentEnum, String],
+    default: 'flex-start',
+    validator: (value: string) =>
+      [
+        'flex-start',
+        'center',
+        'flex-end',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ].includes(value),
+  },
+  /**
+   * @type {"flex-start" | "center" | "flex-end" }
+   * @default 'flex-start'
+   * @description 纵向对齐方式
+   */
+  align: {
+    type: [alignItemsEnum, String],
+    default: 'flex-start',
+    validator: (value: string) => ['flex-start', 'center', 'flex-end'].includes(value),
+  },
+  /**
+   * @type {"8px" | "16px" | "24px" }
+   * @description 间距
+   */
+  gap: {
+    type: [gapEnum, String],
+  },
+  /**
+   * @type {"nowrap" | "wrap" | "wrap-reverse" }
+   * @default 'nowrap'
+   * @description 是否换行
+   */
+  flexWrap: {
+    type: [flexWrapEnum, String],
+    default: 'nowrap',
+    validator: (value: string) => ['nowrap', 'wrap', 'wrap-reverse'].includes(value),
+  },
+  /**
+   * @type
+   * @default 0
+   * @description 尺寸
+   */
+  flexGrow: {
+    type: [Number, String],
+    default: 0,
+  },
+  /**
+   * @type
+   * @default '100%'
+   * @description 宽度
+   */
+  width: {
+    type: [String],
+    default: '100%',
+  },
+  /**
+   * @type
+   * @default '100%'
+   * @description 高度
+   */
+  height: {
+    type: [String],
+    default: '100%',
+  },
+  /**
+   * @type
+   * @default ''
+   * @description 最小宽度
+   */
+  minWidth: {
+    type: [String],
+    default: '',
+  },
+  /**
+   * @type
+   * @default ''
+   * @description 最小高度
+   */
+  minHeigth: {
+    type: [String],
+    default: '',
+  },
+  /**
+   * @type
+   * @default false
+   * @description 可拖拽
+   */
+  resizable: {
+    type: [Boolean, String],
+    default: false,
+  },
+  flexShrink: {
+    type: [String],
+    default: 'initial',
+  },
+})
+watch(props, (val) => {
+  divWidth.value = val.width + '' ? val.width + '' : '100%'
+  divHeight.value = val.height + '' ? val.height + '' : '100%'
+})
+</script>
+<style scoped lang="scss"></style>

package/src/components/OperationAuth/operationAuth.vue

@@ -0,0 +1,26 @@
+<!--创建人：丁盼-->
+<!--说明: 操作权限控制组件-->
+<!--创建时间: 2024/8/29 下午2:31-->
+<!--修改时间: 2024/8/29 下午2:31-->
+<template>
+  <slot v-if="IsOperationAuth()"></slot>
+</template>
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import type { ISysMenuInfoVo } from '@/interface/ISysMenuInfoVo.ts'
+const route = useRoute()
+
+const IsOperationAuth = () => {
+  const data: ISysMenuInfoVo = route.meta.sysMenuData as ISysMenuInfoVo
+  const o = data.operation.find((c) => c.code === props.operCode)
+  if (o) {
+    return true
+  } else {
+    return false
+  }
+}
+const props = defineProps<{
+  operCode: string
+}>()
+</script>
+<style scoped lang="scss"></style>