hejl
/
manta
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整样式

master
hejl 1 week ago
parent
8fc26d68d8
commit
9208fde4ef
4 changed files with 538 additions and 350 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 561
      gofaster/app/dist/renderer/js/index.js
  2. 190
      gofaster/app/src/renderer/modules/role-management/views/RoleManagement.vue
  3. 63
      gofaster/app/src/renderer/modules/user-management/views/UserManagement.vue
  4. 56
      gofaster/app/src/renderer/modules/user-management/views/UserProfile.vue

561
gofaster/app/dist/renderer/js/index.js vendored
View File

File diff suppressed because it is too large Load Diff

190
gofaster/app/src/renderer/modules/role-management/views/RoleManagement.vue
Unescape View File

@ -1,14 +1,25 @@
<template> <template>
<div class="role-management"> <div class="role-management">
<div class="page-header"> <!-- 搜索和操作 -->
<h2>角色管理</h2> <div class="search-bar">
<div class="search-input">
<i class="fas fa-search"></i>
<input
v-model="searchQuery"
type="text"
placeholder="搜索角色名称或代码..."
@input="handleSearch"
/>
</div>
<div class="filters">
<button class="btn btn-primary" @click="createNewRole"> <button class="btn btn-primary" @click="createNewRole">
<i class="fas fa-plus"></i> 新建角色 <i class="fas fa-plus"></i> 新建角色
</button> </button>
</div> </div>
</div>
<!-- 角色列表 --> <!-- 角色列表 -->
<div class="role-list"> <div class="role-table">
<div v-if="loading" class="loading"> <div v-if="loading" class="loading">
<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-spinner fa-spin"></i>
<span>加载中...</span> <span>加载中...</span>
@ -33,7 +44,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="role in roles" :key="role.id"> <tr v-for="role in filteredRoles" :key="role.id">
<td>{{ role.id }}</td> <td>{{ role.id }}</td>
<td>{{ role.name }}</td> <td>{{ role.name }}</td>
<td>{{ role.code }}</td> <td>{{ role.code }}</td>
@ -44,7 +55,7 @@
<button class="btn btn-sm btn-info" @click="editRole(role)" title="编辑角色"> <button class="btn btn-sm btn-info" @click="editRole(role)" title="编辑角色">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</button> </button>
<button class="btn btn-sm btn-warning" @click="assignPermissions(role)" title="分配权限"> <button class="btn btn-sm btn-primary" @click="assignPermissions(role)" title="分配权限">
<i class="fas fa-shield-alt"></i> <i class="fas fa-shield-alt"></i>
</button> </button>
<button class="btn btn-sm btn-danger" @click="deleteRole(role)" title="删除角色"> <button class="btn btn-sm btn-danger" @click="deleteRole(role)" title="删除角色">
@ -138,7 +149,7 @@
</template> </template>
<script> <script>
import { ref, reactive, onMounted } from 'vue' import { ref, reactive, computed, onMounted } from 'vue'
import { roleService } from '../services/roleService.js' import { roleService } from '../services/roleService.js'
import RolePermissionAssignment from '../components/RolePermissionAssignment.vue' import RolePermissionAssignment from '../components/RolePermissionAssignment.vue'
@ -159,6 +170,7 @@ export default {
const currentPage = ref(1) const currentPage = ref(1)
const pageSize = ref(10) const pageSize = ref(10)
const total = ref(0) const total = ref(0)
const searchQuery = ref('')
const roleForm = reactive({ const roleForm = reactive({
name: '', name: '',
@ -166,6 +178,24 @@ export default {
description: '' description: ''
}) })
// 过滤后的角色列表
const filteredRoles = computed(() => {
if (!searchQuery.value) {
return roles.value
}
const query = searchQuery.value.toLowerCase()
return roles.value.filter(role =>
role.name.toLowerCase().includes(query) ||
role.code.toLowerCase().includes(query) ||
role.description?.toLowerCase().includes(query)
)
})
// 搜索处理
const handleSearch = () => {
currentPage.value = 1
}
// 获取角色列表 // 获取角色列表
const loadRoles = async () => { const loadRoles = async () => {
loading.value = true loading.value = true
@ -314,7 +344,9 @@ export default {
currentPage, currentPage,
pageSize, pageSize,
total, total,
searchQuery,
roleForm, roleForm,
filteredRoles,
createNewRole, createNewRole,
editRole, editRole,
saveRole, saveRole,
@ -322,6 +354,7 @@ export default {
assignPermissions, assignPermissions,
handlePermissionsUpdated, handlePermissionsUpdated,
handleCurrentChange, handleCurrentChange,
handleSearch,
formatDate formatDate
} }
} }
@ -331,25 +364,91 @@ export default {
<style scoped> <style scoped>
.role-management { .role-management {
padding: 20px; padding: 20px;
padding-top: 10px;
} }
.page-header { .search-bar {
display: flex; display: flex;
justify-content: space-between; gap: 20px;
margin-bottom: 6px;
margin-top: 0;
align-items: center; align-items: center;
margin-bottom: 20px; flex-wrap: wrap;
justify-content: space-between;
} }
.page-header h2 { .search-input {
margin: 0; position: relative;
color: var(--text-primary); flex: 0 0 280px;
min-width: 200px;
max-width: 350px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.search-bar {
flex-direction: column;
align-items: stretch;
gap: 15px;
justify-content: flex-start;
}
.search-input {
flex: 1;
min-width: auto;
max-width: none;
}
.filters {
justify-content: space-between;
flex: none;
}
}
/* 中等屏幕优化 */
@media (max-width: 1024px) and (min-width: 769px) {
.search-input {
flex: 0 0 250px;
min-width: 200px;
max-width: 300px;
}
}
.search-input i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
}
.search-input input {
width: 100%;
padding: 8px 10px 8px 35px;
border: 1px solid var(--input-border);
border-radius: 6px;
font-size: 12px;
background-color: var(--input-bg);
color: var(--input-text);
}
.filters {
display: flex;
gap: 15px;
flex-wrap: wrap;
flex: 1;
justify-content: flex-end;
align-items: center;
min-width: 0;
} }
.role-list { .role-table {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 8px;
padding: 20px; box-shadow: 0 2px 8px var(--shadow-color);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); overflow: hidden;
margin-bottom: 20px;
} }
.loading { .loading {
@ -392,19 +491,20 @@ export default {
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 20px;
} }
th, td { th, td {
padding: 12px; padding: 8px;
text-align: left; text-align: left;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
font-size: 12px;
} }
th { th {
background: var(--bg-secondary); background: var(--bg-secondary);
font-weight: 600; font-weight: normal;
color: var(--text-primary); color: var(--text-primary);
font-size: 14px;
} }
.actions { .actions {
@ -417,7 +517,7 @@ th {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 12px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@ -425,12 +525,12 @@ th {
} }
.btn-primary { .btn-primary {
background: var(--accent-color); background: #1976d2;
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--accent-hover); background: #1565c0;
} }
.btn-info { .btn-info {
@ -450,19 +550,23 @@ th {
.btn-sm { .btn-sm {
padding: 6px 12px; padding: 6px 12px;
font-size: 12px; font-size: 10px;
} }
/* 表格操作按钮样式优化 */ /* 表格操作按钮样式优化 */
.actions .btn-sm { .actions .btn-sm {
background: none; background: none;
border: none; border: none;
padding: 4px 8px; padding: 6px 10px;
margin: 0 2px; margin: 0 -2px;
color: var(--text-primary); color: var(--text-primary);
transition: all 0.2s; transition: all 0.2s;
} }
.actions .btn-sm i {
font-size: 14px;
}
.actions .btn-sm:hover { .actions .btn-sm:hover {
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--accent-color); color: var(--accent-color);
@ -473,12 +577,12 @@ th {
color: #2196f3; color: #2196f3;
} }
.actions .btn-sm.btn-danger:hover { .actions .btn-sm.btn-primary:hover {
color: #d32f2f; color: #1976d2;
} }
.actions .btn-sm.btn-warning:hover { .actions .btn-sm.btn-danger:hover {
color: #ff9800; color: #d32f2f;
} }
.btn:hover { .btn:hover {
@ -498,7 +602,7 @@ th {
} }
.page-info { .page-info {
color: var(--text-secondary); color: #666;
font-size: 14px; font-size: 14px;
} }
@ -535,27 +639,16 @@ th {
.modal-header h3 { .modal-header h3 {
margin: 0; margin: 0;
color: var(--text-primary); font-size: 14px;
font-weight: normal;
} }
.close-btn { .close-btn {
background: none; background: none;
border: none; border: none;
font-size: 18px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: var(--text-muted); color: #999;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 4px;
transition: all 0.2s;
}
.close-btn:hover {
background: var(--bg-secondary);
color: var(--text-primary);
} }
.modal-body { .modal-body {
@ -570,20 +663,19 @@ th {
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: normal;
color: var(--text-primary); color: #333;
font-size: 14px;
} }
.form-group input, .form-group input,
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 1px solid var(--border-color); border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
background: var(--input-bg);
color: var(--input-text);
} }
.form-group textarea { .form-group textarea {

63
gofaster/app/src/renderer/modules/user-management/views/UserManagement.vue
Unescape View File

@ -1,12 +1,5 @@
<template> <template>
<div class="user-management"> <div class="user-management">
<div class="page-header">
<h2>用户管理</h2>
<button class="btn btn-primary" @click="showAddUserModal = true">
<i class="fas fa-plus"></i> 添加用户
</button>
</div>
<!-- 搜索和筛选 --> <!-- 搜索和筛选 -->
<div class="search-bar"> <div class="search-bar">
<div class="search-input"> <div class="search-input">
@ -30,6 +23,9 @@
{{ role.name }} {{ role.name }}
</option> </option>
</select> </select>
<button class="btn btn-primary" @click="showAddUserModal = true">
<i class="fas fa-plus"></i> 添加用户
</button>
</div> </div>
</div> </div>
@ -388,25 +384,17 @@ export default {
<style scoped> <style scoped>
.user-management { .user-management {
padding: 20px; padding: 20px;
padding-top: 10px;
/* 移除强制高度和滚动条设置，让内容自然流动 */ /* 移除强制高度和滚动条设置，让内容自然流动 */
} }
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.page-header h2 {
margin: 0;
color: var(--text-primary);
}
.search-bar { .search-bar {
display: flex; display: flex;
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 6px;
margin-top: 0;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
@ -466,14 +454,15 @@ export default {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: var(--text-muted); color: var(--text-muted);
font-size: 12px;
} }
.search-input input { .search-input input {
width: 100%; width: 100%;
padding: 10px 10px 10px 35px; padding: 8px 10px 8px 35px;
border: 1px solid var(--input-border); border: 1px solid var(--input-border);
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 12px;
background-color: var(--input-bg); background-color: var(--input-bg);
color: var(--input-text); color: var(--input-text);
} }
@ -484,14 +473,15 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
min-width: 0; min-width: 0;
} }
.filters select { .filters select {
padding: 8px 12px; padding: 6px 12px;
border: 1px solid var(--input-border); border: 1px solid var(--input-border);
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 12px;
background-color: var(--input-bg); background-color: var(--input-bg);
color: var(--input-text); color: var(--input-text);
min-width: 100px; min-width: 100px;
@ -513,22 +503,24 @@ table {
} }
th, td { th, td {
padding: 12px; padding: 8px;
text-align: left; text-align: left;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
font-size: 12px;
} }
th { th {
background: var(--bg-secondary); background: var(--bg-secondary);
font-weight: 600; font-weight: normal;
color: var(--text-primary); color: var(--text-primary);
font-size: 14px;
} }
.status-badge { .status-badge {
padding: 4px 8px; padding: 4px 8px;
border-radius: 12px; border-radius: 12px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: normal;
} }
.status-badge.active { .status-badge.active {
@ -552,7 +544,7 @@ th {
color: #1976d2; color: #1976d2;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 11px; font-size: 14px;
} }
.actions { .actions {
@ -565,7 +557,7 @@ th {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 12px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@ -598,19 +590,23 @@ th {
.btn-sm { .btn-sm {
padding: 6px 12px; padding: 6px 12px;
font-size: 12px; font-size: 10px;
} }
/* 表格操作按钮样式优化 */ /* 表格操作按钮样式优化 */
.actions .btn-sm { .actions .btn-sm {
background: none; background: none;
border: none; border: none;
padding: 4px 8px; padding: 6px 10px;
margin: 0 2px; margin: 0 -2px;
color: var(--text-primary); color: var(--text-primary);
transition: all 0.2s; transition: all 0.2s;
} }
.actions .btn-sm i {
font-size: 14px;
}
.actions .btn-sm:hover { .actions .btn-sm:hover {
background: var(--bg-secondary); background: var(--bg-secondary);
color: var(--accent-color); color: var(--accent-color);
@ -683,12 +679,14 @@ th {
.modal-header h3 { .modal-header h3 {
margin: 0; margin: 0;
font-size: 14px;
font-weight: normal;
} }
.close-btn { .close-btn {
background: none; background: none;
border: none; border: none;
font-size: 24px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: #999; color: #999;
} }
@ -705,8 +703,9 @@ th {
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: normal;
color: #333; color: #333;
font-size: 14px;
} }
.form-group input, .form-group input,

56
gofaster/app/src/renderer/modules/user-management/views/UserProfile.vue
Unescape View File

@ -307,17 +307,17 @@ export default {
.profile-header { .profile-header {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 26px;
} }
.profile-header h1 { .profile-header h1 {
font-size: 2.5rem; font-size: 16px;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 10px; margin-bottom: 10px;
} }
.profile-subtitle { .profile-subtitle {
font-size: 1.1rem; font-size: 12px;
color: var(--text-secondary); color: var(--text-secondary);
margin: 0; margin: 0;
} }
@ -362,7 +362,7 @@ export default {
padding: 12px 24px; padding: 12px 24px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 12px;
margin-top: 20px; margin-top: 20px;
} }
@ -378,22 +378,22 @@ export default {
.profile-card { .profile-card {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 8px;
padding: 24px; padding: 20px;
margin-bottom: 24px; margin-bottom: 20px;
box-shadow: 0 2px 8px var(--shadow-color); box-shadow: 0 2px 8px var(--shadow-color);
} }
.card-header { .card-header {
margin: 0 0 20px 0; margin: 0 0 16px 0;
color: var(--text-primary); color: var(--text-primary);
font-size: 18px; font-size: 14px;
border-bottom: 2px solid var(--border-color); border-bottom: 2px solid var(--border-color);
padding-bottom: 8px; padding-bottom: 8px;
} }
.card-header h2 { .card-header h2 {
margin: 0; margin: 0;
font-size: 18px; font-size: 14px;
color: var(--text-primary); color: var(--text-primary);
} }
@ -407,8 +407,8 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 16px;
padding: 16px 0; padding: 12px 0;
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
} }
@ -421,11 +421,12 @@ export default {
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
min-width: 200px; min-width: 200px;
font-size: 12px;
} }
.info-item span { .info-item span {
color: var(--text-primary); color: var(--text-primary);
font-size: 14px; font-size: 12px;
text-align: right; text-align: right;
flex: 1; flex: 1;
} }
@ -434,7 +435,7 @@ export default {
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
border-radius: 20px; border-radius: 20px;
font-size: 0.85rem; font-size: 12px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
min-width: 80px; min-width: 80px;
@ -463,24 +464,24 @@ export default {
.roles-list { .roles-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 16px;
} }
.role-item { .role-item {
background: var(--card-bg); background: var(--card-bg);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 16px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
margin-bottom: 16px; margin-bottom: 12px;
} }
.role-header { .role-header {
margin-bottom: 16px; margin-bottom: 12px;
} }
.role-name { .role-name {
display: block; display: block;
font-size: 1.1rem; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 8px; margin-bottom: 8px;
@ -488,13 +489,13 @@ export default {
.role-description { .role-description {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.9rem; font-size: 12px;
} }
.role-permissions h4 { .role-permissions h4 {
margin: 0 0 12px 0; margin: 0 0 8px 0;
color: var(--text-primary); color: var(--text-primary);
font-size: 1rem; font-size: 12px;
} }
.permissions-grid { .permissions-grid {
@ -508,7 +509,7 @@ export default {
color: white; color: white;
padding: 4px 12px; padding: 4px 12px;
border-radius: 16px; border-radius: 16px;
font-size: 0.85rem; font-size: 12px;
border: none; border: none;
} }
@ -516,13 +517,14 @@ export default {
text-align: center; text-align: center;
color: var(--text-secondary); color: var(--text-secondary);
padding: 40px 20px; padding: 40px 20px;
font-size: 12px;
} }
.profile-actions { .profile-actions {
display: flex; display: flex;
gap: 16px; gap: 16px;
justify-content: flex-end; justify-content: flex-end;
margin-top: 30px; margin-top: 26px;
} }
.action-btn { .action-btn {
@ -530,7 +532,7 @@ export default {
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 12px;
font-weight: 500; font-weight: 500;
transition: all 0.2s; transition: all 0.2s;
} }
@ -575,11 +577,13 @@ export default {
.empty-state h3 { .empty-state h3 {
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 10px; margin-bottom: 10px;
font-size: 12px;
} }
.empty-state p { .empty-state p {
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 30px; margin-bottom: 30px;
font-size: 12px;
} }
.login-btn { .login-btn {
@ -589,7 +593,7 @@ export default {
padding: 12px 32px; padding: 12px 32px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
@ -604,7 +608,7 @@ export default {
} }
.profile-header h1 { .profile-header h1 {
font-size: 2rem; font-size: 16px;
} }
.info-item { .info-item {

Write Preview
Loading…
Cancel
Save