refactor: extract image form to standalone page and implement tags view store
- Created ImageForm.vue as standalone page for add/edit image functionality - Removed dialog-based image form from VmImages.vue - Implemented tagsViewStore for global tab state management - Added automatic tab closing on form cancel/back - Fixed data persistence issue when switching between image edits - Removed quick actions section from ImageForm - Updated router configuration for new image form route
This commit is contained in:
+322
-12
@@ -88,40 +88,350 @@ html, body {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Element Plus样式优化 */
|
||||
/* Element Plus全局配色优化 */
|
||||
|
||||
/* 按钮扁平化 */
|
||||
.el-button {
|
||||
font-weight: 400;
|
||||
border-radius: 4px;
|
||||
border-radius: 0 !important;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 主按钮 - 深蓝灰色 */
|
||||
.el-button--primary {
|
||||
background-color: #2c3e50 !important;
|
||||
border-color: #2c3e50 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
background-color: #34495e !important;
|
||||
border-color: #34495e !important;
|
||||
}
|
||||
|
||||
.el-button--primary:active {
|
||||
background-color: #1a252f !important;
|
||||
border-color: #1a252f !important;
|
||||
}
|
||||
|
||||
/* 成功按钮 - 绿色系 */
|
||||
.el-button--success {
|
||||
background-color: #27ae60 !important;
|
||||
border-color: #27ae60 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.el-button--success:hover {
|
||||
background-color: #2ecc71 !important;
|
||||
border-color: #2ecc71 !important;
|
||||
}
|
||||
|
||||
.el-button--success:active {
|
||||
background-color: #229954 !important;
|
||||
border-color: #229954 !important;
|
||||
}
|
||||
|
||||
/* 危险按钮 - 红色系 */
|
||||
.el-button--danger {
|
||||
background-color: #e74c3c !important;
|
||||
border-color: #e74c3c !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.el-button--danger:hover {
|
||||
background-color: #ec7063 !important;
|
||||
border-color: #ec7063 !important;
|
||||
}
|
||||
|
||||
.el-button--danger:active {
|
||||
background-color: #c0392b !important;
|
||||
border-color: #c0392b !important;
|
||||
}
|
||||
|
||||
/* 默认按钮 */
|
||||
.el-button--default {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #d5d9e0 !important;
|
||||
color: #606266 !important;
|
||||
}
|
||||
|
||||
.el-button--default:hover {
|
||||
background-color: #f5f7fa !important;
|
||||
border-color: #c0c4cc !important;
|
||||
color: #606266 !important;
|
||||
}
|
||||
|
||||
/* Link按钮 */
|
||||
.el-button.is-link {
|
||||
color: #3498db !important;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-button.is-link:hover {
|
||||
color: #2980b9 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-button--primary.is-link {
|
||||
color: #3498db !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-button--primary.is-link:hover {
|
||||
color: #2980b9 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 输入框扁平化 */
|
||||
.el-input__wrapper {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 0 0 0 1px #d5d9e0 inset !important;
|
||||
background-color: #ffffff !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #b8bcc5 inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px #2c3e50 inset !important;
|
||||
}
|
||||
|
||||
/* 标签扁平化 */
|
||||
.el-tag {
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
font-weight: 500;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
/* 成功标签 */
|
||||
.el-tag--success {
|
||||
background-color: #d5f4e6 !important;
|
||||
color: #27ae60 !important;
|
||||
}
|
||||
|
||||
/* 危险标签 */
|
||||
.el-tag--danger {
|
||||
background-color: #fadbd8 !important;
|
||||
color: #e74c3c !important;
|
||||
}
|
||||
|
||||
/* 信息标签 */
|
||||
.el-tag--info {
|
||||
background-color: #ebf5fb !important;
|
||||
color: #3498db !important;
|
||||
}
|
||||
|
||||
/* 卡片扁平化 */
|
||||
.el-card {
|
||||
border-radius: 4px;
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid #e1e8ed !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 表格扁平化 */
|
||||
.el-table {
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
background: #f8f9fa !important;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background: #f8f9fa !important;
|
||||
border-bottom: 2px solid #e1e8ed !important;
|
||||
color: #2c3e50 !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-bottom: 1px solid #f0f2f5 !important;
|
||||
color: #34495e !important;
|
||||
}
|
||||
|
||||
.el-table tr:hover > td {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
/* 分页扁平化 */
|
||||
.el-pagination .el-pager li {
|
||||
border-radius: 0 !important;
|
||||
color: #606266 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.is-active {
|
||||
background-color: #2c3e50 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li:hover {
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.el-pagination button {
|
||||
border-radius: 0 !important;
|
||||
color: #606266 !important;
|
||||
}
|
||||
|
||||
.el-pagination button:hover {
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-select .el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #d5d9e0 inset !important;
|
||||
}
|
||||
|
||||
.el-pagination .el-input__inner {
|
||||
color: #606266 !important;
|
||||
}
|
||||
|
||||
/* 下拉菜单扁平化 */
|
||||
.el-dropdown-menu {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid #e1e8ed !important;
|
||||
background-color: #ffffff !important;
|
||||
box-shadow: 0 2px 8px rgba(44, 62, 80, 0.1) !important;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
color: #34495e !important;
|
||||
transition: all 0.2s ease;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:hover {
|
||||
background-color: #f8f9fa !important;
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.is-divided {
|
||||
border-top: 1px solid #e1e8ed !important;
|
||||
}
|
||||
|
||||
/* 选择框扁平化 */
|
||||
.el-select .el-input__wrapper {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* 文本域扁平化 */
|
||||
.el-textarea__inner {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 0 0 0 1px #d5d9e0 inset !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.el-textarea__inner:hover {
|
||||
box-shadow: 0 0 0 1px #b8bcc5 inset !important;
|
||||
}
|
||||
|
||||
.el-textarea__inner:focus {
|
||||
box-shadow: 0 0 0 1px #2c3e50 inset !important;
|
||||
}
|
||||
|
||||
/* 菜单扁平化 */
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
border-radius: 4px;
|
||||
/* 表单标签 */
|
||||
.el-form-item__label {
|
||||
color: #2c3e50 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Dialog 扁平化样式 */
|
||||
.el-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
border-radius: 8px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.15);
|
||||
background-color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog__wrapper {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-weight: 500;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
background-color: #fafbfc;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-dialog__close {
|
||||
color: #7f8c8d;
|
||||
font-size: 18px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.el-dialog__close:hover {
|
||||
color: #2c3e50;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
color: #34495e;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 10px 20px 20px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e1e8ed;
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
/* Dialog 内表单组件样式 */
|
||||
.el-dialog .el-input__wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-dialog .el-select .el-input__wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-dialog .el-textarea__inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-dialog .el-form-item__label {
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-dialog .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user