twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-30 09:24:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 样式优化

Browse Source
This commit is contained in:
xiaoxian521 2022-12-03 01:28:50 +08:00
parent 1ef6ce70db
commit 17936d476c
4 changed files with 65 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

@ -35,7 +35,7 @@
"@logicflow/core": "^1.1.30",
"@logicflow/extension": "^1.1.30",
"@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^1.8.1",
"@pureadmin/table": "^1.8.2",
"@pureadmin/utils": "^1.7.1",
"@vueuse/core": "^9.6.0",
"@vueuse/motion": "2.0.0-beta.12",
@ -56,27 +56,27 @@
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"md-editor-v3": "^2.4.2",
"md-editor-v3": "^2.5.0",
"mitt": "^3.0.0",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"pinia": "^2.0.26",
"pinia": "^2.0.27",
"qrcode": "^1.5.1",
"qs": "^6.11.0",
"responsive-storage": "^2.1.0",
"sortablejs": "^1.15.0",
"swiper": "^8.4.4",
"swiper": "^8.4.5",
"typeit": "^8.7.0",
"v-contextmenu": "3.0.0",
"vue": "^3.2.45",
"vue-i18n": "^9.2.2",
"vue-json-pretty": "^2.2.2",
"vue-pdf-embed": "^1.1.4",
"vue-json-pretty": "^2.2.3",
"vue-pdf-embed": "^1.1.5",
"vue-router": "^4.1.6",
"vue-types": "^4.2.1",
"vue-virtual-scroller": "^2.0.0-alpha.1",
"vue3-danmaku": "^1.0.0",
"vue3-danmaku": "^1.1.0",
"vuedraggable": "^4.1.0",
"vxe-table": "^4.3.6",
"xe-utils": "^3.5.7",

32
pnpm-lock.yaml generated
View File

@ -14,7 +14,7 @@ specifiers:
"@logicflow/core": ^1.1.30
"@logicflow/extension": ^1.1.30
"@pureadmin/descriptions": ^1.1.0
"@pureadmin/table": ^1.8.1
"@pureadmin/table": ^1.8.2
"@pureadmin/theme": ^2.4.0
"@pureadmin/utils": ^1.7.1
"@types/element-resize-detector": 1.1.3
@ -62,13 +62,13 @@ specifiers:
lodash: ^4.17.21
lodash-es: ^4.17.21
lodash-unified: ^1.0.2
md-editor-v3: ^2.4.2
md-editor-v3: ^2.5.0
mitt: ^3.0.0
mockjs: ^1.1.0
nprogress: ^0.2.0
path: ^0.12.7
picocolors: ^1.0.0
pinia: ^2.0.26
pinia: ^2.0.27
postcss: ^8.4.18
postcss-html: ^1.5.0
postcss-import: ^15.0.0
@ -90,7 +90,7 @@ specifiers:
stylelint-config-standard: ^29.0.0
stylelint-order: ^5.0.0
svgo: ^3.0.2
swiper: ^8.4.4
swiper: ^8.4.5
tailwindcss: ^3.2.4
terser: ^5.15.1
typeit: ^8.7.0
@ -106,13 +106,13 @@ specifiers:
vue: ^3.2.45
vue-eslint-parser: ^9.1.0
vue-i18n: ^9.2.2
vue-json-pretty: ^2.2.2
vue-pdf-embed: ^1.1.4
vue-json-pretty: ^2.2.3
vue-pdf-embed: ^1.1.5
vue-router: ^4.1.6
vue-tsc: ^1.0.9
vue-types: ^4.2.1
vue-virtual-scroller: ^2.0.0-alpha.1
vue3-danmaku: ^1.0.0
vue3-danmaku: ^1.1.0
vuedraggable: ^4.1.0
vxe-table: ^4.3.6
xe-utils: ^3.5.7
@ -126,7 +126,7 @@ dependencies:
"@logicflow/core": 1.1.31
"@logicflow/extension": 1.1.31
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
"@pureadmin/table": 1.8.1_element-plus@2.2.26
"@pureadmin/table": 1.8.2_element-plus@2.2.26
"@pureadmin/utils": 1.7.1_aotapuqn7htzdjltsyimavekky
"@vueuse/core": 9.6.0_vue@3.2.45
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
@ -147,7 +147,7 @@ dependencies:
lodash: 4.17.21
lodash-es: 4.17.21
lodash-unified: 1.0.3_3ib2ivapxullxkx3xftsimdk7u
md-editor-v3: 2.4.2
md-editor-v3: 2.5.0
mitt: 3.0.0
mockjs: 1.1.0
nprogress: 0.2.0
@ -167,7 +167,7 @@ dependencies:
vue-router: 4.1.6_vue@3.2.45
vue-types: 4.2.1_vue@3.2.45
vue-virtual-scroller: 2.0.0-beta.3_vue@3.2.45
vue3-danmaku: 1.0.0_vue@3.2.45
vue3-danmaku: 1.1.0_vue@3.2.45
vuedraggable: 4.1.0_vue@3.2.45
vxe-table: 4.3.6_vue@3.2.45+xe-utils@3.5.7
xe-utils: 3.5.7
@ -1277,10 +1277,10 @@ packages:
vue: 3.2.45
dev: false
/@pureadmin/table/1.8.1_element-plus@2.2.26:
/@pureadmin/table/1.8.2_element-plus@2.2.26:
resolution:
{
integrity: sha512-oZ5GYmLTDgQ64U6+yKFjvpZG2Seuudk3hOWnUogMvKxhIvaRQsGBHbvyg47asMmXxUyeilq+nRumyuiuV7WJTg==
integrity: sha512-FGh1aOfgQtX16pCnP+bxg49TetcZDhdykIue0m5d8NIj6zkvJP53JU+DkUpvqvKmUiMsvIwme6e17BLZMmMiOw==
}
peerDependencies:
element-plus: ^2.0.0
@ -5895,10 +5895,10 @@ packages:
}
dev: true
/md-editor-v3/2.4.2:
/md-editor-v3/2.5.0:
resolution:
{
integrity: sha512-qVbvfIifrXwfi9In8l14nW+A5MXaE9UxN7d+Iw2QtXFV0kaDfS5H2Z5kMeVP61GaLLkdbOi4GCt0X2izZ0rdJw==
integrity: sha512-qB6w4jQU7uItAcJYuG/JaFVLDWZ2NgegLsCHNeQV5R1CgMC8MKJYcFxMpCDf8YNRMrN9zK0Kd+grYp1rq4KhNw==
}
engines: { node: ">=12.0.0" }
dev: false
@ -8862,10 +8862,10 @@ packages:
"@vue/server-renderer": 3.2.45_vue@3.2.45
"@vue/shared": 3.2.45
/vue3-danmaku/1.0.0_vue@3.2.45:
/vue3-danmaku/1.1.0_vue@3.2.45:
resolution:
{
integrity: sha512-1DVPQeQBdv/iGyuumebZLKPHcfvSgPwxe/ExKF1jc/dJ3MINbXkw23iIajE8JKNvttagOX7eZnuwWnQ4ug8pqg==
integrity: sha512-8I+WOC8/79I2/8PRZ2fPIPd45pM4G3l7SkS9l8IvdpFjf2CzZgAp5rF+5BMcURDQu0ckVVYSmUb6TU0r0YJ3LQ==
}
peerDependencies:
vue: ^3.0.0

