Mohan
/
mach-cms-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(theme): tokenize admin editor and user/tag pages

main
Mohan 1 month ago
parent
3c74ccfb1d
commit
a521061eb6
3 changed files with 126 additions and 73 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. 73
      src/views/admin/ArticleEditorView.vue
  2. 63
      src/views/admin/TagListView.vue
  3. 63
      src/views/admin/UserListView.vue

73
src/views/admin/ArticleEditorView.vue
View File

@ -223,14 +223,16 @@ onMounted(() => {
<style scoped> <style scoped>
.page-title { .page-title {
font-family: var(--song-font-display);
font-weight: 400;
margin: 0 0 16px; margin: 0 0 16px;
font-size: 20px;
font-size: 22px;
} }
.editor-form { .editor-form {
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
padding: 20px; padding: 20px;
} }
@ -238,25 +240,36 @@ onMounted(() => {
display: block; display: block;
margin: 14px 0 6px; margin: 14px 0 6px;
font-size: 14px; font-size: 14px;
color: #5c6470;
color: var(--ac-text-secondary);
} }
.form-input { .form-input {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 14px; font-size: 14px;
background: var(--ac-bg-card);
color: var(--ac-text);
transition: border-color var(--song-dur-1) var(--song-ease);
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--ac-primary);
outline: none;
} }
.form-textarea { .form-textarea {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 14px; font-size: 14px;
resize: vertical; resize: vertical;
font-family: inherit; font-family: inherit;
background: var(--ac-bg-card);
color: var(--ac-text);
} }
.cover-row { .cover-row {
@ -267,11 +280,16 @@ onMounted(() => {
.upload-btn { .upload-btn {
flex-shrink: 0; flex-shrink: 0;
padding: 10px 16px; padding: 10px 16px;
background: #eef3ff;
color: #3b5bdb;
border-radius: 6px;
background: var(--ac-primary-bg);
color: var(--ac-primary-strong);
border-radius: var(--song-radius-l);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: background var(--song-dur-1) var(--song-ease);
}
.upload-btn:hover {
background: var(--ac-active);
} }
.upload-input { .upload-input {
@ -281,8 +299,8 @@ onMounted(() => {
.cover-preview { .cover-preview {
max-width: 220px; max-width: 220px;
margin-top: 10px; margin-top: 10px;
border-radius: 6px;
border: 1px solid #e5e5ea;
border-radius: var(--song-radius-l);
border: 1px solid var(--ac-border);
} }
.tag-picker { .tag-picker {
@ -309,11 +327,16 @@ onMounted(() => {
.btn-primary { .btn-primary {
padding: 10px 22px; padding: 10px 22px;
border: none; border: none;
border-radius: 6px;
background: #3b82f6;
color: #fff;
border-radius: var(--song-radius-l);
background: var(--ac-primary-strong);
color: var(--ac-primary-text);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: opacity var(--song-dur-1) var(--song-ease);
}
.btn-primary:hover:not(:disabled) {
opacity: 0.9;
} }
.btn-primary:disabled { .btn-primary:disabled {
@ -322,18 +345,24 @@ onMounted(() => {
.btn-plain { .btn-plain {
padding: 9px 16px; padding: 9px 16px;
border: 1px solid #d3d8e0;
border-radius: 6px;
color: #5c6470;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
color: var(--ac-text-secondary);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
transition: border-color var(--song-dur-1) var(--song-ease), color var(--song-dur-1) var(--song-ease);
}
.btn-plain:hover {
border-color: var(--ac-primary);
color: var(--ac-primary);
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
} }
.hint-text { .hint-text {
color: #8a93a3;
color: var(--ac-text-disabled);
} }
</style> </style>

63
src/views/admin/TagListView.vue
View File

@ -157,18 +157,25 @@ onMounted(load)
} }
.page-title { .page-title {
font-family: var(--song-font-display);
font-weight: 400;
margin: 0; margin: 0;
font-size: 20px;
font-size: 22px;
} }
.btn-primary { .btn-primary {
padding: 9px 16px; padding: 9px 16px;
background: #3b82f6;
color: #fff;
background: var(--ac-primary-strong);
color: var(--ac-primary-text);
border: none; border: none;
border-radius: 6px;
border-radius: var(--song-radius-l);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: opacity var(--song-dur-1) var(--song-ease);
}
.btn-primary:hover {
opacity: 0.9;
} }
.tag-form { .tag-form {
@ -179,28 +186,42 @@ onMounted(load)
.form-input { .form-input {
padding: 9px 12px; padding: 9px 12px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 14px; font-size: 14px;
flex: 1; flex: 1;
background: var(--ac-bg-card);
color: var(--ac-text);
transition: border-color var(--song-dur-1) var(--song-ease);
}
.form-input:focus {
border-color: var(--ac-primary);
outline: none;
} }
.btn-plain { .btn-plain {
padding: 8px 16px; padding: 8px 16px;
border: 1px solid #d3d8e0;
border-radius: 6px;
background: #fff;
color: #5c6470;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
background: var(--ac-bg-card);
color: var(--ac-text-secondary);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: border-color var(--song-dur-1) var(--song-ease), color var(--song-dur-1) var(--song-ease);
}
.btn-plain:hover {
border-color: var(--ac-primary);
color: var(--ac-primary);
} }
.tag-table { .tag-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
overflow: hidden; overflow: hidden;
} }
@ -208,17 +229,17 @@ onMounted(load)
.tag-table td { .tag-table td {
padding: 10px 14px; padding: 10px 14px;
text-align: left; text-align: left;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--ac-border);
font-size: 14px; font-size: 14px;
} }
.tag-table th { .tag-table th {
background: #f7f8fa;
color: #5c6470;
background: var(--ac-surface);
color: var(--ac-text-secondary);
} }
.tag-desc { .tag-desc {
color: #8a93a3;
color: var(--ac-text-disabled);
font-size: 12px; font-size: 12px;
} }
@ -230,21 +251,21 @@ onMounted(load)
.btn-link { .btn-link {
border: none; border: none;
background: none; background: none;
color: #3b82f6;
color: var(--ac-primary);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 0; padding: 0;
} }
.btn-link.danger { .btn-link.danger {
color: #d33c3c;
color: var(--ac-danger);
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
} }
.hint-text { .hint-text {
color: #8a93a3;
color: var(--ac-text-disabled);
} }
</style> </style>

63
src/views/admin/UserListView.vue
View File

@ -159,16 +159,18 @@ onMounted(load)
<style scoped> <style scoped>
.page-title { .page-title {
font-family: var(--song-font-display);
font-weight: 400;
margin: 0 0 16px; margin: 0 0 16px;
font-size: 20px;
font-size: 22px;
} }
.user-table { .user-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
overflow: hidden; overflow: hidden;
} }
@ -176,67 +178,68 @@ onMounted(load)
.user-table td { .user-table td {
padding: 10px 14px; padding: 10px 14px;
text-align: left; text-align: left;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--ac-border);
font-size: 14px; font-size: 14px;
} }
.user-table th { .user-table th {
background: #f7f8fa;
color: #5c6470;
background: var(--ac-surface);
color: var(--ac-text-secondary);
} }
.role-badge { .role-badge {
padding: 2px 10px; padding: 2px 10px;
border-radius: 12px;
border-radius: var(--song-radius-m);
font-size: 12px; font-size: 12px;
} }
.role-badge.admin { .role-badge.admin {
background: #f8d7da;
color: #8f1f2b;
background: var(--ac-danger-bg);
color: var(--ac-danger);
} }
.role-badge.editor { .role-badge.editor {
background: #cce5ff;
color: #004a99;
background: var(--ac-primary-bg);
color: var(--ac-primary-strong);
} }
.role-badge.visitor { .role-badge.visitor {
background: #e9ecef;
color: #6c757d;
background: var(--ac-surface);
color: var(--ac-text-secondary);
} }
.role-select { .role-select {
padding: 5px 8px; padding: 5px 8px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 13px; font-size: 13px;
background: #fff;
background: var(--ac-bg-card);
color: var(--ac-text);
} }
.role-select:disabled { .role-select:disabled {
background: #f1f2f4;
color: #8a93a3;
background: var(--ac-surface);
color: var(--ac-text-disabled);
} }
.status-badge { .status-badge {
padding: 2px 10px; padding: 2px 10px;
border-radius: 12px;
border-radius: var(--song-radius-m);
font-size: 12px; font-size: 12px;
} }
.status-badge.enabled { .status-badge.enabled {
background: #d4edda;
color: #1e7e34;
background: var(--ac-success-bg);
color: var(--ac-success);
} }
.status-badge.disabled { .status-badge.disabled {
background: #e9ecef;
color: #6c757d;
background: var(--ac-surface);
color: var(--ac-text-secondary);
} }
.total-hint { .total-hint {
color: #8a93a3;
color: var(--ac-text-disabled);
font-size: 13px; font-size: 13px;
} }
@ -249,23 +252,23 @@ onMounted(load)
} }
.btn-link.danger { .btn-link.danger {
color: #d33c3c;
color: var(--ac-danger);
} }
.btn-link.safe { .btn-link.safe {
color: #1e7e34;
color: var(--ac-success);
} }
.btn-link:disabled { .btn-link:disabled {
color: #b8c0ca;
color: var(--ac-text-disabled);
cursor: not-allowed; cursor: not-allowed;
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
} }
.hint-text { .hint-text {
color: #8a93a3;
color: var(--ac-text-disabled);
} }
</style> </style>
Write Preview
Loading…
Cancel
Save