😎1、更换拖拽组件 2、优化首页组件布局
This commit is contained in:
zuohuaijun
parent
b493e1399e
commit
1978f608e3
@ -2,7 +2,7 @@
|
||||
"name": "admin.net.pro",
|
||||
"type": "module",
|
||||
"version": "2.4.33",
|
||||
"lastBuildTime": "2024.08.04",
|
||||
"lastBuildTime": "2024.08.05",
|
||||
"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",
|
||||
"author": "zuohuaijun",
|
||||
"license": "MIT",
|
||||
@ -70,12 +70,11 @@
|
||||
"vue-router": "^4.4.2",
|
||||
"vue-signature-pad": "^3.0.2",
|
||||
"vue3-tree-org": "^4.2.2",
|
||||
"vuedraggable": "4.0.3",
|
||||
"vxe-pc-ui": "^4.0.86",
|
||||
"vxe-table": "^4.7.59",
|
||||
"vxe-table-plugin-element": "^4.0.4",
|
||||
"vxe-table-plugin-export-xlsx": "^4.0.5",
|
||||
"xe-utils": "^3.5.28",
|
||||
"xe-utils": "^3.5.29",
|
||||
"xlsx-js-style": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
title: '关于项目',
|
||||
icon: 'ele-Setting',
|
||||
icon: 'ele-QuestionFilled',
|
||||
description: '点个星星支持一下',
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
title: '更新记录',
|
||||
icon: 'ele-Message',
|
||||
icon: 'ele-DocumentCopy',
|
||||
description: '当前项目更新记录',
|
||||
};
|
||||
</script>
|
||||
@ -69,4 +69,8 @@ onMounted(() => {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.commit {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="快捷入口">
|
||||
<template #header>
|
||||
<el-icon style="display: inline; vertical-align: middle"> <ele-Guide /> </el-icon>
|
||||
<span style=""> 快捷入口 </span>
|
||||
</template>
|
||||
<ul class="myMods">
|
||||
<li v-for="mod in myMods" :key="mod.path!">
|
||||
<router-link :to="{ path: mod.path! }">
|
||||
@ -17,25 +21,21 @@
|
||||
<el-drawer title="添加应用" v-model="modsDrawer" :size="520" destroy-on-close :before-close="beforeClose">
|
||||
<div class="setMods mt15">
|
||||
<h4>我的常用 ( {{ myMods.length }} )</h4>
|
||||
<draggable tag="ul" v-model="myMods" animation="200" item-key="id" group="app" class="draggable-box" force-fallback fallback-on-body>
|
||||
<template #item="{ element }">
|
||||
<li>
|
||||
<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
|
||||
<p>{{ element.meta.title }}</p>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
<VueDraggable tag="ul" v-model="myMods" :animation="200" group="app" class="draggable-box">
|
||||
<li v-for="item in myMods" :key="item.id">
|
||||
<SvgIcon :name="item.meta?.icon" style="font-size: 18px" />
|
||||
<p>{{ item.meta?.title }}</p>
|
||||
</li>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
<div class="setMods">
|
||||
<h4>全部应用 ( {{ filterMods.length }} )</h4>
|
||||
<draggable tag="ul" v-model="filterMods" animation="200" item-key="id" group="app" class="draggable-box-all" force-fallback fallback-on-body>
|
||||
<template #item="{ element }">
|
||||
<li :style="{ background: element.meta.color || '#909399' }">
|
||||
<SvgIcon :name="element.meta.icon" style="font-size: 18px" />
|
||||
<p>{{ element.meta.title }}</p>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
<VueDraggable tag="ul" v-model="filterMods" :animation="200" group="app" class="draggable-box-all">
|
||||
<li v-for="item in filterMods" :key="item.id" :style="{ background: '#909399' }">
|
||||
<SvgIcon :name="item.meta?.icon" style="font-size: 18px" />
|
||||
<p>{{ item.meta?.title }}</p>
|
||||
</li>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div style="margin: 0 20px 20px 0">
|
||||
@ -50,17 +50,17 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
title: '快捷入口',
|
||||
icon: 'ele-Monitor',
|
||||
icon: 'ele-Guide',
|
||||
description: '可以配置的快捷入口',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" name="myapp">
|
||||
import { reactive, onMounted, ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import draggable from 'vuedraggable';
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
@ -74,10 +74,6 @@ const filterMods = ref<MenuOutput[]>([]); // 过滤我的常用后的应用
|
||||
const modsDrawer = ref<boolean>(false);
|
||||
|
||||
const { userInfos } = storeToRefs(useUserInfo());
|
||||
const state = reactive({
|
||||
navError: '',
|
||||
navData: [],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getMods();
|
||||
|
||||
@ -8,16 +8,12 @@
|
||||
|
||||
<div class="custome-canlendar">
|
||||
<el-calendar v-model="state.calendarValue" ref="calendar">
|
||||
<template #header="{date }">
|
||||
<span>{{ date }}</span>
|
||||
<template #header="{ date }">
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="small" @click="selectDate('prev-month')">
|
||||
上个月
|
||||
</el-button>
|
||||
<el-button size="small" @click="selectDate('prev-month')"> 上个月 </el-button>
|
||||
<el-button size="small" @click="selectDate('today')">今天</el-button>
|
||||
<el-button size="small" @click="selectDate('next-month')">
|
||||
下个月
|
||||
</el-button>
|
||||
<el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
<template #date-cell="{ data }">
|
||||
@ -30,7 +26,6 @@
|
||||
{{ solarDate2lunar(data.day) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
@ -58,7 +53,7 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
title: '日程',
|
||||
icon: 'ele-Odometer',
|
||||
icon: 'ele-Calendar',
|
||||
description: '日程演示',
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
title: '版本信息',
|
||||
icon: 'ele-Monitor',
|
||||
icon: 'ele-InfoFilled',
|
||||
description: '版本信息原子组件演示',
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -45,7 +45,7 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
|
||||
export default {
|
||||
title: '欢迎',
|
||||
icon: 'ele-Present',
|
||||
icon: 'ele-Promotion',
|
||||
description: '项目特色以及文档链接',
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -23,29 +23,19 @@
|
||||
</div>
|
||||
<el-row :gutter="8">
|
||||
<el-col v-for="(item, index) in grid.layout" :key="index" :md="item" :xs="24">
|
||||
<draggable
|
||||
v-model="grid.copmsList[index]"
|
||||
animation="200"
|
||||
handle=".customize-overlay"
|
||||
group="people"
|
||||
item-key="com"
|
||||
drag-class="aaaaa"
|
||||
force-fallback
|
||||
fallback-on-body
|
||||
class="draggable-box"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<VueDraggable v-model="grid.copmsList[index]" :animation="200" handle=".customize-overlay" class="draggable-box">
|
||||
<div v-for="item in grid.copmsList[index]" :key="item">
|
||||
<div class="widgets-item mb8">
|
||||
<component :is="allComps[element]"></component>
|
||||
<component :is="allComps[item]"></component>
|
||||
<div v-if="customizing" class="customize-overlay">
|
||||
<el-button class="close" type="danger" plain icon="ele-Close" @click="remove(element)"></el-button>
|
||||
<label v-if="allComps[element]">
|
||||
<el-icon> <component :is="allComps[element].icon" /> </el-icon>{{ allComps[element].title }}
|
||||
<el-button class="close" type="danger" plain icon="ele-Close" @click="remove(item)"></el-button>
|
||||
<label v-if="allComps[item]">
|
||||
<el-icon> <component :is="allComps[item].icon" /> </el-icon>{{ allComps[item].title }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -144,7 +134,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick } from 'vue';
|
||||
import draggable from 'vuedraggable';
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
import { clone } from '/@/utils/arrayOperation';
|
||||
import allComps from './components/index';
|
||||
import { Local } from '/@/utils/storage';
|
||||
@ -157,7 +147,7 @@ interface Grid {
|
||||
const defaultGrid = {
|
||||
layout: [12, 6, 6],
|
||||
copmsList: [
|
||||
['welcome', 'commit'],
|
||||
['welcome', 'myapp', 'commit'],
|
||||
['about', 'version'],
|
||||
['timer', 'schedule'],
|
||||
],
|
||||
@ -275,7 +265,7 @@ const close = () => {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding-top: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.widgets-aside-title {
|
||||
margin-top: 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user