mod: conflict resolution

CHANGELOG.md

@@ -2,55 +2,107 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [1.1.14](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.13...v1.1.14) (2022-03-22)
+### [1.2.4](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.3...v1.2.4) (2022-04-06)
+
+### Bug Fixes
 
+- add Sticky props comment ([46133b3](https://github.com/kailong321200875/vue-element-plus-admin/commit/46133b3ff39d48d11cbcaa1f20a271118f48eb29))
+- fix bug ([179ca06](https://github.com/kailong321200875/vue-element-plus-admin/commit/179ca064ba8adbb3b063d9798ec1930ccc68e459))
+- fix remove unnecessary variables ([ca01cbf](https://github.com/kailong321200875/vue-element-plus-admin/commit/ca01cbfd98b63a0d76190fe8d43097fdc9df74e6))
+- fix style ([17c8fea](https://github.com/kailong321200875/vue-element-plus-admin/commit/17c8fea93811d9d9b708808484f5c907d761fcf1))
+- remove ContentDetailWrap style ([4ceaa9d](https://github.com/kailong321200875/vue-element-plus-admin/commit/4ceaa9d7816369d0dcaf3e18e4cdbbd6165cef88))
+
+### [1.2.3](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.2...v1.2.3) (2022-03-31)
 
 ### Bug Fixes
 
-* fix the bug that the form search function is invalid of the example-dialog page ([9ec30e7](https://github.com/kailong321200875/vue-element-plus-admin/commit/9ec30e719f89865497dbb1321be1df906f59f14e))
+- fix refresh with query ([e94020f](https://github.com/kailong321200875/vue-element-plus-admin/commit/e94020ff541a061599486c0003258f1dbf13aba8))
 
-### [1.1.13](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.12...v1.1.13) (2022-03-17)
+### [1.2.2](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.1...v1.2.2) (2022-03-30)
+
+### Bug Fixes
+
+- fix avatar height bug ([cd4ab76](https://github.com/kailong321200875/vue-element-plus-admin/commit/cd4ab767018941777174d7837045f5259d1cc403))
+- fix parmas to params ([2c7211c](https://github.com/kailong321200875/vue-element-plus-admin/commit/2c7211c89d7299ffc0a36bef8999b3c201dbaf4a))
+
+### [1.2.1](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.0...v1.2.1) (2022-03-29)
+
+### Bug Fixes
 
+- fix invalid paging ([ad184ee](https://github.com/kailong321200875/vue-element-plus-admin/commit/ad184ee9c0619da36f1ca3f26e67f18f88488523))
 
 ### Build System
 
-* update plugins ([a2d0313](https://github.com/kailong321200875/vue-element-plus-admin/commit/a2d03137899f9b16fc1d4a09a23576cd74e7950e))
+- update plugins ([0c7276f](https://github.com/kailong321200875/vue-element-plus-admin/commit/0c7276feadaedef83e6a4ad9d457e26d408698a8))
 
-### [1.1.12](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.11...v1.1.12) (2022-03-15)
+## [1.2.0](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.14...v1.2.0) (2022-03-27)
+
+### Features
+
+- add hooks demo ([c43f39e](https://github.com/kailong321200875/vue-element-plus-admin/commit/c43f39efef296266c64cc24690717d07fa0bcb85))
+- add inputPassword demo ([8f8b126](https://github.com/kailong321200875/vue-element-plus-admin/commit/8f8b1260e75df6998ebea617f62d4ab6be81d721))
+
+### Docs
+
+- update LICENSE ([69d3dcc](https://github.com/kailong321200875/vue-element-plus-admin/commit/69d3dcc7edf69e9b4e3042ddb11faa85ec7d39e2))
+
+### Styling
+
+- modify the function name to make it more semantic ([046ae51](https://github.com/kailong321200875/vue-element-plus-admin/commit/046ae512f02df2d3f08134949b9376a061c1eef3))
+- update Footer component presentation ([d4a9ba3](https://github.com/kailong321200875/vue-element-plus-admin/commit/d4a9ba3aa6758b8aac18b30e1a6b9501baff826c))
+- update Icon demo ([8597122](https://github.com/kailong321200875/vue-element-plus-admin/commit/85971227cd3055ea280cf493c7c42b250c1515da))
 
+### Tests
+
+- test push first commit ([a67bb48](https://github.com/kailong321200875/vue-element-plus-admin/commit/a67bb48f269651a2dcd01b9e33d10f20c42d76ee))
 
 ### Build System
 
-* update plugins ([fee2252](https://github.com/kailong321200875/vue-element-plus-admin/commit/fee2252930b05b709d0c012e809568c4ed32bd89))
+- update plugins ([9c13d92](https://github.com/kailong321200875/vue-element-plus-admin/commit/9c13d92b36a2a7c95b9edb7821367fc8f0ac6658))
+- update server port ([d2be8c1](https://github.com/kailong321200875/vue-element-plus-admin/commit/d2be8c1a307a3c5daf363bd7f1d21e574598de5c))
 
-### [1.1.11](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.10...v1.1.11) (2022-03-15)
+### [1.1.14](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.13...v1.1.14) (2022-03-22)
+
+### Bug Fixes
+
+- fix the bug that the form search function is invalid of the example-dialog page ([9ec30e7](https://github.com/kailong321200875/vue-element-plus-admin/commit/9ec30e719f89865497dbb1321be1df906f59f14e))
+
+### [1.1.13](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.12...v1.1.13) (2022-03-17)
+
+### Build System
 
+- update plugins ([a2d0313](https://github.com/kailong321200875/vue-element-plus-admin/commit/a2d03137899f9b16fc1d4a09a23576cd74e7950e))
+
+### [1.1.12](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.11...v1.1.12) (2022-03-15)
+
+### Build System
+
+- update plugins ([fee2252](https://github.com/kailong321200875/vue-element-plus-admin/commit/fee2252930b05b709d0c012e809568c4ed32bd89))
+
+### [1.1.11](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.10...v1.1.11) (2022-03-15)
 
 ### Bug Fixes
 
-* fix the problem of blank bar when toggle the TagsView component ([b1d9771](https://github.com/kailong321200875/vue-element-plus-admin/commit/b1d9771c750709fe45061d13299a85dbbd6ead25))
+- fix the problem of blank bar when toggle the TagsView component ([b1d9771](https://github.com/kailong321200875/vue-element-plus-admin/commit/b1d9771c750709fe45061d13299a85dbbd6ead25))
-* fix the problem that no reaction when copy setting config in http page ([61e0e33](https://github.com/kailong321200875/vue-element-plus-admin/commit/61e0e33c64d6a889fe6ed80d27a10cf8b201d21a))
+- fix the problem that no reaction when copy setting config in http page ([61e0e33](https://github.com/kailong321200875/vue-element-plus-admin/commit/61e0e33c64d6a889fe6ed80d27a10cf8b201d21a))
 
 ### [1.1.10](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.9...v1.1.10) (2022-03-13)
 
-
 ### Build System
 
-* update plugins ([0b525c8](https://github.com/kailong321200875/vue-element-plus-admin/commit/0b525c875075a28288e92243b205b337f85ab550))
+- update plugins ([0b525c8](https://github.com/kailong321200875/vue-element-plus-admin/commit/0b525c875075a28288e92243b205b337f85ab550))
 
 ### [1.1.9](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.8...v1.1.9) (2022-03-07)
 
-
 ### Build System
 
-* update plugins ([1456fd4](https://github.com/kailong321200875/vue-element-plus-admin/commit/1456fd49ec9abbfe1f25aeadfe5fed54fec07394))
+- update plugins ([1456fd4](https://github.com/kailong321200875/vue-element-plus-admin/commit/1456fd49ec9abbfe1f25aeadfe5fed54fec07394))
 
 ### [1.1.8](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.7...v1.1.8) (2022-03-07)
 
-
 ### Docs
 
-* update changelog ([bf09441](https://github.com/kailong321200875/vue-element-plus-admin/commit/bf09441852e59b0d07d4949a33de75958696817f))
+- update changelog ([bf09441](https://github.com/kailong321200875/vue-element-plus-admin/commit/bf09441852e59b0d07d4949a33de75958696817f))
 
 ### [1.1.7](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.6...v1.1.7) (2022-03-06)
 

mock/role/index.ts

@@ -249,6 +249,22 @@ const adminList = [
         meta: {
           title: 'router.infotip'
         }
+      },
+      {
+        path: 'input-password',
+        component: 'views/Components/InputPassword',
+        name: 'InputPassword',
+        meta: {
+          title: 'router.inputPassword'
+        }
+      },
+      {
+        path: 'sticky',
+        component: 'views/Components/Sticky',
+        name: 'Sticky',
+        meta: {
+          title: 'router.sticky'
+        }
       }
     ]
   },
@@ -468,6 +484,8 @@ const testList: string[] = [
   '/components/qrcode',
   '/components/highlight',
   '/components/infotip',
+  '/Components/InputPassword',
+  '/Components/Sticky',
   '/hooks',
   '/hooks/useWatermark',
   '/level',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-element-plus-admin",
-  "version": "1.1.14",
+  "version": "1.2.4",
   "description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案。",
   "author": "Archer <502431556@qq.com>",
   "private": false,
@@ -27,22 +27,22 @@
     "plop": "plop"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.1.2",
+    "@iconify/iconify": "^2.2.1",
-    "@vueuse/core": "^8.1.1",
+    "@vueuse/core": "^8.2.5",
-    "@wangeditor/editor": "^0.15.14",
+    "@wangeditor/editor": "^0.15.19",
     "@wangeditor/editor-for-vue": "^5.1.8-7",
-    "@zxcvbn-ts/core": "^2.0.0",
+    "@zxcvbn-ts/core": "^2.0.1",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
-    "echarts": "^5.3.1",
+    "echarts": "^5.3.2",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "2.1.4",
+    "element-plus": "2.1.8",
-    "intro.js": "^5.0.0",
+    "intro.js": "^5.1.0",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.12",
+    "pinia": "^2.0.13",
     "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.0",
     "qs": "^6.10.3",
@@ -55,43 +55,43 @@
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.16",
+    "@iconify/json": "^2.1.25",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
+    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
     "@purge-icons/generated": "^0.8.1",
     "@types/intro.js": "^3.0.2",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.21",
+    "@types/node": "^17.0.23",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@typescript-eslint/parser": "^5.18.0",
-    "@vitejs/plugin-vue": "^2.2.4",
+    "@vitejs/plugin-vue": "^2.3.1",
-    "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "@vitejs/plugin-vue-jsx": "^1.3.9",
     "autoprefixer": "^10.4.4",
     "commitizen": "^4.2.4",
-    "eslint": "^8.11.0",
+    "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-define-config": "^1.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "^8.6.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
-    "lint-staged": "^12.3.6",
+    "lint-staged": "^12.3.7",
     "postcss": "^8.4.12",
     "postcss-html": "^1.3.0",
     "postcss-less": "^6.0.0",
-    "prettier": "^2.6.0",
+    "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "rimraf": "^3.0.2",
-    "stylelint": "^14.6.0",
+    "stylelint": "^14.6.1",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
-    "typescript": "4.6.2",
+    "typescript": "4.6.3",
-    "unplugin-vue-define-options": "^0.4.0",
+    "unplugin-vue-define-options": "^0.6.0",
-    "vite": "2.8.6",
+    "vite": "2.9.1",
     "vite-plugin-eslint": "^1.3.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
@@ -99,7 +99,7 @@
     "vite-plugin-style-import": "^1.4.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.3",
-    "vue-tsc": "^0.33.2",
+    "vue-tsc": "^0.33.9",
     "windicss": "^3.5.1",
     "windicss-analysis": "^0.3.5",
     "plop": "^3.0.5"

src/components/ContentDetailWrap/index.ts

@@ -0,0 +1,3 @@
+import ContentDetailWrap from './src/ContentDetailWrap.vue'
+
+export { ContentDetailWrap }

src/components/ContentDetailWrap/src/ContentDetailWrap.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ElCard, ElButton } from 'element-plus'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { ref, onMounted, defineEmits } from 'vue'
+import { Sticky } from '@/components/Sticky'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-detail-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def('')
+})
+const emit = defineEmits(['back'])
+const offset = ref(85)
+const contentDetailWrap = ref()
+onMounted(() => {
+  offset.value = contentDetailWrap.value.getBoundingClientRect().top
+})
+</script>
+
+<template>
+  <div :class="[`${prefixCls}-container`, 'relative bg-[#fff]']" ref="contentDetailWrap">
+    <Sticky :offset="offset">
+      <div
+        :class="[
+          `${prefixCls}-header`,
+          'flex border-bottom-1 h-50px items-center text-center bg-white  pr-10px '
+        ]"
+      >
+        <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
+          <el-button @click="emit('back')">
+            <Icon icon="ep:arrow-left" class="mr-5px" />
+            {{ t('common.back') }}
+          </el-button>
+        </div>
+        <div :class="[`${prefixCls}-header__title`, 'flex flex-1  justify-center']">
+          <slot name="title">
+            <label class="text-16px font-700">{{ title }}</label>
+          </slot>
+        </div>
+        <div :class="[`${prefixCls}-header__right`, 'flex  pl-10px pr-10px']">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    </Sticky>
+    <div style="padding: var(--app-content-padding)">
+      <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
+        <div>
+          <slot></slot>
+        </div>
+      </ElCard>
+    </div>
+  </div>
+</template>

src/components/Dialog/src/Dialog.vue

@@ -73,7 +73,7 @@ const dialogStyle = computed(() => {
         </slot>
         <Icon
           v-if="fullscreen"
-          class="mr-15px cursor-pointer is-hover"
+          class="mr-11px cursor-pointer is-hover mt-2px"
           :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
           color="var(--el-color-info)"
           @click="toggleFull"

src/components/InputPassword/src/InputPassword.vue

@@ -85,7 +85,7 @@ const getIconName = computed(() =>
   }
 
   &__bar {
-    background-color: var(--el-text-color-disabled-base);
+    background-color: var(--el-text-color-disabled);
     border-radius: var(--el-border-radius-base);
 
     &::before,

src/components/SizeDropdown/src/SizeDropdown.vue

@@ -31,7 +31,7 @@ const setCurrentSize = (size: ElememtPlusSzie) => {
     <template #dropdown>
       <ElDropdownMenu>
         <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
-          {{ t(`size.${[item]}`) }}
+          {{ t(`size.${item}`) }}
         </ElDropdownItem>
       </ElDropdownMenu>
     </template>

src/components/Sticky/index.ts

@@ -0,0 +1,3 @@
+import Sticky from './src/Sticky.vue'
+
+export { Sticky }

src/components/Sticky/src/Sticky.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { ref, onMounted, onActivated, shallowRef } from 'vue'
+import { useEventListener, useWindowSize, isClient } from '@vueuse/core'
+import type { CSSProperties } from 'vue'
+const props = defineProps({
+  // 距离顶部或者底部的距离(单位px)
+  offset: propTypes.number.def(0),
+  // 设置元素的堆叠顺序
+  zIndex: propTypes.number.def(999),
+  // 设置指定的class
+  className: propTypes.string.def(''),
+  // 定位方式，默认为(top)，表示距离顶部位置，可以设置为top或者bottom
+  position: {
+    type: String,
+    validator: function (value: string) {
+      return ['top', 'bottom'].indexOf(value) !== -1
+    },
+    default: 'top'
+  }
+})
+const width = ref('auto' as string)
+const height = ref('auto' as string)
+const isSticky = ref(false)
+const refSticky = shallowRef<HTMLElement>()
+const scrollContainer = shallowRef<HTMLElement | Window>()
+const { height: windowHeight } = useWindowSize()
+onMounted(() => {
+  height.value = refSticky.value?.getBoundingClientRect().height + 'px'
+
+  scrollContainer.value = getScrollContainer(refSticky.value!, true)
+  useEventListener(scrollContainer, 'scroll', handleScroll)
+  useEventListener('resize', handleReize)
+  handleScroll()
+})
+onActivated(() => {
+  handleScroll()
+})
+
+const camelize = (str: string): string => {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+const getStyle = (element: HTMLElement, styleName: keyof CSSProperties): string => {
+  if (!isClient || !element || !styleName) return ''
+
+  let key = camelize(styleName)
+  if (key === 'float') key = 'cssFloat'
+  try {
+    const style = element.style[styleName]
+    if (style) return style
+    const computed = document.defaultView?.getComputedStyle(element, '')
+    return computed ? computed[styleName] : ''
+  } catch {
+    return element.style[styleName]
+  }
+}
+const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
+  if (!isClient) return false
+  const key = (
+    {
+      undefined: 'overflow',
+      true: 'overflow-y',
+      false: 'overflow-x'
+    } as const
+  )[String(isVertical)]!
+  const overflow = getStyle(el, key)
+  return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
+}
+
+const getScrollContainer = (
+  el: HTMLElement,
+  isVertical: boolean
+): Window | HTMLElement | undefined => {
+  if (!isClient) return
+  let parent = el
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) return window
+    if (isScroll(parent, isVertical)) return parent
+    parent = parent.parentNode as HTMLElement
+  }
+  return parent
+}
+
+const handleScroll = () => {
+  width.value = refSticky.value!.getBoundingClientRect().width! + 'px'
+  if (props.position === 'top') {
+    const offsetTop = refSticky.value?.getBoundingClientRect().top
+    if (offsetTop !== undefined && offsetTop < props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  } else {
+    const offsetBottom = refSticky.value?.getBoundingClientRect().bottom
+
+    if (offsetBottom !== undefined && offsetBottom > windowHeight.value - props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  }
+}
+const handleReize = () => {
+  if (isSticky.value && refSticky.value) {
+    width.value = refSticky.value.getBoundingClientRect().width + 'px'
+  }
+}
+const sticky = () => {
+  if (isSticky.value) {
+    return
+  }
+  isSticky.value = true
+}
+const reset = () => {
+  if (!isSticky.value) {
+    return
+  }
+  width.value = 'auto'
+  isSticky.value = false
+}
+</script>
+<template>
+  <div :style="{ height: height, zIndex: zIndex }" ref="refSticky">
+    <div
+      :class="className"
+      :style="{
+        top: position === 'top' ? offset + 'px' : '',
+        bottom: position !== 'top' ? offset + 'px' : '',
+        zIndex: zIndex,
+        position: isSticky ? 'fixed' : 'static',
+        width: width,
+        height: height
+      }"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>

src/components/TagsView/src/TagsView.vue

@@ -77,10 +77,11 @@ const closeOthersTags = () => {
 const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
   if (!view) return
   tagsViewStore.delCachedView()
-  const { fullPath } = view
+  const { path, query } = view
   await nextTick()
   replace({
-    path: '/redirect' + fullPath
+    path: '/redirect' + path,
+    query: query
   })
 }
 

src/components/UserInfo/src/UserInfo.vue

@@ -49,7 +49,7 @@ const toDocument = () => {
       <img
         src="@/assets/imgs/avatar.jpg"
         alt=""
-        class="w-[calc(var(--tags-view-height)-10px)] rounded-[50%]"
+        class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
       />
       <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">Archer</span>
     </div>

src/hooks/web/useTable.ts

@@ -2,7 +2,7 @@ import { Table, TableExpose } from '@/components/Table'
 import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
 import { ref, reactive, watch, computed, unref, nextTick } from 'vue'
 import { AxiosPromise } from 'axios'
-import { get, assign } from 'lodash-es'
+import { get } from 'lodash-es'
 import type { TableProps } from '@/components/Table/src/types'
 import { useI18n } from '@/hooks/web/useI18n'
 
@@ -24,7 +24,7 @@ interface TableObject<K, L> {
   currentPage: number
   total: number
   tableList: K[]
-  parmasObj: L
+  paramsObj: L
   loading: boolean
   currentRow: Nullable<K>
 }
@@ -42,23 +42,21 @@ export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
     // 表格数据
     tableList: [],
     // AxiosConfig 配置
-    parmasObj: {} as L,
+    paramsObj: {} as L,
     // 加载中
     loading: true,
     // 当前行的数据
     currentRow: null
   })
 
-  const parmasObj = computed(() => {
+  const paramsObj = computed(() => {
-    return assign(
+    return {
-      {
       params: {
+        ...tableObject.paramsObj.params,
         pageSize: tableObject.pageSize,
         pageIndex: tableObject.currentPage
       }
-      },
+    }
-      tableObject.parmasObj
-    )
   })
 
   watch(
@@ -118,14 +116,14 @@ export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
     setProps: (props: Recordable) => void
     getList: () => Promise<void>
     setColumn: (columnProps: TableSetPropsType[]) => void
-    setSearchParmas: (data: Recordable) => void
+    setSearchParams: (data: Recordable) => void
     getSelections: () => Promise<K[]>
     delList: (ids: string[] | number[], multiple: boolean, message?: boolean) => Promise<void>
   } = {
     getList: async () => {
       tableObject.loading = true
       const res = await config
-        ?.getListApi(unref(parmasObj) as L)
+        ?.getListApi(unref(paramsObj) as unknown as L)
         .catch(() => {})
         .finally(() => {
           tableObject.loading = false
@@ -148,9 +146,9 @@ export const useTable = <T, K, L extends AxiosConfig = AxiosConfig>(
       return (table?.selections || []) as K[]
     },
     // 与Search组件结合
-    setSearchParmas: (data: Recordable) => {
+    setSearchParams: (data: Recordable) => {
       tableObject.currentPage = 1
-      tableObject.parmasObj = Object.assign(tableObject.parmasObj, {
+      tableObject.paramsObj = Object.assign(tableObject.paramsObj, {
         params: {
           pageSize: tableObject.pageSize,
           pageIndex: tableObject.currentPage,

src/locales/en.ts

@@ -9,7 +9,8 @@ export default {
     loginOut: 'Login out',
     document: 'Document',
     reminder: 'Reminder',
-    loginOutMessage: 'Exit the system？',
+    loginOutMessage: 'Exit the system?',
+    back: 'Back',
     ok: 'OK',
     cancel: 'Cancel',
     reload: 'Reload current',
@@ -131,7 +132,9 @@ export default {
     authorization: 'Authorization',
     user: 'User management',
     role: 'Role management',
-    document: 'Document'
+    document: 'Document',
+    inputPassword: 'InputPassword',
+    sticky: 'Sticky'
   },
   analysis: {
     newUser: 'New user',
@@ -333,6 +336,9 @@ export default {
     center: 'center',
     right: 'right'
   },
+  stickyDemo: {
+    sticky: 'Sticky'
+  },
   tableDemo: {
     table: 'Table',
     tableDes: 'Secondary packaging of Table components based on ElementPlus',
@@ -411,5 +417,9 @@ export default {
     remark: 'Remark',
     remarkMessage1: 'Back end control routing permission',
     remarkMessage2: 'Front end control routing permission'
+  },
+  inputPasswordDemo: {
+    title: 'InputPassword',
+    inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
   }
 }

src/locales/zh-CN.ts

@@ -10,6 +10,7 @@ export default {
     document: '项目文档',
     reminder: '温馨提示',
     loginOutMessage: '是否退出本系统？',
+    back: '返回',
     ok: '确定',
     cancel: '取消',
     reload: '重新加载',
@@ -131,7 +132,9 @@ export default {
     authorization: '权限管理',
     user: '用户管理',
     role: '角色管理',
-    document: '文档'
+    document: '文档',
+    inputPassword: '密码输入框',
+    sticky: '黏性'
   },
   analysis: {
     newUser: '新增用户',
@@ -330,6 +333,9 @@ export default {
     center: '中',
     right: '右'
   },
+  stickyDemo: {
+    sticky: '黏性'
+  },
   tableDemo: {
     table: '表格',
     tableDes: '基于 ElementPlus 的 Table 组件二次封装',
@@ -374,7 +380,7 @@ export default {
   },
   descriptionsDemo: {
     descriptions: '描述',
-    descriptionsDes: '基于 ElementPlus 的 descriptions 组件二次封装',
+    descriptionsDes: '基于 ElementPlus 的 Descriptions 组件二次封装',
     username: '用户名',
     nickName: '昵称',
     phone: '联系电话',
@@ -407,5 +413,9 @@ export default {
     remark: '备注',
     remarkMessage1: '后端控制路由权限',
     remarkMessage2: '前端控制路由权限'
+  },
+  inputPasswordDemo: {
+    title: '密码输入框',
+    inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
   }
 }

src/router/index.ts

@@ -300,6 +300,22 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.infotip')
         }
+      },
+      {
+        path: 'input-password',
+        component: () => import('@/views/Components/InputPassword.vue'),
+        name: 'InputPassword',
+        meta: {
+          title: t('router.inputPassword')
+        }
+      },
+      {
+        path: 'sticky',
+        component: () => import('@/views/Components/Sticky.vue'),
+        name: 'Sticky',
+        meta: {
+          title: t('router.sticky')
+        }
       }
     ]
   },

src/views/Components/Icon.vue

@@ -12,6 +12,11 @@ const keyClick = (key: string) => {
     window.open('https://iconify.design/')
   }
 }
+
+const peoples = useIcon({ icon: 'svg-icon:peoples' })
+const money = useIcon({ icon: 'svg-icon:money' })
+const aim = useIcon({ icon: 'ep:aim' })
+const alarmClock = useIcon({ icon: 'ep:alarm-clock' })
 </script>
 
 <template>
@@ -48,10 +53,10 @@ const keyClick = (key: string) => {
   </ContentWrap>
   <ContentWrap title="useIcon">
     <div class="flex justify-between">
-      <ElButton :icon="useIcon({ icon: 'svg-icon:peoples' })">Button</ElButton>
+      <ElButton :icon="peoples">Button</ElButton>
-      <ElButton :icon="useIcon({ icon: 'svg-icon:money' })">Button</ElButton>
+      <ElButton :icon="money">Button</ElButton>
-      <ElButton :icon="useIcon({ icon: 'ep:aim' })">Button</ElButton>
+      <ElButton :icon="aim">Button</ElButton>
-      <ElButton :icon="useIcon({ icon: 'ep:alarm-clock' })">Button</ElButton>
+      <ElButton :icon="alarmClock">Button</ElButton>
     </div>
   </ContentWrap>
 </template>

src/views/Components/InputPassword.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { InputPassword } from '@/components/InputPassword'
+import { ref } from 'vue'
+
+const { t } = useI18n()
+
+const password = ref('')
+</script>
+
+<template>
+  <ContentWrap
+    :title="t('inputPasswordDemo.title')"
+    :message="t('inputPasswordDemo.inputPasswordDes')"
+  >
+    <InputPassword v-model="password" class="mb-20px" />
+    <InputPassword v-model="password" strength />
+    <InputPassword v-model="password" strength disabled class="mt-20px" />
+  </ContentWrap>
+</template>

src/views/Components/Sticky.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Sticky } from '@/components/Sticky'
+import { ElAffix } from 'element-plus'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ContentWrap :title="t('stickyDemo.sticky')">
+    <Sticky :offset="90">
+      <div style="padding: 10px; background-color: lightblue"> Sticky 距离顶部90px </div>
+    </Sticky>
+
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+
+    <el-affix :offset="150">
+      <div style="padding: 10px; background-color: lightblue">Affix 距离顶部150px </div>
+    </el-affix>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+
+    <el-affix :offset="150" position="bottom">
+      <div style="padding: 10px; background-color: lightblue">Affix 距离底部150px </div>
+    </el-affix>
+
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+
+    <Sticky :offset="90" position="bottom">
+      <div style="padding: 10px; background-color: lightblue"> Sticky 距离底部90px </div>
+    </Sticky>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+  </ContentWrap>
+</template>

src/views/Example/Dialog/ExampleDialog.vue

@@ -27,7 +27,7 @@ const { register, tableObject, methods } = useTable<
   }
 })
 
-const { getList, setSearchParmas } = methods
+const { getList, setSearchParams } = methods
 
 getList()
 
@@ -152,7 +152,7 @@ const save = async () => {
 
 <template>
   <ContentWrap>
-    <Search :schema="searchData" @search="setSearchParmas" @reset="setSearchParmas" />
+    <Search :schema="searchData" @search="setSearchParams" @reset="setSearchParams" />
 
     <div class="mb-10px">
       <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>

src/views/Example/Page/ExampleAdd.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Write from './components/Write.vue'
-import { ContentWrap } from '@/components/ContentWrap'
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref, unref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -42,14 +42,13 @@ const save = async () => {
 </script>
 
 <template>
-  <ContentWrap :title="t('exampleDemo.add')">
+  <ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page')">
     <Write ref="writeRef" />
 
-    <div class="text-center">
+    <template #right>
       <ElButton type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
       </ElButton>
-      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
+    </template>
-    </div>
+  </ContentDetailWrap>
-  </ContentWrap>
 </template>

src/views/Example/Page/ExampleDetail.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import Detail from './components/Detail.vue'
-import { ContentWrap } from '@/components/ContentWrap'
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref } from 'vue'
-import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter, useRoute } from 'vue-router'
 import { getTableDetApi } from '@/api/table'
@@ -31,11 +30,7 @@ getTableDet()
 </script>
 
 <template>
-  <ContentWrap :title="t('exampleDemo.detail')">
+  <ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
     <Detail :current-row="currentRow" />
-
+  </ContentDetailWrap>
-    <div class="text-center">
-      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
-    </div>
-  </ContentWrap>
 </template>

src/views/Example/Page/ExampleEdit.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Write from './components/Write.vue'
-import { ContentWrap } from '@/components/ContentWrap'
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref, unref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -58,14 +58,13 @@ const save = async () => {
 </script>
 
 <template>
-  <ContentWrap :title="t('exampleDemo.edit')">
+  <ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')">
     <Write ref="writeRef" :current-row="currentRow" />
 
-    <div class="text-center">
+    <template #right>
       <ElButton type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
       </ElButton>
-      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
+    </template>
-    </div>
+  </ContentDetailWrap>
-  </ContentWrap>
 </template>

src/views/Example/Page/ExamplePage.vue

@@ -32,7 +32,7 @@ const { register, tableObject, methods } = useTable<
   }
 })
 
-const { getList, setSearchParmas } = methods
+const { getList, setSearchParams } = methods
 
 getList()
 
@@ -130,7 +130,7 @@ const action = (row: TableData, type: string) => {
 
 <template>
   <ContentWrap>
-    <Search :schema="searchData" @search="setSearchParmas" @reset="setSearchParmas" />
+    <Search :schema="searchData" @search="setSearchParams" @reset="setSearchParams" />
 
     <div class="mb-10px">
       <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>