😎样式调整:缓存页面、用户管理页面、移动端显示

This commit is contained in:
zuohuaijun 2024-08-02 23:02:10 +08:00
parent 75cbf5bb87
commit 877019f92e
5 changed files with 74 additions and 66 deletions

View File

@ -17,7 +17,7 @@
<PackageReference Include="AngleSharp" Version="1.1.2" /> <PackageReference Include="AngleSharp" Version="1.1.2" />
<PackageReference Include="AspectCore.Extensions.Reflection" Version="2.4.0" /> <PackageReference Include="AspectCore.Extensions.Reflection" Version="2.4.0" />
<PackageReference Include="AspNetCoreRateLimit" Version="5.0.0" /> <PackageReference Include="AspNetCoreRateLimit" Version="5.0.0" />
<PackageReference Include="Elastic.Clients.Elasticsearch" Version="8.14.7" /> <PackageReference Include="Elastic.Clients.Elasticsearch" Version="8.14.8" />
<PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.9.4.11" /> <PackageReference Include="Furion.Extras.Authentication.JwtBearer" Version="4.9.4.11" />
<PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.9.4.11" /> <PackageReference Include="Furion.Extras.ObjectMapper.Mapster" Version="4.9.4.11" />
<PackageReference Include="Furion.Pure" Version="4.9.4.11" /> <PackageReference Include="Furion.Pure" Version="4.9.4.11" />
@ -39,7 +39,7 @@
<PackageReference Include="SqlSugarCore" Version="5.1.4.166" /> <PackageReference Include="SqlSugarCore" Version="5.1.4.166" />
<PackageReference Include="SSH.NET" Version="2024.1.0" /> <PackageReference Include="SSH.NET" Version="2024.1.0" />
<PackageReference Include="System.Linq.Dynamic.Core" Version="1.4.4" /> <PackageReference Include="System.Linq.Dynamic.Core" Version="1.4.4" />
<PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1059" /> <PackageReference Include="TencentCloudSDK.Sms" Version="3.0.1060" />
<PackageReference Include="UAParser" Version="3.1.47" /> <PackageReference Include="UAParser" Version="3.1.47" />
<PackageReference Include="Yitter.IdGenerator" Version="1.0.14" /> <PackageReference Include="Yitter.IdGenerator" Version="1.0.14" />
</ItemGroup> </ItemGroup>

View File

@ -25,7 +25,7 @@
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"async-validator": "^4.2.5", "async-validator": "^4.2.5",
"axios": "^1.7.2", "axios": "^1.7.3",
"countup.js": "^2.8.0", "countup.js": "^2.8.0",
"cropperjs": "^1.6.2", "cropperjs": "^1.6.2",
"echarts": "^5.5.1", "echarts": "^5.5.1",
@ -49,7 +49,7 @@
"print-js": "^1.6.0", "print-js": "^1.6.0",
"push.js": "^1.0.12", "push.js": "^1.0.12",
"qrcodejs2-fixes": "^0.0.2", "qrcodejs2-fixes": "^0.0.2",
"qs": "^6.12.3", "qs": "^6.13.0",
"relation-graph": "^2.2.3", "relation-graph": "^2.2.3",
"screenfull": "^6.0.2", "screenfull": "^6.0.2",
"sm-crypto-v2": "^1.9.1", "sm-crypto-v2": "^1.9.1",
@ -64,11 +64,11 @@
"vue-i18n": "^9.13.1", "vue-i18n": "^9.13.1",
"vue-json-pretty": "^2.4.0", "vue-json-pretty": "^2.4.0",
"vue-plugin-hiprint": "0.0.57-beta20", "vue-plugin-hiprint": "0.0.57-beta20",
"vue-router": "^4.4.1", "vue-router": "^4.4.2",
"vue-signature-pad": "^3.0.2", "vue-signature-pad": "^3.0.2",
"vue3-tree-org": "^4.2.2", "vue3-tree-org": "^4.2.2",
"vuedraggable": "4.0.3", "vuedraggable": "4.0.3",
"vxe-pc-ui": "^4.0.82", "vxe-pc-ui": "^4.0.84",
"vxe-table": "^4.7.59", "vxe-table": "^4.7.59",
"vxe-table-plugin-element": "^4.0.4", "vxe-table-plugin-element": "^4.0.4",
"vxe-table-plugin-export-xlsx": "^4.0.5", "vxe-table-plugin-export-xlsx": "^4.0.5",
@ -84,7 +84,7 @@
"@types/sortablejs": "^1.15.8", "@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0", "@typescript-eslint/parser": "^7.18.0",
"@vitejs/plugin-vue": "^5.1.1", "@vitejs/plugin-vue": "^5.1.2",
"@vitejs/plugin-vue-jsx": "^4.0.0", "@vitejs/plugin-vue-jsx": "^4.0.0",
"@vue/compiler-sfc": "^3.4.35", "@vue/compiler-sfc": "^3.4.35",
"code-inspector-plugin": "^0.15.2", "code-inspector-plugin": "^0.15.2",

