diff --git a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEventStream.vue b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEventStream.vue
index fbd3944..aef1ed3 100644
--- a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEventStream.vue
+++ b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEventStream.vue
@@ -48,10 +48,16 @@ function getStatusColor(status: EnvironmentHealthStatus) {
 
 <style scoped>
 .environment-event-stream {
-  padding: 16px;
-  border: 1px solid hsl(214deg 18% 86%);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding: 12px;
+  overflow: hidden;
+  color: hsl(var(--card-foreground));
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(0deg 0% 100%);
 }
 
 .environment-event-stream__header {
@@ -60,26 +66,29 @@ function getStatusColor(status: EnvironmentHealthStatus) {
   gap: 8px;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .environment-event-stream__header h2 {
   margin: 0;
-  color: hsl(219deg 22% 18%);
   font-size: 16px;
+  color: hsl(var(--foreground));
 }
 
 .environment-event-stream__header span,
 .environment-event-stream__time {
-  color: hsl(215deg 12% 38%);
   font-size: 12px;
+  color: hsl(var(--muted-foreground));
 }
 
 .environment-event-stream__list {
   display: grid;
-  gap: 8px;
+  flex: 1 1 0;
+  gap: 6px;
+  min-height: 0;
   padding: 0;
   margin: 0;
+  overflow: hidden;
   list-style: none;
 }
 
@@ -89,17 +98,18 @@ function getStatusColor(status: EnvironmentHealthStatus) {
   gap: 10px;
   align-items: center;
   min-height: 44px;
-  padding: 8px 10px;
-  border: 1px solid hsl(210deg 18% 91%);
+  padding: 7px 10px;
+  overflow: hidden;
+  background: hsl(var(--accent));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(210deg 25% 98%);
 }
 
 .environment-event-stream__list strong {
   min-width: 0;
-  overflow-wrap: anywhere;
-  color: hsl(219deg 22% 18%);
   font-size: 13px;
+  color: hsl(var(--foreground));
+  overflow-wrap: anywhere;
 }
 
 .environment-event-stream__tags {
diff --git a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEvidencePanel.vue b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEvidencePanel.vue
index e5fd869..8c9703c 100644
--- a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEvidencePanel.vue
+++ b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentEvidencePanel.vue
@@ -108,18 +108,24 @@ function getEvidenceTitle(evidence: EnvironmentEvidence) {
 
 <style scoped>
 .environment-evidence-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 10px;
   min-width: 0;
-  padding: 16px;
-  border: 1px solid hsl(214deg 18% 86%);
+  height: 100%;
+  min-height: 0;
+  padding: 14px;
+  overflow: hidden;
+  color: hsl(var(--card-foreground));
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(0deg 0% 100%);
 }
 
 .environment-evidence-panel__section {
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .environment-evidence-panel__section h2,
@@ -130,28 +136,30 @@ function getEvidenceTitle(evidence: EnvironmentEvidence) {
 }
 
 .environment-evidence-panel__section h2 {
-  color: hsl(219deg 22% 18%);
   font-size: 18px;
+  color: hsl(var(--foreground));
 }
 
 .environment-evidence-panel__section h3 {
   margin-bottom: 10px;
-  color: hsl(219deg 22% 18%);
   font-size: 14px;
+  color: hsl(var(--foreground));
 }
 
 .environment-evidence-panel__eyebrow,
 .environment-evidence-panel__summary,
 .environment-evidence-panel__action span {
-  color: hsl(215deg 12% 38%);
   font-size: 12px;
+  color: hsl(var(--muted-foreground));
 }
 
 .environment-evidence-panel__evidence-list {
   display: grid;
-  gap: 10px;
+  gap: 8px;
+  min-height: 0;
   padding: 0;
   margin: 0;
+  overflow: hidden;
   list-style: none;
 }
 
@@ -161,10 +169,11 @@ function getEvidenceTitle(evidence: EnvironmentEvidence) {
   flex-direction: column;
   gap: 4px;
   min-width: 0;
-  padding: 10px;
-  border: 1px solid hsl(210deg 18% 91%);
+  padding: 8px;
+  overflow: hidden;
+  background: hsl(var(--accent));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(210deg 25% 98%);
 }
 
 .environment-evidence-panel__evidence-list strong,
@@ -175,6 +184,8 @@ function getEvidenceTitle(evidence: EnvironmentEvidence) {
 
 .environment-evidence-panel__actions {
   display: grid;
-  gap: 10px;
+  gap: 8px;
+  min-height: 0;
+  overflow: hidden;
 }
 </style>
diff --git a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentSiteRail.vue b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentSiteRail.vue
index 41cea48..0353402 100644
--- a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentSiteRail.vue
+++ b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentSiteRail.vue
@@ -94,27 +94,33 @@ function getBadgeStatus(site: EnvironmentSite) {
 .environment-site-rail {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .environment-site-rail__item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   width: 100%;
-  padding: 14px;
-  color: hsl(219deg 22% 18%);
+  min-width: 0;
+  padding: 12px;
+  overflow: hidden;
+  color: hsl(var(--card-foreground));
   text-align: left;
-  border: 1px solid hsl(214deg 18% 86%);
-  border-radius: 8px;
-  background: hsl(0deg 0% 100%);
   cursor: pointer;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
 }
 
 .environment-site-rail__item.is-selected {
-  border-color: hsl(198deg 82% 42%);
-  box-shadow: inset 3px 0 0 hsl(198deg 82% 42%);
+  background: hsl(var(--primary) / 8%);
+  border-color: hsl(var(--primary));
+  box-shadow: inset 3px 0 0 hsl(var(--primary));
 }
 
 .environment-site-rail__topline,
@@ -127,8 +133,12 @@ function getBadgeStatus(site: EnvironmentSite) {
 }
 
 .environment-site-rail__summary {
-  color: hsl(215deg 12% 38%);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
   font-size: 12px;
   line-height: 1.45;
+  color: hsl(var(--muted-foreground));
+  -webkit-box-orient: vertical;
 }
 </style>
diff --git a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentStatusBar.vue b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentStatusBar.vue
index a93748f..1ccc3db 100644
--- a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentStatusBar.vue
+++ b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentStatusBar.vue
@@ -97,12 +97,14 @@ function getStatusColor(status: EnvironmentHealthStatus) {
 .environment-status-bar {
   display: grid;
   grid-template-columns: minmax(260px, 1fr) minmax(260px, auto) auto;
-  gap: 16px;
+  gap: 12px;
   align-items: center;
-  padding: 18px;
-  border: 1px solid hsl(214deg 18% 86%);
+  min-width: 0;
+  padding: 14px;
+  color: hsl(var(--card-foreground));
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(0deg 0% 100%);
 }
 
 .environment-status-bar__summary {
@@ -118,16 +120,16 @@ function getStatusColor(status: EnvironmentHealthStatus) {
 
 .environment-status-bar__heading h1 {
   margin: 0;
-  color: hsl(219deg 22% 18%);
   font-size: 22px;
   font-weight: 700;
   line-height: 1.2;
+  color: hsl(var(--foreground));
 }
 
 .environment-status-bar__eyebrow {
   margin: 0 0 4px;
-  color: hsl(215deg 12% 45%);
   font-size: 12px;
+  color: hsl(var(--muted-foreground));
 }
 
 .environment-status-bar__meta,
@@ -135,8 +137,8 @@ function getStatusColor(status: EnvironmentHealthStatus) {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 14px;
-  color: hsl(215deg 12% 38%);
   font-size: 12px;
+  color: hsl(var(--muted-foreground));
 }
 
 .environment-status-bar__counts span {
@@ -154,6 +156,8 @@ function getStatusColor(status: EnvironmentHealthStatus) {
 @media (width <= 900px) {
   .environment-status-bar {
     grid-template-columns: 1fr;
+    gap: 8px;
+    padding: 12px;
   }
 
   .environment-status-bar__actions {
diff --git a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentTopology.vue b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentTopology.vue
index 5dd3055..56be1b7 100644
--- a/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentTopology.vue
+++ b/apps/web-antdv-next/src/views/dashboard/analytics/components/EnvironmentTopology.vue
@@ -97,11 +97,17 @@ function countUnwiredSignals(service: EnvironmentService) {
 
 <style scoped>
 .environment-topology {
+  display: flex;
+  flex-direction: column;
   min-width: 0;
-  padding: 16px;
-  border: 1px solid hsl(214deg 18% 86%);
+  height: 100%;
+  min-height: 0;
+  padding: 14px;
+  overflow: hidden;
+  color: hsl(var(--card-foreground));
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(0deg 0% 100%);
 }
 
 .environment-topology__header,
@@ -116,52 +122,61 @@ function countUnwiredSignals(service: EnvironmentService) {
 
 .environment-topology__header p {
   margin: 0 0 4px;
-  color: hsl(215deg 12% 45%);
   font-size: 12px;
+  color: hsl(var(--muted-foreground));
 }
 
 .environment-topology__header h2 {
   margin: 0;
-  color: hsl(219deg 22% 18%);
   font-size: 18px;
+  color: hsl(var(--foreground));
 }
 
 .environment-topology__nodes {
   display: grid;
-  gap: 14px;
-  margin-top: 16px;
+  flex: 1 1 0;
+  gap: 10px;
+  min-height: 0;
+  margin-top: 12px;
+  overflow: hidden;
 }
 
 .environment-topology__node {
-  padding: 12px;
-  border: 1px solid hsl(210deg 18% 91%);
+  min-width: 0;
+  padding: 10px;
+  overflow: hidden;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
 }
 
 .environment-topology__services {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-  gap: 10px;
-  margin-top: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+  overflow: hidden;
 }
 
 .environment-topology__service {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  min-height: 124px;
-  padding: 12px;
-  color: hsl(219deg 22% 18%);
+  gap: 6px;
+  min-width: 0;
+  min-height: 104px;
+  padding: 10px;
+  overflow: hidden;
+  color: hsl(var(--foreground));
   text-align: left;
-  border: 1px solid hsl(214deg 18% 86%);
-  border-radius: 8px;
-  background: hsl(210deg 25% 98%);
   cursor: pointer;
+  background: hsl(var(--accent));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
 }
 
 .environment-topology__service.is-selected {
-  border-color: hsl(198deg 82% 42%);
-  background: hsl(198deg 42% 96%);
+  background: hsl(var(--primary) / 10%);
+  border-color: hsl(var(--primary));
 }
 
 .environment-topology__service-name {
@@ -169,9 +184,13 @@ function countUnwiredSignals(service: EnvironmentService) {
 }
 
 .environment-topology__service-summary {
+  display: -webkit-box;
   flex: 1;
-  color: hsl(215deg 12% 38%);
+  overflow: hidden;
+  -webkit-line-clamp: 2;
   font-size: 12px;
   line-height: 1.45;
+  color: hsl(var(--muted-foreground));
+  -webkit-box-orient: vertical;
 }
 </style>
diff --git a/apps/web-antdv-next/src/views/dashboard/analytics/index.vue b/apps/web-antdv-next/src/views/dashboard/analytics/index.vue
index f29ff7b..3b95614 100644
--- a/apps/web-antdv-next/src/views/dashboard/analytics/index.vue
+++ b/apps/web-antdv-next/src/views/dashboard/analytics/index.vue
@@ -493,27 +493,41 @@ function getErrorMessage(error: unknown) {
 
 <style scoped>
 .environment-dashboard-page {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 100%;
-  padding: 16px;
-  background: hsl(210deg 25% 96%);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) minmax(108px, 0.26fr);
+  gap: 12px;
+  width: 100%;
+  height: var(--vben-content-height, 100%);
+  min-height: 0;
+  max-height: var(--vben-content-height, 100%);
+  padding: 12px;
+  overflow: hidden;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background-deep));
 }
 
 .environment-dashboard-page__main {
   display: grid;
-  grid-template-columns: minmax(210px, 260px) minmax(360px, 1fr) minmax(
-      280px,
-      340px
+  grid-template-columns: minmax(196px, 0.72fr) minmax(0, 1.9fr) minmax(
+      248px,
+      0.92fr
     );
-  gap: 16px;
-  align-items: start;
+  gap: 12px;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
 @media (width <= 1180px) {
+  .environment-dashboard-page {
+    grid-template-rows: auto minmax(0, 1fr) minmax(96px, 0.22fr);
+  }
+
   .environment-dashboard-page__main {
-    grid-template-columns: minmax(190px, 240px) 1fr;
+    grid-template-rows: minmax(0, 1fr) minmax(120px, 0.42fr);
+    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
   }
 
   .environment-dashboard-page__main > :last-child {
@@ -523,11 +537,15 @@ function getErrorMessage(error: unknown) {
 
 @media (width <= 760px) {
   .environment-dashboard-page {
-    padding: 10px;
+    grid-template-rows: auto minmax(0, 1fr) minmax(88px, 0.18fr);
+    gap: 8px;
+    padding: 8px;
   }
 
   .environment-dashboard-page__main {
+    grid-template-rows: minmax(0, 0.62fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
     grid-template-columns: 1fr;
+    gap: 8px;
   }
 
   .environment-dashboard-page__main > :last-child {
diff --git a/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatLoginModal.tsx b/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatLoginModal.tsx
index 788c3db..3170ec1 100644
--- a/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatLoginModal.tsx
+++ b/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatLoginModal.tsx
@@ -180,8 +180,10 @@ export default defineComponent({
               <div
                 style={{
                   alignItems: 'center',
-                  border: '1px dashed var(--border-color)',
+                  background: 'hsl(var(--muted))',
+                  border: '1px dashed hsl(var(--border))',
                   borderRadius: '8px',
+                  color: 'hsl(var(--muted-foreground))',
                   display: 'flex',
                   height: '240px',
                   justifyContent: 'center',
diff --git a/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatRuntimeProfileDrawer.tsx b/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatRuntimeProfileDrawer.tsx
index 4acfbe6..3395c5b 100644
--- a/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatRuntimeProfileDrawer.tsx
+++ b/apps/web-antdv-next/src/views/qqbot/account/napcat/NapcatRuntimeProfileDrawer.tsx
@@ -67,9 +67,9 @@ export default defineComponent({
      */
     const renderField = (label: string, value: unknown) => {
       return (
-        <div class="grid grid-cols-[120px_1fr] gap-3 border-b border-solid border-gray-100 py-2 text-sm">
-          <span class="text-gray-500">{label}</span>
-          <span class="break-all">{formatValue(value)}</span>
+        <div class="grid grid-cols-[120px_1fr] gap-3 border-b border-solid border-border py-2 text-sm">
+          <span class="text-muted-foreground">{label}</span>
+          <span class="break-all text-foreground">{formatValue(value)}</span>
         </div>
       );
     };
@@ -84,7 +84,7 @@ export default defineComponent({
       return (
         <section class="mt-4">
           <h3 class="mb-2 text-sm font-medium">{title}</h3>
-          <pre class="max-h-72 overflow-auto rounded bg-gray-50 p-3 text-xs">
+          <pre class="max-h-72 overflow-auto rounded border border-border bg-muted p-3 text-xs text-foreground">
             {JSON.stringify(value, null, 2)}
           </pre>
         </section>
diff --git a/apps/web-antdv-next/src/views/qqbot/plugin-task/components/TaskRunDrawer.tsx b/apps/web-antdv-next/src/views/qqbot/plugin-task/components/TaskRunDrawer.tsx
index a47804c..f0538bf 100644
--- a/apps/web-antdv-next/src/views/qqbot/plugin-task/components/TaskRunDrawer.tsx
+++ b/apps/web-antdv-next/src/views/qqbot/plugin-task/components/TaskRunDrawer.tsx
@@ -42,6 +42,9 @@ export default defineComponent({
       { immediate: true },
     );
 
+    /**
+     * Loads the latest task run records for the selected plugin task drawer.
+     */
     async function loadRuns() {
       if (!props.task?.id) return;
       loading.value = true;
@@ -56,25 +59,32 @@ export default defineComponent({
       }
     }
 
+    /**
+     * Renders one scheduled-task execution record with themed evidence blocks.
+     *
+     * @param item - Task run row returned by the plugin task API.
+     */
     const renderRun = (item: QqbotPluginTaskApi.TaskRun) => (
-      <div class="border-b border-solid border-gray-100 py-3" key={item.id}>
+      <div class="border-b border-solid border-border py-3" key={item.id}>
         <div class="mb-2 flex flex-wrap items-center gap-2">
           <Tag color={runStatusColor[item.status]}>{item.status}</Tag>
           <Tag>{item.triggerType}</Tag>
-          <span>{item.startedAt || item.createTime || '-'}</span>
-          <span>
+          <span class="text-muted-foreground">
+            {item.startedAt || item.createTime || '-'}
+          </span>
+          <span class="text-muted-foreground">
             {item.durationMs === null || item.durationMs === undefined
               ? '-'
               : `${item.durationMs} ms`}
           </span>
         </div>
         {item.safeSummary ? (
-          <pre class="whitespace-pre-wrap rounded bg-gray-50 p-2 text-xs">
+          <pre class="whitespace-pre-wrap rounded border border-border bg-muted p-2 text-xs text-foreground">
             {JSON.stringify(item.safeSummary, null, 2)}
           </pre>
         ) : null}
         {item.errorMessage ? (
-          <div class="mt-2 text-sm text-red-500">{item.errorMessage}</div>
+          <div class="mt-2 text-sm text-destructive">{item.errorMessage}</div>
         ) : null}
       </div>
     );
diff --git a/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginManifestModal.tsx b/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginManifestModal.tsx
index 366cc75..770b0d4 100644
--- a/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginManifestModal.tsx
+++ b/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginManifestModal.tsx
@@ -58,7 +58,7 @@ export default defineComponent({
       >
         {props.mode === 'validate' ? (
           <textarea
-            class="w-full resize-y rounded border border-solid border-gray-200 p-3 font-mono text-sm outline-none"
+            class="w-full resize-y rounded border border-solid border-border bg-background p-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:border-primary"
             onInput={(event) => {
               emit('update:value', (event.target as HTMLTextAreaElement).value);
             }}
@@ -68,7 +68,9 @@ export default defineComponent({
         ) : (
           <div class="space-y-3">
             <label class="block">
-              <span class="mb-1 block text-sm text-gray-600">插件包路径</span>
+              <span class="mb-1 block text-sm text-muted-foreground">
+                插件包路径
+              </span>
               <AInput
                 onUpdate:value={(value: string) => {
                   emit('update:packagePath', value);
@@ -78,7 +80,9 @@ export default defineComponent({
               />
             </label>
             <label class="block">
-              <span class="mb-1 block text-sm text-gray-600">包 Hash</span>
+              <span class="mb-1 block text-sm text-muted-foreground">
+                包 Hash
+              </span>
               <AInput
                 onUpdate:value={(value: string) => {
                   emit('update:packageHash', value);
diff --git a/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginPlatformStateDrawer.tsx b/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginPlatformStateDrawer.tsx
index 4a9df64..45188fd 100644
--- a/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginPlatformStateDrawer.tsx
+++ b/apps/web-antdv-next/src/views/qqbot/plugin/components/PluginPlatformStateDrawer.tsx
@@ -43,6 +43,11 @@ export default defineComponent({
   },
   emits: ['close', 'installationAction'],
   setup(props, { emit }) {
+    /**
+     * Maps plugin platform status values to readable themed status tags.
+     *
+     * @param status - Runtime, binding, or installation status from the API.
+     */
     const renderStatusTag = (status?: string) => {
       if (!status) return <Tag color="default">-</Tag>;
       const color =
@@ -50,21 +55,21 @@ export default defineComponent({
       return <Tag color={color}>{getQqbotStatusLabel(status)}</Tag>;
     };
 
+    /**
+     * Renders recent runtime events with safe summaries for diagnosis.
+     */
     const renderEvents = () =>
       props.runtimeEvents.length > 0 ? (
         <div class="space-y-3">
           {props.runtimeEvents.map((item) => (
-            <div
-              class="border-b border-solid border-gray-100 pb-3"
-              key={item.id}
-            >
-              <div>
+            <div class="border-b border-solid border-border pb-3" key={item.id}>
+              <div class="flex flex-wrap items-center gap-2">
                 <Tag color={item.level === 'error' ? 'error' : 'processing'}>
                   {item.level}
                 </Tag>
-                <span>{item.eventType}</span>
+                <span class="text-foreground">{item.eventType}</span>
               </div>
-              <pre class="mt-2 whitespace-pre-wrap text-xs">
+              <pre class="mt-2 whitespace-pre-wrap rounded border border-border bg-muted p-2 text-xs text-foreground">
                 {JSON.stringify(item.safeSummary || {}, null, 2)}
               </pre>
             </div>
@@ -74,16 +79,16 @@ export default defineComponent({
         <span>暂无运行事件</span>
       );
 
+    /**
+     * Renders account-to-plugin binding rows for the selected platform state.
+     */
     const renderBindings = () =>
       props.accountBindings.length > 0 ? (
         <div class="space-y-3">
           {props.accountBindings.map((item) => (
-            <div
-              class="border-b border-solid border-gray-100 pb-3"
-              key={item.id}
-            >
+            <div class="border-b border-solid border-border pb-3" key={item.id}>
               {renderStatusTag(item.enabled ? 'enabled' : 'disabled')}
-              <span>
+              <span class="text-foreground">
                 插件 {item.pluginId} / 账号 {item.accountId}
               </span>
             </div>
@@ -93,18 +98,18 @@ export default defineComponent({
         <span>暂无账号绑定</span>
       );
 
+    /**
+     * Renders installed plugin rows and exposes safe lifecycle actions.
+     */
     const renderInstallations = () =>
       props.installations.length > 0 ? (
         <div class="space-y-3">
           {props.installations.map((item) => (
-            <div
-              class="border-b border-solid border-gray-100 pb-3"
-              key={item.id}
-            >
+            <div class="border-b border-solid border-border pb-3" key={item.id}>
               <div class="mb-2 flex items-center gap-2">
                 {renderStatusTag(item.status)}
                 <Tag>{item.runtimeStatus || '-'}</Tag>
-                <span>
+                <span class="text-foreground">
                   插件 {item.pluginId} / 版本 {item.versionId}
                 </span>
               </div>
@@ -135,6 +140,9 @@ export default defineComponent({
         <span>暂无安装记录</span>
       );
 
+    /**
+     * Selects the drawer body according to the active platform state tab.
+     */
     const renderContent = () => {
       if (props.mode === 'events') return renderEvents();
       if (props.mode === 'bindings') return renderBindings();