feat: update UI components and styles for improved layout and readability

2026-07-16 01:40:15 +08:00 · 2026-04-30 12:37:59 +08:00
parent a0bb5db672
commit c626b356f5
11 changed files with 183 additions and 146 deletions
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 258 icons */
+/* Auto-generated MDI subset – 257 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */

@font-face {
@@ -140,10 +140,6 @@
  content: "\F08A7";
 }

-.mdi-calendar-multiple::before {
-  content: "\F00F1";
-}
-
 .mdi-calendar-plus::before {
  content: "\F00F3";
 }
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -23,7 +23,7 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
      ></v-btn>
    </div>

-    <div id="term" style="background-color: #1e1e1e; padding: 16px; border-radius: 8px; overflow-y:auto; height: 100%">
+    <div id="term" class="console-term">
    </div>
  </div>
 </template>
@@ -279,6 +279,36 @@ export default {
      this.isFullscreen = !!document.fullscreenElement;
    },

+    appendLogContent(element, log) {
+      const levelMatch = log.match(/\[(DEBG|INFO|WARN|ERRO|CRIT|DEBUG|WARNING|ERROR|CRITICAL)\]/);
+      if (!levelMatch) {
+        element.innerText = `${log}`;
+        return;
+      }
+
+      const levelStart = levelMatch.index;
+      const levelEnd = levelStart + levelMatch[0].length;
+      const prefix = log.slice(0, levelStart).trimEnd();
+      const message = log.slice(levelEnd).trimStart();
+
+      const prefixSpan = document.createElement('span');
+      prefixSpan.className = 'console-log-prefix';
+      prefixSpan.innerText = prefix;
+
+      const levelSpan = document.createElement('span');
+      levelSpan.className = 'console-log-level';
+      levelSpan.innerText = levelMatch[0];
+
+      const messageSpan = document.createElement('span');
+      messageSpan.className = 'console-log-message';
+      messageSpan.innerText = message;
+
+      element.classList.add('console-log-line--structured');
+      element.appendChild(prefixSpan);
+      element.appendChild(levelSpan);
+      element.appendChild(messageSpan);
+    },
+
    printLog(log) {
      let ele = document.getElementById('term')
      if (!ele) {
@@ -297,7 +327,7 @@ export default {

      span.style = style
      span.classList.add('console-log-line', 'fade-in')
-      span.innerText = `${log}`;
+      this.appendLogContent(span, log);
      ele.appendChild(span)
      if (this.autoScroll) {
        ele.scrollTop = ele.scrollHeight
@@ -325,7 +355,14 @@ export default {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
-  margin-left: 20px;
+}
+
+.console-term {
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
 }

 .fullscreen-btn {
@@ -334,12 +371,35 @@ export default {

 :deep(.console-log-line) {
  display: block;
-  margin-bottom: 2px;
+  margin: 0 0 2px;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, var(--astrbot-font-cjk-mono), monospace;
  font-size: 12px;
  white-space: pre-wrap;
 }

+:deep(.console-log-line--structured) {
+  display: grid;
+  grid-template-columns: max-content 10ch minmax(0, 1fr);
+  column-gap: 8px;
+  align-items: start;
+  white-space: normal;
+}
+
+:deep(.console-log-prefix),
+:deep(.console-log-level),
+:deep(.console-log-message) {
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+:deep(.console-log-level) {
+  font-variant-numeric: tabular-nums;
+}
+
+:deep(.console-log-message) {
+  overflow-wrap: anywhere;
+}
+
 :deep(.fade-in) {
  animation: fadeIn 0.3s;
 }
--- a/dashboard/src/styles/dashboard-shell.css
+++ b/dashboard/src/styles/dashboard-shell.css
@@ -38,27 +38,18 @@
  min-width: 0;
 }

-.dashboard-eyebrow {
-  margin-bottom: 8px;
-  color: var(--dashboard-subtle);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
 .dashboard-title {
  margin: 0;
-  font-size: clamp(32px, 4vw, 44px);
-  line-height: 1.04;
+  font-size: 1.5rem;
+  line-height: 1.2;
  font-weight: 700;
-  letter-spacing: -0.04em;
+  letter-spacing: 0;
 }

 .dashboard-subtitle {
-  margin: 10px 0 0;
+  margin: 4px 0 0;
  color: var(--dashboard-muted);
-  font-size: 15px;
+  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 860px;
 }
--- a/dashboard/src/views/ConsolePage.vue
+++ b/dashboard/src/views/ConsolePage.vue
@@ -7,20 +7,13 @@ const { tm } = useModuleI18n('features/console');
 </script>

 <template>
-  <div style="height: 100%;">
-    <div
-      style="background-color: var(--v-theme-surface); padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
+  <div class="console-page">
+    <div class="console-header">
      <div>
-        <h4>{{ tm('title') }}</h4>
-        <v-alert
-          type="info"
-          variant="tonal"
-          density="compact"
-          class="mt-2"
-          style="max-width: 600px;"
-        >
+        <h1 class="text-h2 mb-1">{{ tm('title') }}</h1>
+        <p class="text-body-2 text-medium-emphasis mb-0">
          {{ tm('debugHint.text') }}
-        </v-alert>
+        </p>
      </div>
      <div class="d-flex align-center">
        <v-switch
@@ -28,6 +21,7 @@ const { tm } = useModuleI18n('features/console');
          :label="autoScrollEnabled ? tm('autoScroll.enabled') : tm('autoScroll.disabled')"
          hide-details
          density="compact"
+          inset
          color="primary"
          style="margin-right: 16px;"
        ></v-switch>
@@ -58,7 +52,7 @@ const { tm } = useModuleI18n('features/console');
        </v-dialog>
      </div>
    </div>
-    <ConsoleDisplayer ref="consoleDisplayer" style="height: calc(100vh - 220px); " />
+    <ConsoleDisplayer ref="consoleDisplayer" class="console-display" />
  </div>
 </template>
 <script>
@@ -108,7 +102,27 @@ export default {

 </script>

-<style>
+<style scoped>
+.console-page {
+  height: 100%;
+  margin: 0 auto;
+  max-width: 1400px;
+  padding: 24px;
+  width: 100%;
+}
+
+.console-header {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.console-display {
+  height: calc(100vh - 190px);
+  width: 100%;
+}
+
@keyframes fadeIn {
  from {
    opacity: 0;
@@ -122,4 +136,15 @@ export default {
 .fade-in {
  animation: fadeIn 0.2s ease-in-out;
 }
+
+@media (max-width: 768px) {
+  .console-page {
+    padding: 16px;
+  }
+
+  .console-header {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
 </style>
--- a/dashboard/src/views/CronJobPage.vue
+++ b/dashboard/src/views/CronJobPage.vue
@@ -3,7 +3,6 @@
    <v-container fluid class="dashboard-shell pa-4 pa-md-6">
      <div class="dashboard-header">
        <div class="dashboard-header-main">
-          <div class="dashboard-eyebrow">{{ tm('header.eyebrow') }}</div>
          <div class="d-flex align-center flex-wrap" style="gap: 8px;">
            <h1 class="dashboard-title">{{ tm('page.title') }}</h1>
            <v-chip size="x-small" color="orange-darken-2" variant="tonal" label>
@@ -25,21 +24,6 @@
        </div>
      </div>

-      <div class="dashboard-overview-grid">
-        <section
-          v-for="card in overviewCards"
-          :key="card.label"
-          class="dashboard-card dashboard-overview-card"
-        >
-          <div class="dashboard-card-icon">
-            <v-icon size="18">{{ card.icon }}</v-icon>
-          </div>
-          <div class="dashboard-card-label">{{ card.label }}</div>
-          <div class="dashboard-card-value">{{ card.value }}</div>
-          <div class="dashboard-card-note">{{ card.note }}</div>
-        </section>
-      </div>
-
      <div class="dashboard-section-head">
        <div>
          <div class="dashboard-section-title">{{ tm('section.platforms.title') }}</div>
@@ -262,10 +246,6 @@ const proactivePlatformText = computed(() =>
  proactivePlatforms.value.map((p) => `${p.display_name || p.name}(${p.id})`).join(' / ')
 )

-const enabledJobsCount = computed(() => jobs.value.filter((job) => job.enabled).length)
-const runOnceCount = computed(() => jobs.value.filter((job) => job.run_once).length)
-const recurringCount = computed(() => jobs.value.filter((job) => !job.run_once).length)
-
 const sortedJobs = computed(() =>
  [...jobs.value].sort((a, b) => {
    if (a.enabled !== b.enabled) {
@@ -285,21 +265,6 @@ const sortedJobs = computed(() =>
  })
 )

-const overviewCards = computed(() => [
-  {
-    label: tm('overview.totalTasks'),
-    value: String(jobs.value.length),
-    note: tm('overview.totalTasksNote'),
-    icon: 'mdi-calendar-multiple'
-  },
-  {
-    label: tm('overview.enabledTasks'),
-    value: String(enabledJobsCount.value),
-    note: tm('overview.enabledTasksNote'),
-    icon: 'mdi-check-circle-outline'
-  }
-])
-
 const isEditing = computed(() => !!editingJobId.value)
 const dialogTitle = computed(() => tm(isEditing.value ? 'form.editTitle' : 'form.title'))
 const dialogSubmitText = computed(() => tm(isEditing.value ? 'actions.save' : 'actions.submit'))
@@ -720,10 +685,6 @@ onMounted(() => {
  font-size: 14px;
 }

-.cron-page :deep(.dashboard-overview-grid) {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
@media (max-width: 900px) {
  .table-actions {
    justify-items: start;
--- a/dashboard/src/views/PersonaPage.vue
+++ b/dashboard/src/views/PersonaPage.vue
@@ -2,12 +2,12 @@
    <div class="persona-page">
        <v-container fluid class="pa-0">
            <!-- 页面标题 -->
-            <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-6">
+            <v-row class="d-flex justify-space-between align-center py-3 pb-6">
                <div>
-                    <h1 class="text-h1 font-weight-bold mb-2">
-                        <v-icon class="me-2">mdi-heart</v-icon>{{ t('core.navigation.persona') }}
+                    <h1 class="text-h2 mb-1">
+                        {{ t('core.navigation.persona') }}
                    </h1>
-                    <p class="text-subtitle-1 text-medium-emphasis mb-0">
+                    <p class="text-body-2 text-medium-emphasis mb-0">
                        {{ tm('page.description') }}
                    </p>
                </div>
@@ -38,7 +38,15 @@ export default {

 <style scoped>
 .persona-page {
-    padding: 20px;
-    padding-top: 8px;
+    margin: 0 auto;
+    max-width: 1400px;
+    padding: 24px;
+    width: 100%;
+}
+
+@media (max-width: 768px) {
+    .persona-page {
+        padding: 16px;
+    }
 }
 </style>
--- a/dashboard/src/views/SubAgentPage.vue
+++ b/dashboard/src/views/SubAgentPage.vue
@@ -3,7 +3,6 @@
    <v-container fluid class="dashboard-shell pa-4 pa-md-6">
      <div class="dashboard-header">
        <div class="dashboard-header-main">
-          <div class="dashboard-eyebrow">{{ tm('header.eyebrow') }}</div>
          <div class="d-flex align-center flex-wrap" style="gap: 8px;">
            <h1 class="dashboard-title">{{ tm('page.title') }}</h1>
            <v-chip size="x-small" color="orange-darken-2" variant="tonal" label>
--- a/dashboard/src/views/TracePage.vue
+++ b/dashboard/src/views/TracePage.vue
@@ -1,11 +1,14 @@
 <script setup>
 import TraceDisplayer from '@/components/shared/TraceDisplayer.vue';
 import { useModuleI18n } from '@/i18n/composables';
-import { ref, onMounted } from 'vue';
+import { computed, ref, onMounted } from 'vue';
+import { useTheme } from 'vuetify';
 import axios from 'axios';

 const { tm } = useModuleI18n('features/trace');
+const theme = useTheme();

+const isDark = computed(() => theme.global.current.value.dark);
 const traceEnabled = ref(true);
 const loading = ref(false);
 const traceDisplayerKey = ref(0);
@@ -42,31 +45,36 @@ onMounted(() => {
 </script>

 <template>
-  <div style="height: 100%; display: flex; flex-direction: column;">
-    <div class="trace-header">
-      <div class="trace-info">
-        <v-icon size="small" color="info" class="mr-2">mdi-information-outline</v-icon>
-        <span class="trace-hint">{{ tm('hint') }}</span>
+  <div class="dashboard-page trace-page" :class="{ 'is-dark': isDark }">
+    <v-container fluid class="dashboard-shell trace-shell pa-4 pa-md-6">
+      <div class="dashboard-header trace-header">
+        <div class="dashboard-header-main">
+          <h1 class="dashboard-title">{{ tm('title') }}</h1>
+          <p class="dashboard-subtitle">
+            {{ tm('hint') }}
+          </p>
+        </div>
+        <div class="dashboard-header-actions">
+          <v-switch
+            v-model="traceEnabled"
+            :loading="loading"
+            :disabled="loading"
+            color="primary"
+            hide-details
+            density="compact"
+            inset
+            @update:model-value="updateTraceSettings"
+          >
+            <template #label>
+              <span class="switch-label">{{ traceEnabled ? tm('recording') : tm('paused') }}</span>
+            </template>
+          </v-switch>
+        </div>
      </div>
-      <div class="trace-controls">
-        <v-switch
-          v-model="traceEnabled"
-          :loading="loading"
-          :disabled="loading"
-          color="primary"
-          hide-details
-          density="compact"
-          @update:model-value="updateTraceSettings"
-        >
-          <template #label>
-            <span class="switch-label">{{ traceEnabled ? tm('recording') : tm('paused') }}</span>
-          </template>
-        </v-switch>
+      <div class="trace-body">
+        <TraceDisplayer :key="traceDisplayerKey" />
      </div>
-    </div>
-    <div style="flex: 1; min-height: 0;">
-      <TraceDisplayer :key="traceDisplayerKey" />
-    </div>
+    </v-container>
  </div>
 </template>

@@ -80,36 +88,36 @@ export default {
 </script>

 <style scoped>
+@import '@/styles/dashboard-shell.css';
+
+.trace-page,
+.trace-shell {
+  height: 100%;
+}
+
+.trace-shell {
+  display: flex;
+  flex-direction: column;
+}
+
 .trace-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: rgba(59, 130, 246, 0.05);
-  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
-  border-radius: 8px 8px 0 0;
-  margin-bottom: 8px;
+  flex: 0 0 auto;
 }

-.trace-info {
-  display: flex;
-  align-items: center;
-}
-
-.trace-hint {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.trace-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.trace-body {
+  flex: 1 1 auto;
+  min-height: 0;
 }

 .switch-label {
+  color: var(--dashboard-muted);
  font-size: 13px;
-  color: #4b5563;
  white-space: nowrap;
 }
+
+@media (max-width: 768px) {
+  .trace-header {
+    align-items: flex-start;
+  }
+}
 </style>
--- a/dashboard/src/views/stats/StatsPage.vue
+++ b/dashboard/src/views/stats/StatsPage.vue
@@ -3,7 +3,6 @@
    <v-container fluid class="stats-shell pa-4 pa-md-6">
      <div class="stats-header">
        <div>
-          <div class="eyebrow">{{ t('header.eyebrow') }}</div>
          <h1 class="stats-title">{{ t('header.title') }}</h1>
          <p class="stats-subtitle">{{ t('header.subtitle') }}</p>
        </div>
@@ -723,30 +722,20 @@ onBeforeUnmount(() => {
  margin-bottom: 24px;
 }

-.eyebrow {
-  margin-bottom: 8px;
-  color: var(--stats-subtle);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
 .stats-title {
  margin: 0;
-  font-size: clamp(34px, 4vw, 46px);
-  line-height: 1.04;
+  font-size: 1.5rem;
+  line-height: 1.2;
  font-weight: 700;
-  letter-spacing: -0.04em;
+  letter-spacing: 0;
 }

 .stats-subtitle {
-  margin: 10px 0 0;
+  margin: 4px 0 0;
  color: var(--stats-muted);
-  font-size: 15px;
+  font-size: 0.875rem;
 }

-.stats-page.is-dark .eyebrow,
 .stats-page.is-dark .stats-subtitle,
 .stats-page.is-dark .metric-label,
 .stats-page.is-dark .section-subtitle,