View File

@ -29,13 +29,15 @@
overflow: auto; overflow: auto;
} }
// 在小屏幕中取消表单左边距 // 在小屏幕中取消表单左边距
.el-form-item__label-wrap{ .el-form-item__label-wrap {
margin-left: 0px !important; margin-left: 0px !important;
} }
// 列表页查询表单内的输入框宽度适配 // 列表页查询表单内的输入框宽度适配
.el-form--inline .el-form-item .el-select, .el-form--inline .el-form-item .el-select,
.el-form--inline .el-form-item .el-input .el-form--inline .el-form-item .el-input {
{ width: 100% !important;
width: 100% !important; }
} .el-form--inline .el-form-item:has(.el-form-item__label) {
margin-right: 0;
}
} }

View File

@ -1,41 +1,48 @@
<template> <template>
<div class="sys-cache-container"> <div class="sys-cache-container">
<NoticeBar text="系统缓存数据管理,请慎重操作!" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" /> <splitpanes horizontal>
<el-row :gutter="5" class="mt5"> <pane size="5">
<el-col :span="8" :xs="24"> <NoticeBar text="系统缓存数据管理,请慎重操作!" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
<el-card shadow="hover" header="缓存列表" style="height: calc(100vh - 156px)" v-loading="state.loading" body-style="height:100%;overflow:auto;padding:5px 5px 50px 5px;"> </pane>
<template #header> <pane size="95">
<div class="card-header"> <splitpanes>
<span>缓存列表</span> <pane size="20">
<el-button icon="ele-Refresh" size="small" circle text @click="handleQuery" v-auth="'sysCache/keyList'" /> <el-card shadow="hover" header="缓存列表" v-loading="state.loading" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto">
</div> <template #header>
</template> <div class="card-header">
<el-tree <span>缓存列表</span>
ref="treeRef" <el-button icon="ele-Refresh" size="small" circle text @click="handleQuery" v-auth="'sysCache:keyList'" />
class="filter-tree" </div>
:data="state.cacheData" </template>
node-key="id" <el-tree
:props="{ children: 'children', label: 'name' }" ref="treeRef"
@node-click="nodeClick" class="filter-tree"
:default-checked-keys="state.cacheData" :data="state.cacheData"
highlight-current node-key="id"
check-strictly :props="{ children: 'children', label: 'name' }"
default-expand-all @node-click="nodeClick"
/> :default-checked-keys="state.cacheData"
</el-card> highlight-current
</el-col> check-strictly
<el-col :span="16" :xs="24"> default-expand-all
<el-card shadow="hover" header="缓存数据" style="height: calc(100vh - 156px)" v-loading="state.loadingData" body-style="height:calc(100% - 36px);overflow:auto;"> accordion
<template #header> />
<div class="card-header"> </el-card>
<span>{{ `缓存数据${state.cacheKey ? `${state.cacheKey}` : ''}` }}</span> </pane>
<el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache/delete'"> 删除缓存 </el-button> <pane size="80">
</div> <el-card shadow="hover" header="缓存数据" v-loading="state.loading1" class="mt8" style="height: 100%" body-style="height:100%; overflow:auto">
</template> <template #header>
<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController /> <div class="card-header">
</el-card> <span>{{ `缓存数据${state.cacheKey ? `${state.cacheKey}` : ''}` }}</span>
</el-col> <el-button icon="ele-Delete" size="small" type="danger" @click="delCache" v-auth="'sysCache:delete'"> 删除缓存 </el-button>
</el-row> </div>
</template>
<vue-json-pretty :data="state.cacheValue" showLength showIcon showLineNumber showSelectController />
</el-card>
</pane>
</splitpanes>
</pane>
</splitpanes>
</div> </div>
</template> </template>
@ -45,6 +52,8 @@ import { ElMessageBox, ElMessage, ElTree } from 'element-plus';
import NoticeBar from '/@/components/noticeBar/index.vue'; import NoticeBar from '/@/components/noticeBar/index.vue';
import VueJsonPretty from 'vue-json-pretty'; import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css'; import 'vue-json-pretty/lib/styles.css';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysCacheApi } from '/@/api-services'; import { SysCacheApi } from '/@/api-services';
@ -53,15 +62,14 @@ const treeRef = ref<InstanceType<typeof ElTree>>();
const currentNode = ref<any>({}); const currentNode = ref<any>({});
const state = reactive({ const state = reactive({
loading: false, loading: false,
loadingData: false, loading1: false,
cacheData: [] as any, cacheData: [] as any,
cacheValue: undefined as any, cacheValue: undefined as any,
cacheKey: undefined, cacheKey: undefined,
}); });
//
onMounted(async () => { onMounted(async () => {
await handleQuery(); handleQuery();
}); });
// //
@ -109,7 +117,7 @@ const delCache = () => {
}) })
.then(async () => { .then(async () => {
await getAPI(SysCacheApi).apiSysCacheDeleteKeyPost(currentNode.value.id); await getAPI(SysCacheApi).apiSysCacheDeleteKeyPost(currentNode.value.id);
await handleQuery(); handleQuery();
state.cacheValue = undefined; state.cacheValue = undefined;
state.cacheKey = undefined; state.cacheKey = undefined;
ElMessage.success('删除成功'); ElMessage.success('删除成功');
@ -122,7 +130,7 @@ const nodeClick = async (node: any) => {
if (node.id == 0) return; if (node.id == 0) return;
currentNode.value = node; currentNode.value = node;
state.loadingData = true; state.loading1 = true;
var res = await getAPI(SysCacheApi).apiSysCacheValueKeyGet(node.id); var res = await getAPI(SysCacheApi).apiSysCacheValueKeyGet(node.id);
// state.cacheValue = JSON.parse(res.data.result); // state.cacheValue = JSON.parse(res.data.result);
var result = res.data.result; var result = res.data.result;
@ -142,7 +150,7 @@ const nodeClick = async (node: any) => {
} }
state.cacheKey = node.id; state.cacheKey = node.id;
state.loadingData = false; state.loading1 = false;
}; };
</script> </script>
@ -152,7 +160,4 @@ const nodeClick = async (node: any) => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
:deep(.el-card__header) {
padding: 6px !important;
}
</style> </style>

View File

@ -1,11 +1,10 @@
<template> <template>
<div class="sys-user-container"> <div class="sys-user-container">
<el-row :gutter="5" style="width: 100%; height: 100%"> <splitpanes>
<el-col :span="4" :xs="24" style="display: flex; height: 100%"> <pane size="16">
<OrgTree ref="treeRef" @node-click="handleNodeChange" /> <OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
</el-col> </pane>
<pane size="94">
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column; height: 100%">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10"> <el-row :gutter="10">
@ -86,8 +85,8 @@
</template> </template>
</vxe-grid> </vxe-grid>
</el-card> </el-card>
</el-col> </pane>
</el-row> </splitpanes>
<EditUser ref="editUserRef" :title="state.title" :orgData="state.treeData" @handleQuery="handleQuery" /> <EditUser ref="editUserRef" :title="state.title" :orgData="state.treeData" @handleQuery="handleQuery" />
</div> </div>
@ -100,6 +99,8 @@ import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook'; import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage'; import { Local } from '/@/utils/storage';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import OrgTree from '/@/views/system/org/component/orgTree.vue'; import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditUser from '/@/views/system/user/component/editUser.vue'; import EditUser from '/@/views/system/user/component/editUser.vue';