37
src/layout/components/panel/index.vue
View File

@ -1,11 +1,27 @@
<script setup lang="ts">
import { ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import { ref, computed } from "vue";
import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core";
import Close from "@iconify-icons/ep/close";
const show = ref<Boolean>(false);
const target = ref(null);
const show = ref<Boolean>(false);
const iconClass = computed(() => {
return [
"mr-[20px]",
"outline-none",
"width-[20px]",
"height-[20px]",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",
"hover:bg-[#0000000f]",
"dark:hover:bg-[#ffffff1f]",
"dark:hover:text-[#ffffffd9]"
];
});
onClickOutside(target, (event: any) => {
if (event.clientX > target.value.offsetLeft) return;
show.value = false;
@ -23,9 +39,11 @@ emitter.on("openPanel", () => {
<div class="right-panel-items">
<div class="project-configuration">
<h4 class="dark:text-white">项目配置</h4>
<span title="关闭配置">
<span title="关闭配置" :class="iconClass">
<IconifyIconOffline
class="dark:text-white"
width="20px"
height="20px"
:icon="Close"
@click="show = !show"
/>
@ -69,7 +87,6 @@ emitter.on("openPanel", () => {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
// background: #fff;
z-index: 40000;
}
@ -125,16 +142,6 @@ emitter.on("openPanel", () => {
align-items: center;
top: 15px;
margin-left: 10px;
svg {
font-size: 20px;
margin-right: 20px;
&:hover {
cursor: pointer;
color: var(--el-color-primary);
}
}
}
:deep(.el-divider--horizontal) {

24
src/layout/components/sidebar/leftCollapse.vue
View File

@ -1,8 +1,7 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, computed } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
interface Props {
isActive: boolean;
@ -15,6 +14,22 @@ const props = withDefaults(defineProps<Props>(), {
const visible = ref(false);
const { tooltipEffect } = useNav();
const iconClass = computed(() => {
return [
"ml-4",
"mb-1",
"w-[16px]",
"h-[16px]",
"inline-block",
"align-middle",
"text-primary",
"cursor-pointer",
"duration-[360ms]",
"hover:text-primary",
"dark:hover:!text-white"
];
});
const emit = defineEmits<{
(e: "toggleClick"): void;
}>();
@ -33,8 +48,9 @@ const toggleClick = () => {
:content="props.isActive ? '点击折叠' : '点击展开'"
>
<IconifyIconOffline
:icon="props.isActive ? MenuFold : MenuUnfold"
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
:icon="MenuFold"
:class="iconClass"
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
@click="toggleClick"
@mouseenter="visible = true"
@mouseleave="visible = false"