feat(admin): refine theme settings UI

This commit is contained in:
2026-08-19 13:11:04 +08:00
parent 2e442e20ec
commit 8a738c7998
27 changed files with 425 additions and 337 deletions
+6 -6
View File
@@ -89,7 +89,7 @@ const resolvedFeatures = computed(() => {
}
.aksrt-deferred-page__icon {
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
margin-bottom: 20px;
}
@@ -97,13 +97,13 @@ const resolvedFeatures = computed(() => {
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
color: #1a1a2e;
color: var(--aksrt-color-text);
}
.aksrt-deferred-page__desc {
margin: 0 0 20px;
font-size: 14px;
color: #8a909c;
color: var(--aksrt-color-muted);
max-width: 400px;
line-height: 1.6;
}
@@ -126,7 +126,7 @@ const resolvedFeatures = computed(() => {
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: #4b5563;
color: var(--aksrt-color-text-secondary);
}
.aksrt-deferred-page__depends-list {
@@ -137,7 +137,7 @@ const resolvedFeatures = computed(() => {
.aksrt-deferred-page__reason p {
margin: 0;
color: #666;
color: var(--aksrt-color-muted);
line-height: 1.7;
}
@@ -153,7 +153,7 @@ const resolvedFeatures = computed(() => {
align-items: center;
gap: 8px;
font-size: 13px;
color: #666;
color: var(--aksrt-color-muted);
}
.aksrt-deferred-page__feature :deep(i) {
+3 -3
View File
@@ -28,20 +28,20 @@ defineProps({
.aksrt-empty-state__icon {
margin-bottom: 20px;
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
}
.aksrt-empty-state__title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
color: #1a1a2e;
color: var(--aksrt-color-text);
}
.aksrt-empty-state__desc {
margin: 0;
font-size: 13px;
color: #7a7f8a;
color: var(--aksrt-color-muted);
max-width: 360px;
line-height: 1.65;
}
+6 -6
View File
@@ -34,8 +34,8 @@ defineEmits(['toggle'])
gap: 10px;
height: 48px;
padding: 0 14px;
background: #fff;
border-bottom: 1px solid #eceff5;
background: var(--aksrt-color-surface);
border-bottom: 1px solid var(--aksrt-color-border);
position: sticky;
top: 0;
z-index: 50;
@@ -50,20 +50,20 @@ defineEmits(['toggle'])
border: none;
border-radius: 8px;
background: transparent;
color: #1a1a2e;
color: var(--aksrt-color-text);
cursor: pointer;
margin-left: -6px;
}
.aksrt-mobile-topbar__menu:hover {
background: #f3f5f9;
background: var(--aksrt-color-primary-soft);
}
.aksrt-mobile-topbar__title {
flex: 1 1 auto;
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
color: var(--aksrt-color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -77,7 +77,7 @@ defineEmits(['toggle'])
width: 28px;
height: 28px;
border-radius: 8px;
background: #18a058;
background: var(--aksrt-color-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
@@ -105,7 +105,7 @@ const callbackUrl = computed(() => {
display: flex;
align-items: center;
justify-content: center;
background: #f7f8fa;
background: var(--aksrt-color-canvas);
border-radius: 12px;
}
@@ -118,19 +118,19 @@ const callbackUrl = computed(() => {
.oauth-platform-text {
font-size: 20px;
font-weight: 700;
color: #666;
color: var(--aksrt-color-muted);
}
.oauth-platform-info h4 {
font-size: 16px;
font-weight: 600;
color: #1a1a2e;
color: var(--aksrt-color-text);
margin-bottom: 2px;
}
.oauth-doc-link {
font-size: 12px;
color: #1565c0;
color: var(--aksrt-color-primary);
text-decoration: none;
}
.oauth-doc-link:hover {
@@ -145,7 +145,7 @@ const callbackUrl = computed(() => {
/* 表单体 */
.oauth-form-body {
padding-top: 8px;
border-top: 1px solid #f0f0f5;
border-top: 1px solid var(--aksrt-color-border);
}
.oauth-form-grid :deep(.n-form-item) {
@@ -159,6 +159,6 @@ const callbackUrl = computed(() => {
}
.oauth-disabled-hint p {
font-size: 13px;
color: #bbb;
color: var(--aksrt-color-border-strong);
}
</style>
+2 -2
View File
@@ -39,7 +39,7 @@ defineProps({
.aksrt-page-header__title {
margin: 0 0 6px;
color: #1a1a2e;
color: var(--aksrt-color-text);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
@@ -48,7 +48,7 @@ defineProps({
.aksrt-page-header__desc {
margin: 0;
color: #7a7f8a;
color: var(--aksrt-color-muted);
font-size: 13px;
line-height: 1.65;
}
+37 -37
View File
@@ -1019,7 +1019,7 @@ function confirmRepeaterModal() {
.aksrt-field__label {
font-size: 13px;
font-weight: 500;
color: #555;
color: var(--aksrt-color-text-secondary);
}
.aksrt-field__required {
@@ -1028,19 +1028,19 @@ function confirmRepeaterModal() {
}
.aksrt-field__help-icon {
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
cursor: help;
transition: color 0.15s;
}
.aksrt-field__help-icon:hover {
color: #1890ff;
color: var(--aksrt-color-primary);
}
.aksrt-field__desc {
margin: -2px 0 8px;
font-size: 12px;
color: #8a909c;
color: var(--aksrt-color-muted);
line-height: 1.5;
}
@@ -1063,7 +1063,7 @@ function confirmRepeaterModal() {
}
.aksrt-field__dimensions-sep {
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
font-size: 14px;
}
@@ -1077,7 +1077,7 @@ function confirmRepeaterModal() {
.aksrt-field__spacing-label {
font-size: 12px;
color: #8a909c;
color: var(--aksrt-color-muted);
text-align: center;
}
@@ -1096,7 +1096,7 @@ function confirmRepeaterModal() {
.aksrt-field__sublabel {
font-size: 12px;
color: #8a909c;
color: var(--aksrt-color-muted);
min-width: 70px;
}
@@ -1113,7 +1113,7 @@ function confirmRepeaterModal() {
align-items: center;
gap: 6px;
padding: 8px;
border: 2px solid #eef1f6;
border: 2px solid var(--aksrt-color-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
@@ -1121,12 +1121,12 @@ function confirmRepeaterModal() {
}
.aksrt-field__image-select-item:hover {
border-color: #1890ff;
border-color: var(--aksrt-color-primary);
}
.aksrt-field__image-select-item--active {
border-color: #1890ff;
background: #e6f7ff;
border-color: var(--aksrt-color-primary);
background: var(--aksrt-color-primary-soft);
}
.aksrt-field__image-select-img {
@@ -1142,14 +1142,14 @@ function confirmRepeaterModal() {
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fb;
background: var(--aksrt-color-canvas);
border-radius: 4px;
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
}
.aksrt-field__image-select-label {
font-size: 11px;
color: #555;
color: var(--aksrt-color-text-secondary);
text-align: center;
}
@@ -1165,12 +1165,12 @@ function confirmRepeaterModal() {
padding: 0;
border: 3px solid #fff;
border-radius: 3px;
box-shadow: 0 0 0 1px #d8d8d8;
box-shadow: 0 0 0 1px var(--aksrt-color-border-strong);
cursor: pointer;
}
.aksrt-field__palette-item.is-active {
box-shadow: 0 0 0 2px #2f8fce;
box-shadow: 0 0 0 2px var(--aksrt-color-primary);
}
.aksrt-field__link {
@@ -1195,14 +1195,14 @@ function confirmRepeaterModal() {
align-items: center;
justify-content: space-between;
padding: 5px 9px;
border: 1px solid #e6e8eb;
border: 1px solid var(--aksrt-color-border);
border-radius: 3px;
background: #fafafa;
background: var(--aksrt-color-canvas);
}
.aksrt-field__sortable-item {
border: 1px solid #e5e5e5;
background: #fff;
border: 1px solid var(--aksrt-color-border);
background: var(--aksrt-color-surface);
}
.aksrt-field__sortable-head {
@@ -1210,7 +1210,7 @@ function confirmRepeaterModal() {
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: #f7f7f7;
background: var(--aksrt-color-canvas);
cursor: move;
}
@@ -1224,9 +1224,9 @@ function confirmRepeaterModal() {
/* Repeater */
.aksrt-field__fieldset {
padding: 14px;
border: 1px solid #eef1f6;
border: 1px solid var(--aksrt-color-border);
border-radius: 8px;
background: #fafbfc;
background: var(--aksrt-color-canvas);
}
.aksrt-field__repeater {
@@ -1236,10 +1236,10 @@ function confirmRepeaterModal() {
}
.aksrt-field__repeater-item {
border: 1px solid #eef1f6;
border: 1px solid var(--aksrt-color-border);
border-radius: 8px;
padding: 12px;
background: #fafbfc;
background: var(--aksrt-color-canvas);
}
.aksrt-field__repeater-header {
@@ -1252,7 +1252,7 @@ function confirmRepeaterModal() {
.aksrt-field__repeater-index {
font-size: 12px;
font-weight: 600;
color: #1890ff;
color: var(--aksrt-color-primary);
}
.aksrt-field__repeater-fields {
@@ -1264,7 +1264,7 @@ function confirmRepeaterModal() {
/* Content field */
.aksrt-field__content {
font-size: 13px;
color: #555;
color: var(--aksrt-color-text-secondary);
line-height: 1.6;
}
@@ -1307,9 +1307,9 @@ function confirmRepeaterModal() {
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid #eef1f6;
border: 1px solid var(--aksrt-color-border);
border-radius: 8px;
background: #fafbfc;
background: var(--aksrt-color-canvas);
}
.aksrt-field__repeater-list-actions {
@@ -1335,8 +1335,8 @@ function confirmRepeaterModal() {
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef3ff;
color: #3b82f6;
background: var(--aksrt-color-primary-soft);
color: var(--aksrt-color-primary);
flex-shrink: 0;
overflow: hidden;
font-size: 16px;
@@ -1365,7 +1365,7 @@ function confirmRepeaterModal() {
.aksrt-field__repeater-list-title {
font-size: 13px;
font-weight: 600;
color: #1f2329;
color: var(--aksrt-color-text);
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
@@ -1375,7 +1375,7 @@ function confirmRepeaterModal() {
.aksrt-field__repeater-list-desc {
margin-top: 2px;
font-size: 12px;
color: #8a909c;
color: var(--aksrt-color-muted);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
@@ -1388,11 +1388,11 @@ function confirmRepeaterModal() {
align-items: center;
gap: 8px;
padding: 22px 12px;
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
font-size: 13px;
border: 1px dashed #e5e7eb;
border: 1px dashed var(--aksrt-color-border);
border-radius: 8px;
background: #fcfcfd;
background: var(--aksrt-color-canvas);
}
.aksrt-field__repeater-modal-fields {
@@ -1410,7 +1410,7 @@ function confirmRepeaterModal() {
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #eef1f6;
border-top: 1px solid var(--aksrt-color-border);
}
</style>
@@ -72,9 +72,10 @@ function toggleCollapse() {
<style scoped>
.aksrt-field-group {
margin-bottom: 20px;
border: 1px solid #eef1f6;
border: 1px solid var(--aksrt-color-border);
border-radius: 12px;
background: #fff;
background: var(--aksrt-color-surface);
box-shadow: var(--aksrt-shadow-card);
overflow: hidden;
}
@@ -92,7 +93,7 @@ function toggleCollapse() {
}
.aksrt-field-group__header.is-clickable:hover .aksrt-field-group__title {
color: #1890ff;
color: var(--aksrt-color-primary);
}
.aksrt-field-group.is-collapsed .aksrt-field-group__header {
@@ -114,7 +115,7 @@ function toggleCollapse() {
}
.aksrt-field-group__icon {
color: #1890ff;
color: var(--aksrt-color-primary);
margin-top: 2px;
}
@@ -122,14 +123,14 @@ function toggleCollapse() {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
color: var(--aksrt-color-text);
transition: color 0.15s;
}
.aksrt-field-group__desc {
margin: 4px 0 0;
font-size: 12px;
color: #8a909c;
color: var(--aksrt-color-muted);
line-height: 1.5;
}
@@ -143,9 +144,9 @@ function toggleCollapse() {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #e8ecf2;
background: #f7f9fc;
color: #5c6370;
border: 1px solid var(--aksrt-color-border);
background: var(--aksrt-color-canvas);
color: var(--aksrt-color-text-secondary);
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
@@ -154,9 +155,9 @@ function toggleCollapse() {
}
.aksrt-field-group__collapse-btn:hover {
color: #1890ff;
border-color: #91caff;
background: #f0f7ff;
color: var(--aksrt-color-primary);
border-color: var(--aksrt-color-primary);
background: var(--aksrt-color-primary-soft);
}
.aksrt-field-group__body {
@@ -292,7 +292,7 @@ const filteredSchema = computed(() => {
}
.aksrt-form-renderer__header-icon {
color: #1890ff;
color: var(--aksrt-color-primary);
margin-top: 4px;
}
@@ -300,14 +300,14 @@ const filteredSchema = computed(() => {
margin: 0;
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
color: var(--aksrt-color-text);
letter-spacing: -0.02em;
}
.aksrt-form-renderer__desc {
margin: 4px 0 0;
font-size: 13px;
color: #7a7f8a;
color: var(--aksrt-color-muted);
line-height: 1.6;
}
@@ -322,7 +322,7 @@ const filteredSchema = computed(() => {
align-items: center;
gap: 12px;
padding: 60px 0;
color: #8a909c;
color: var(--aksrt-color-muted);
font-size: 14px;
}
@@ -332,7 +332,7 @@ const filteredSchema = computed(() => {
align-items: center;
gap: 12px;
padding: 60px 0;
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
}
.aksrt-form-renderer__empty p {
@@ -347,9 +347,9 @@ const filteredSchema = computed(() => {
left: 0;
right: 0;
z-index: 1000;
background: #fff;
border-top: 1px solid #eef1f6;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
background: var(--aksrt-color-surface);
border-top: 1px solid var(--aksrt-color-border);
box-shadow: var(--aksrt-shadow-floating);
animation: slideUp 0.2s ease;
}
@@ -99,7 +99,7 @@ function clearMedia() {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid #eef1f6;
border: 1px solid var(--aksrt-color-border);
margin-bottom: 8px;
}
@@ -115,12 +115,12 @@ function clearMedia() {
align-items: center;
gap: 8px;
padding: 16px;
background: #f8fafc;
background: var(--aksrt-color-canvas);
}
.aksrt-media-field__filename {
font-size: 13px;
color: #555;
color: var(--aksrt-color-text-secondary);
word-break: break-all;
}
@@ -146,19 +146,19 @@ function clearMedia() {
justify-content: center;
gap: 8px;
padding: 32px;
border: 2px dashed #d9dce3;
border: 2px dashed var(--aksrt-color-border-strong);
border-radius: 8px;
cursor: pointer;
color: #8a909c;
color: var(--aksrt-color-muted);
font-size: 13px;
transition: all 0.2s;
margin-bottom: 8px;
}
.aksrt-media-field__empty:hover {
border-color: #1890ff;
color: #1890ff;
background: #f0f7ff;
border-color: var(--aksrt-color-primary);
color: var(--aksrt-color-primary);
background: var(--aksrt-color-primary-soft);
}
.aksrt-media-field__url {
@@ -136,10 +136,10 @@ function updateField(index, key, value) {
}
.aksrt-repeater__item {
border: 1px solid #eef1f6;
border: 1px solid var(--aksrt-color-border);
border-radius: 8px;
padding: 12px;
background: #fafbfc;
background: var(--aksrt-color-canvas);
}
.aksrt-repeater__item-header {
@@ -152,8 +152,8 @@ function updateField(index, key, value) {
.aksrt-repeater__item-index {
font-size: 12px;
font-weight: 600;
color: #1890ff;
background: #e6f4ff;
color: var(--aksrt-color-primary);
background: var(--aksrt-color-primary-soft);
padding: 2px 8px;
border-radius: 4px;
}
@@ -175,7 +175,7 @@ function updateField(index, key, value) {
align-items: center;
gap: 8px;
padding: 24px;
color: #c0c4cc;
color: var(--aksrt-color-border-strong);
font-size: 13px;
}
@@ -193,17 +193,17 @@ function selectIcon(icon) {
border-radius: 6px;
cursor: pointer;
font-size: 16px;
color: #555;
color: var(--aksrt-color-text-secondary);
transition: all 0.15s;
}
.aksrt-icon-picker__item:hover {
background: #f0f5ff;
color: #1890ff;
background: var(--aksrt-color-primary-soft);
color: var(--aksrt-color-primary);
}
.aksrt-icon-picker__item.is-active {
background: #1890ff;
background: var(--aksrt-color-primary);
color: #fff;
}
@@ -211,7 +211,7 @@ function selectIcon(icon) {
grid-column: 1 / -1;
text-align: center;
padding: 20px;
color: #999;
color: var(--aksrt-color-muted);
font-size: 13px;
}
</style>