public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-09-23 05:10:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(system): 优化系统管理相关页面样式和功能

Browse Source 
- 移除了多个组件中的 max-width 属性，使布局更加灵活
- 统一了状态选择框的样式和提示文本
- 调整了部分字段的标签和占位符文本
- 优化了表格列的标题
- 修复了部分组件的样式问题
This commit is contained in:
zhangtao
2025-05-15 23:06:10 +08:00
parent b1b9c40314
commit 5eaf16631c
29 changed files with 99 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/monitor/online/index.vue
+3 -3
View File
@@ -7,13 +7,13 @@
<a-form :model="queryState" @finish="handleQuery">
<a-flex wrap="wrap" gap="small">
<a-form-item name="ipaddr" label="主机" style="max-width: 300px;">
<a-form-item name="ipaddr" label="主机" >
<a-input v-model:value="queryState.ipaddr" placeholder="请输入主机地址" allowClear></a-input>
</a-form-item>
<a-form-item name="user_name" label="用户名" style="max-width: 300px;">
<a-form-item name="user_name" label="用户名" >
<a-input v-model:value="queryState.name" placeholder="请输入登陆用户名称" allowClear></a-input>
</a-form-item>
<a-form-item name="login_location" label="登陆地点" style="max-width: 300px;">
<a-form-item name="login_location" label="登陆地点" >
<a-input v-model:value="queryState.login_location" placeholder="请输入登陆地点" allowClear></a-input>
</a-form-item>
frontend/src/views/system/dept/index.vue
+3 -6
View File
@@ -7,14 +7,11 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear />
</a-form-item>
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear />
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/dict/data.vue
+4 -4
View File
@@ -8,19 +8,19 @@
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="dict_type" label="字典" style="max-width: 300px;">
<a-form-item name="dict_type" label="字典" >
<a-select v-model:value="queryState.dict_type" placeholder="请选择字典名称" allowClear @click="loadDictTypes">
<a-select-option v-for="item in dictTypeOptions" :key="item.dict_type" :value="item.dict_type">
{{ item.dict_name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="dict_name" label="标签" style="max-width: 300px;">
<a-form-item name="dict_name" label="标签" >
<a-input v-model:value="queryState.dict_label" placeholder="请输入字典数据标签"
allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/dict/index.vue
+4 -4
View File
@@ -8,16 +8,16 @@
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="dict_name" label="名称" style="max-width: 300px;">
<a-form-item name="dict_name" label="名称" >
<a-input v-model:value="queryState.dict_name" placeholder="请输入字典名称"
allowClear></a-input>
</a-form-item>
<a-form-item name="dict_type" label="类型" style="max-width: 300px;">
<a-form-item name="dict_type" label="类型" >
<a-input v-model:value="queryState.dict_type" placeholder="请输入字典类型"
allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/job/index.vue
+3 -3
View File
@@ -7,11 +7,11 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.name" placeholder="请输入任务名称" allowClear></a-input>
</a-form-item>
<a-form-item name="status" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.status" placeholder="全部" allowClear>
<a-form-item name="status" label="状态" >
<a-select v-model:value="queryState.status" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/log/SelectorModal.vue
+3 -3
View File
@@ -11,13 +11,13 @@
<a-form :model="queryState" @finish="onFinish">
<a-row>
<a-col flex="0 1 450px">
<a-form-item name="creator_name" label="姓名" style="max-width: 300px;">
<a-form-item name="creator_name" label="姓名" >
<a-input v-model:value="queryState.name" placeholder="请输入姓名" allowClear></a-input>
</a-form-item>
</a-col>
<a-col flex="0 1 450px">
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/log/index.vue
+2 -2
View File
@@ -7,10 +7,10 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="request_path" label="请求路径" style="max-width: 300px;">
<a-form-item name="request_path" label="请求路径" >
<a-input v-model:value="queryState.request_path" placeholder="请输入请求路径" allowClear></a-input>
</a-form-item>
<a-form-item name="creator" label="创建人" style="max-width: 300px;">
<a-form-item name="creator" label="创建人" >
<a-select v-model:value="queryState.creator_name" placeholder="请选择创建人" :open="false"
@click="selectModalHandle">
<template #suffixIcon>
frontend/src/views/system/menu/index.vue
+3 -3
View File
@@ -7,11 +7,11 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/notice/index.vue
+3 -3
View File
@@ -7,12 +7,12 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.notice_title" placeholder="请输入标题"
allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/position/index.vue
+3 -6
View File
@@ -7,14 +7,11 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
</a-form-item>
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/role/index.vue
+3 -3
View File
@@ -7,11 +7,11 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/user/SelectorModal.vue
+3 -3
View File
@@ -10,13 +10,13 @@
<a-form :model="queryState" @finish="onFinish">
<a-row>
<a-col flex="0 1 450px">
<a-form-item name="name" label="名称" style="max-width: 300px;">
<a-form-item name="name" label="名称" >
<a-input v-model:value="queryState.name" placeholder="请输入名称" allowClear></a-input>
</a-form-item>
</a-col>
<a-col flex="0 1 450px">
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState.available" placeholder="全部" allowClear>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
frontend/src/views/system/user/index.vue
+21 -21
View File
@@ -7,16 +7,16 @@
<a-card :bordered="false">
<a-form :model="queryState" @finish="onFinish">
<a-flex wrap="wrap" gap="small">
<a-form-item name="username" label="用户名" style="max-width: 300px;">
<a-input v-model:value="queryState['username']" placeholder="请输入用户名" allowClear></a-input>
<a-form-item name="username" label="账号" >
<a-input v-model:value="queryState.username" placeholder="请输入账号" allowClear></a-input>
</a-form-item>
<a-form-item name="name" label="姓名" style="max-width: 300px;">
<a-input v-model:value="queryState['name']" placeholder="请输入姓名" allowClear></a-input>
<a-form-item name="name" label="用户名" >
<a-input v-model:value="queryState.name" placeholder="请输入用户名" allowClear></a-input>
</a-form-item>
<a-form-item name="available" label="状态" style="max-width: 300px;">
<a-select v-model:value="queryState['available']" placeholder="全部" allowClear>
<a-select-option value="1">启用</a-select-option>
<a-select-option value="0">停用</a-select-option>
<a-form-item name="available" label="状态" >
<a-select v-model:value="queryState.available" placeholder="请选择状态" min-width="300px" allowClear>
<a-select-option value="true">启用</a-select-option>
<a-select-option value="false">停用</a-select-option>
</a-select>
</a-form-item>
</a-flex>
@@ -139,8 +139,8 @@
bordered>
<a-descriptions-item label="序号">{{ (pagination.current - 1) * pagination.pageSize + detailState.index + 1
}}</a-descriptions-item>
<a-descriptions-item label="用户名">{{ detailState.username }}</a-descriptions-item>
<a-descriptions-item label="姓名">{{ detailState.name }}</a-descriptions-item>
<a-descriptions-item label="账号">{{ detailState.username }}</a-descriptions-item>
<a-descriptions-item label="用户名">{{ detailState.name }}</a-descriptions-item>
<a-descriptions-item label="性别">
{{ dictStore.getDictLabel(DictDataStore['sys_user_sex'],detailState.gender).dict_label }}
</a-descriptions-item>
@@ -168,11 +168,11 @@
</div>
<div v-else-if="modalTitle === 'create'">
<a-form ref="createForm" :model="createState" v-bind="{ labelCol: { span: 5 }, wrapperCol: { span: 15 } }">
<a-form-item name="username" label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
<a-input v-model:value="createState.username" placeholder="请输入用户名" allowClear></a-input>
<a-form-item name="username" label="账号" :rules="[{ required: true, message: '请输入账号' }]">
<a-input v-model:value="createState.username" placeholder="请输入账号" allowClear></a-input>
</a-form-item>
<a-form-item name="name" label="姓名" :rules="[{ required: true, message: '请输入姓名' }]">
<a-input v-model:value="createState.name" placeholder="请输入姓名" allowClear></a-input>
<a-form-item name="name" label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
<a-input v-model:value="createState.name" placeholder="请输入用户名" allowClear></a-input>
</a-form-item>
<a-form-item name="dept_id" label="部门" :rules="[{ required: true, message: '请选择部门' }]">
<a-tree-select v-model:value="createState.dept_id"
@@ -231,11 +231,11 @@
</div>
<div v-else>
<a-form ref="updateForm" :model="updateState" v-bind="{ labelCol: { span: 5 }, wrapperCol: { span: 15 } }">
<a-form-item name="username" label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
<a-input v-model:value="updateState.username" placeholder="请输入用户名" allowClear></a-input>
<a-form-item name="username" label="账号" :rules="[{ required: true, message: '请输入账号账号' }]">
<a-input v-model:value="updateState.username" placeholder="请输入账号" allowClear></a-input>
</a-form-item>
<a-form-item name="name" label="姓名" :rules="[{ required: true, message: '请输入姓名' }]">
<a-input v-model:value="updateState.name" placeholder="请输入姓名" allowClear></a-input>
<a-form-item name="name" label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
<a-input v-model:value="updateState.name" placeholder="请输入用户名" allowClear></a-input>
</a-form-item>
<a-form-item name="dept_id" label="部门" :rules="[{ required: true, message: '请选择部门' }]">
<a-tree-select v-model:value="updateState.dept_id"
@@ -331,7 +331,7 @@
<ul>
<li>仅支持 xls、xlsx 格式文件</li>
<li>文件大小不能超过 5MB</li>
<li>必填项：用户名、姓名、性别</li>
<li>必填项：账号、用户名、性别</li>
<li>选填项：邮箱、手机号、部门、角色、岗位等</li>
</ul>
</div>
@@ -440,14 +440,14 @@ const columns = reactive<TableColumnsType>([
width: 80
},
{
title: '用户名',
title: '账号',
dataIndex: 'username',
ellipsis: true,
align: 'center',
width: 100
},
{
title: '姓名',
title: '用户名',
dataIndex: 'name',
ellipsis: true,
align: 'center',