chore: 修改主题配色
This commit is contained in:
@@ -12,6 +12,31 @@ import Messages from './views/Messages.vue';
|
|||||||
|
|
||||||
const store = useMqttStore();
|
const store = useMqttStore();
|
||||||
|
|
||||||
|
const themeOverrides = {
|
||||||
|
common: {
|
||||||
|
primaryColor: '#0ea5a0',
|
||||||
|
primaryColorHover: '#0b8c87',
|
||||||
|
primaryColorPressed: '#0b8c87',
|
||||||
|
primaryColorSuppl: '#0ea5a0',
|
||||||
|
successColor: '#22c55e',
|
||||||
|
successColorHover: '#16a34a',
|
||||||
|
successColorPressed: '#15803d',
|
||||||
|
successColorSuppl: '#22c55e',
|
||||||
|
warningColor: '#f59e0b',
|
||||||
|
warningColorHover: '#d97706',
|
||||||
|
warningColorPressed: '#b45309',
|
||||||
|
warningColorSuppl: '#f59e0b',
|
||||||
|
errorColor: '#ef4444',
|
||||||
|
errorColorHover: '#dc2626',
|
||||||
|
errorColorPressed: '#b91c1c',
|
||||||
|
errorColorSuppl: '#ef4444',
|
||||||
|
infoColor: '#3b82f6',
|
||||||
|
infoColorHover: '#2563eb',
|
||||||
|
infoColorPressed: '#1d4ed8',
|
||||||
|
infoColorSuppl: '#3b82f6',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const activeTab = ref('dashboard');
|
const activeTab = ref('dashboard');
|
||||||
const showServerModal = ref(false);
|
const showServerModal = ref(false);
|
||||||
const editServerData = ref(null);
|
const editServerData = ref(null);
|
||||||
@@ -44,6 +69,7 @@ function handleSwitchTab(tab) {
|
|||||||
:locale="zhCN"
|
:locale="zhCN"
|
||||||
:date-locale="dateZhCN"
|
:date-locale="dateZhCN"
|
||||||
:theme="null"
|
:theme="null"
|
||||||
|
:theme-overrides="themeOverrides"
|
||||||
>
|
>
|
||||||
<n-message-provider placement="bottom">
|
<n-message-provider placement="bottom">
|
||||||
<n-dialog-provider>
|
<n-dialog-provider>
|
||||||
|
|||||||
@@ -157,7 +157,7 @@ function handleDelete(server) {
|
|||||||
.sidebar-logo {
|
.sidebar-logo {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: #18a058;
|
background: #0ea5a0;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -201,7 +201,7 @@ function handleDelete(server) {
|
|||||||
|
|
||||||
.server-item.active {
|
.server-item.active {
|
||||||
background: var(--n-color-pressed);
|
background: var(--n-color-pressed);
|
||||||
border-color: #18a058;
|
border-color: #0ea5a0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.server-item-top {
|
.server-item-top {
|
||||||
@@ -265,11 +265,11 @@ function handleDelete(server) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.connected {
|
.status-dot.connected {
|
||||||
background: #18a058;
|
background: #22c55e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.connecting {
|
.status-dot.connecting {
|
||||||
background: #f0a020;
|
background: #f59e0b;
|
||||||
animation: pulse 1s infinite;
|
animation: pulse 1s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -278,7 +278,7 @@ function handleDelete(server) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.error {
|
.status-dot.error {
|
||||||
background: #d03050;
|
background: #ef4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
|
|||||||
@@ -207,11 +207,11 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.connected {
|
.status-dot.connected {
|
||||||
background: #18a058;
|
background: #22c55e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.connecting {
|
.status-dot.connecting {
|
||||||
background: #f0a020;
|
background: #f59e0b;
|
||||||
animation: pulse 1s infinite;
|
animation: pulse 1s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -220,7 +220,7 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-dot.error {
|
.status-dot.error {
|
||||||
background: #d03050;
|
background: #ef4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
|
|||||||
@@ -194,10 +194,10 @@ function formatPayload(payload) {
|
|||||||
width: 28px;
|
width: 28px;
|
||||||
}
|
}
|
||||||
.msg-dir.pub {
|
.msg-dir.pub {
|
||||||
color: #2080f0;
|
color: #3b82f6;
|
||||||
}
|
}
|
||||||
.msg-dir.sub {
|
.msg-dir.sub {
|
||||||
color: #18a058;
|
color: #22c55e;
|
||||||
}
|
}
|
||||||
.msg-topic {
|
.msg-topic {
|
||||||
color: #d25a00;
|
color: #d25a00;
|
||||||
|
|||||||
@@ -409,7 +409,7 @@ async function copyTopic(topic) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg-dir.pub {
|
.msg-dir.pub {
|
||||||
color: #2080f0;
|
color: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg-topic {
|
.msg-topic {
|
||||||
|
|||||||
Reference in New Issue
Block a user