kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mod: conflict resolution

This commit is contained in:
kailong321200875 2022-04-08 19:39:36 +08:00
parent 87d3078941 f8c9d54687
commit 47edf7b270
25 changed files with 1252 additions and 817 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
CHANGELOG.md
View File

@ -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. 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 ### 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)) - 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))
### [1.1.13](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.12...v1.1.13) (2022-03-17) - 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))
### 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)
### [1.2.3](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.2.2...v1.2.3) (2022-03-31)
### Bug Fixes ### 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 refresh with query ([e94020f](https://github.com/kailong321200875/vue-element-plus-admin/commit/e94020ff541a061599486c0003258f1dbf13aba8))
* 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) ### [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 ### Build System
* update plugins ([0b525c8](https://github.com/kailong321200875/vue-element-plus-admin/commit/0b525c875075a28288e92243b205b337f85ab550)) - update plugins ([0c7276f](https://github.com/kailong321200875/vue-element-plus-admin/commit/0c7276feadaedef83e6a4ad9d457e26d408698a8))
### [1.1.9](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.8...v1.1.9) (2022-03-07) ## [1.2.0](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.14...v1.2.0) (2022-03-27)
### Features
### Build System - 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))
* 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 ### Docs
* update changelog ([bf09441](https://github.com/kailong321200875/vue-element-plus-admin/commit/bf09441852e59b0d07d4949a33de75958696817f)) - 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 ([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.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 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))
### [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))
### [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))
### [1.1.7](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.6...v1.1.7) (2022-03-06) ### [1.1.7](https://github.com/kailong321200875/vue-element-plus-admin/compare/v1.1.6...v1.1.7) (2022-03-06)

18
mock/role/index.ts
View File

@ -249,6 +249,22 @@ const adminList = [
meta: { meta: {
title: 'router.infotip' 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/qrcode',
'/components/highlight', '/components/highlight',
'/components/infotip', '/components/infotip',
'/Components/InputPassword',
'/Components/Sticky',
'/hooks', '/hooks',
'/hooks/useWatermark', '/hooks/useWatermark',
'/level', '/level',

50
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-element-plus-admin", "name": "vue-element-plus-admin",
"version": "1.1.14", "version": "1.2.4",
"description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案。", "description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案。",
"author": "Archer <502431556@qq.com>", "author": "Archer <502431556@qq.com>",
"private": false, "private": false,
@ -27,22 +27,22 @@
"plop": "plop" "plop": "plop"
}, },
"dependencies": { "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", "@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", "animate.css": "^4.1.1",
"axios": "^0.26.1", "axios": "^0.26.1",
"echarts": "^5.3.1", "echarts": "^5.3.2",
"echarts-wordcloud": "^2.0.0", "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", "lodash-es": "^4.17.21",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.0.12", "pinia": "^2.0.13",
"pinia-plugin-persist": "^1.0.0", "pinia-plugin-persist": "^1.0.0",
"qrcode": "^1.5.0", "qrcode": "^1.5.0",
"qs": "^6.10.3", "qs": "^6.10.3",
@ -55,43 +55,43 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^16.2.3", "@commitlint/cli": "^16.2.3",
"@commitlint/config-conventional": "^16.2.1", "@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", "@purge-icons/generated": "^0.8.1",
"@types/intro.js": "^3.0.2", "@types/intro.js": "^3.0.2",
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.6",
"@types/node": "^17.0.21", "@types/node": "^17.0.23",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2", "@types/qrcode": "^1.4.2",
"@types/qs": "^6.9.7", "@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", "autoprefixer": "^10.4.4",
"commitizen": "^4.2.4", "commitizen": "^4.2.4",
"eslint": "^8.11.0", "eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-define-config": "^1.3.0", "eslint-define-config": "^1.3.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.5.0", "eslint-plugin-vue": "^8.6.0",
"husky": "^7.0.4", "husky": "^7.0.4",
"less": "^4.1.2", "less": "^4.1.2",
"lint-staged": "^12.3.6", "lint-staged": "^12.3.7",
"postcss": "^8.4.12", "postcss": "^8.4.12",
"postcss-html": "^1.3.0", "postcss-html": "^1.3.0",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"prettier": "^2.6.0", "prettier": "^2.6.2",
"pretty-quick": "^3.1.3", "pretty-quick": "^3.1.3",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"stylelint": "^14.6.0", "stylelint": "^14.6.1",
"stylelint-config-html": "^1.0.0", "stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^25.0.0", "stylelint-config-standard": "^25.0.0",
"stylelint-order": "^5.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-eslint": "^1.3.0",
"vite-plugin-html": "^3.2.0", "vite-plugin-html": "^3.2.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
@ -99,7 +99,7 @@
"vite-plugin-style-import": "^1.4.1", "vite-plugin-style-import": "^1.4.1",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-windicss": "^1.8.3", "vite-plugin-windicss": "^1.8.3",
"vue-tsc": "^0.33.2", "vue-tsc": "^0.33.9",
"windicss": "^3.5.1", "windicss": "^3.5.1",
"windicss-analysis": "^0.3.5", "windicss-analysis": "^0.3.5",
"plop": "^3.0.5" "plop": "^3.0.5"

1455
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

3
src/components/ContentDetailWrap/index.ts Normal file
View File

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

59
src/components/ContentDetailWrap/src/ContentDetailWrap.vue Normal file
View File

@ -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>

2
src/components/Dialog/src/Dialog.vue
View File

@ -73,7 +73,7 @@ const dialogStyle = computed(() => {
</slot> </slot>
<Icon <Icon
v-if="fullscreen" 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'" :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
color="var(--el-color-info)" color="var(--el-color-info)"
@click="toggleFull" @click="toggleFull"

2
src/components/InputPassword/src/InputPassword.vue
View File

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

2
src/components/SizeDropdown/src/SizeDropdown.vue
View File

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

3
src/components/Sticky/index.ts Normal file
View File

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

141
src/components/Sticky/src/Sticky.vue Normal file
View File

@ -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>

5
src/components/TagsView/src/TagsView.vue
View File

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

2
src/components/UserInfo/src/UserInfo.vue
View File

@ -49,7 +49,7 @@ const toDocument = () => {
<img <img
src="@/assets/imgs/avatar.jpg" src="@/assets/imgs/avatar.jpg"
alt="" 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> <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">Archer</span>
</div> </div>

32
src/hooks/web/useTable.ts
View File

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

14
src/locales/en.ts
View File

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

14
src/locales/zh-CN.ts
View File

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

16
src/router/index.ts
View File

@ -300,6 +300,22 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
meta: { meta: {
title: t('router.infotip') 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')
}
} }
] ]
}, },

13
src/views/Components/Icon.vue
View File

@ -12,6 +12,11 @@ const keyClick = (key: string) => {
window.open('https://iconify.design/') 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> </script>
<template> <template>
@ -48,10 +53,10 @@ const keyClick = (key: string) => {
</ContentWrap> </ContentWrap>
<ContentWrap title="useIcon"> <ContentWrap title="useIcon">
<div class="flex justify-between"> <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> </div>
</ContentWrap> </ContentWrap>
</template> </template>

21
src/views/Components/InputPassword.vue Normal file
View File

@ -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>

62
src/views/Components/Sticky.vue Normal file
View File

@ -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>

4
src/views/Example/Dialog/ExampleDialog.vue
View File

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

11
src/views/Example/Page/ExampleAdd.vue
View File

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

11
src/views/Example/Page/ExampleDetail.vue
View File

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

11
src/views/Example/Page/ExampleEdit.vue
View File

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

4
src/views/Example/Page/ExamplePage.vue
View File

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