diff --git a/package.json b/package.json
index db47c8a..5708686 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@microsoft/clarity": "^1.0.2",
     "@sentry/vue": "^10.36.0",
     "@vueuse/core": "^14.1.0",
+    "@wydev/noise-core": "^0.1.0",
     "axios": "^1.13.2",
     "idb": "^8.0.3",
     "js-base64": "^3.7.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eef1efb..fd87ea4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@vueuse/core':
         specifier: ^14.1.0
         version: 14.1.0(vue@3.5.25(typescript@5.9.3))
+      '@wydev/noise-core':
+        specifier: ^0.1.0
+        version: 0.1.0
       axios:
         specifier: ^1.13.2
         version: 1.13.2
@@ -1469,6 +1472,9 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@wydev/noise-core@0.1.0':
+    resolution: {integrity: sha512-gHPDPasN8Iy3lHjv/3yhev3rpkMUd/o4iIQQKAKwK2Sewqu76dXMxqCsw9gGEf5ZZBf0YhwClsS7lcDlRo0Qxw==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -5083,6 +5089,10 @@ snapshots:
     dependencies:
       vue: 3.5.25(typescript@5.9.3)
 
+  '@wydev/noise-core@0.1.0':
+    dependencies:
+      uuid: 13.0.0
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
diff --git a/src/components/NoiseMonitorCard.vue b/src/components/NoiseMonitorCard.vue
new file mode 100644
index 0000000..758a81d
--- /dev/null
+++ b/src/components/NoiseMonitorCard.vue
@@ -0,0 +1,284 @@
+<template>
+  <v-card
+    class="noise-monitor-card"
+    elevation="2"
+    border
+    rounded="xl"
+    height="100%"
+    style="cursor: pointer"
+    @click="showDetail = true"
+  >
+    <v-card-text class="pa-5 d-flex flex-column" style="height: 100%">
+      <!-- 顶部标题行 -->
+      <div class="d-flex align-center mb-3">
+        <v-icon
+          :color="statusColor"
+          class="mr-2"
+          size="20"
+        >
+          mdi-microphone
+        </v-icon>
+        <span class="text-subtitle-2 font-weight-medium text-medium-emphasis">
+          环境噪音监测
+        </span>
+        <v-spacer />
+        <v-chip
+          :color="statusColor"
+          size="x-small"
+          variant="tonal"
+          label
+        >
+          {{ statusLabel }}
+        </v-chip>
+      </div>
+
+      <!-- 分贝显示 -->
+      <div class="noise-db-display d-flex align-center justify-center flex-grow-1">
+        <div class="text-center">
+          <div class="d-flex align-end justify-center">
+            <span
+              class="noise-db-value font-weight-bold"
+              :style="{ color: `rgb(var(--v-theme-${dbColor}))`, fontSize: dbFontSize }"
+            >
+              {{ currentDb }}
+            </span>
+            <span class="text-caption text-medium-emphasis ml-1 mb-1">dB</span>
+          </div>
+          <div class="noise-level-label text-caption mt-1" :class="`text-${dbColor}`">
+            {{ noiseLevel }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部迷你波形 + 分数 -->
+      <div class="d-flex align-center mt-2">
+        <!-- 迷你波形条 -->
+        <div class="noise-mini-bars d-flex align-end" style="height: 20px; gap: 2px; flex: 1;">
+          <div
+            v-for="(val, i) in miniBarValues"
+            :key="i"
+            class="noise-mini-bar"
+            :style="{
+              height: `${val}%`,
+              backgroundColor: `rgb(var(--v-theme-${barColor(val)}))`,
+              flex: 1,
+              borderRadius: '2px',
+              transition: 'height 0.15s ease',
+              minWidth: '3px',
+              maxWidth: '6px',
+            }"
+          />
+        </div>
+
+        <!-- 当前评分 -->
+        <div v-if="currentScore !== null" class="ml-3 text-center">
+          <div
+            class="font-weight-bold text-subtitle-1"
+            :class="`text-${scoreColor}`"
+          >
+            {{ currentScore }}
+          </div>
+          <div class="text-caption text-medium-emphasis" style="font-size: 10px; line-height: 1;">
+            评分
+          </div>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+
+  <!-- 详情对话框 -->
+  <noise-monitor-detail
+    v-model="showDetail"
+    :status="status"
+    :current-db="currentDb"
+    :current-dbfs="currentDbfs"
+    :noise-level="noiseLevel"
+    :db-color="dbColor"
+    :current-score="currentScore"
+    :score-detail="scoreDetail"
+    :ring-buffer="ringBuffer"
+    :last-slice="lastSlice"
+    :history="history"
+    :is-monitoring="isMonitoring"
+    @start="startMonitoring"
+    @stop="stopMonitoring"
+    @calibrate="handleCalibrate"
+    @clear-history="handleClearHistory"
+  />
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import { noiseService } from '@wydev/noise-core'
+
+const NoiseMonitorDetail = defineAsyncComponent(() =>
+  import('@/components/NoiseMonitorDetail.vue')
+)
+
+// 最近 N 个采样用于迷你波形
+const MINI_BAR_COUNT = 16
+
+export default {
+  name: 'NoiseMonitorCard',
+  components: { NoiseMonitorDetail },
+  data() {
+    return {
+      showDetail: false,
+      isMonitoring: false,
+      status: 'initializing',
+      currentDbfs: -100,
+      currentDisplayDb: 0,
+      currentScore: null,
+      scoreDetail: null,
+      ringBuffer: [],
+      lastSlice: null,
+      history: [],
+      unsubscribe: null,
+      recentDbValues: new Array(MINI_BAR_COUNT).fill(0),
+    }
+  },
+  computed: {
+    currentDb() {
+      if (!this.isMonitoring || this.status !== 'active') return '--'
+      return Math.round(this.currentDisplayDb)
+    },
+    statusColor() {
+      if (this.status === 'active') return 'success'
+      if (this.status === 'paused') return 'warning'
+      if (this.status === 'permission-denied' || this.status === 'error') return 'error'
+      return 'grey'
+    },
+    statusLabel() {
+      const map = {
+        initializing: '就绪',
+        active: '监测中',
+        paused: '已暂停',
+        'permission-denied': '无权限',
+        error: '错误',
+      }
+      return this.isMonitoring ? (map[this.status] || '未知') : '未启动'
+    },
+    dbColor() {
+      const db = typeof this.currentDb === 'number' ? this.currentDb : 0
+      if (db < 40) return 'success'
+      if (db < 55) return 'light-green'
+      if (db < 70) return 'warning'
+      if (db < 85) return 'orange'
+      return 'error'
+    },
+    dbFontSize() {
+      return '2.5rem'
+    },
+    noiseLevel() {
+      const db = typeof this.currentDb === 'number' ? this.currentDb : 0
+      if (!this.isMonitoring || this.status !== 'active') return '等待监测'
+      if (db < 30) return '极其安静'
+      if (db < 40) return '非常安静'
+      if (db < 50) return '安静'
+      if (db < 60) return '正常交谈'
+      if (db < 70) return '较为嘈杂'
+      if (db < 80) return '嘈杂'
+      if (db < 90) return '非常嘈杂'
+      return '极度嘈杂'
+    },
+    scoreColor() {
+      if (this.currentScore === null) return 'grey'
+      if (this.currentScore >= 80) return 'success'
+      if (this.currentScore >= 60) return 'warning'
+      return 'error'
+    },
+    miniBarValues() {
+      return this.recentDbValues.map(db => {
+        // 将 dB 值 (0-100) 映射到 5%-100% 高度
+        return Math.max(5, Math.min(100, db))
+      })
+    },
+  },
+  mounted() {
+    this.history = noiseService.getHistory()
+  },
+  beforeUnmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe()
+    }
+  },
+  methods: {
+    async startMonitoring() {
+      try {
+        await noiseService.start()
+        this.isMonitoring = true
+        this.unsubscribe = noiseService.subscribe((snapshot) => {
+          this.status = snapshot.status
+          this.currentDbfs = snapshot.currentDbfs
+          this.currentDisplayDb = snapshot.currentDisplayDb
+          this.ringBuffer = snapshot.ringBuffer || []
+          this.lastSlice = snapshot.lastSlice || null
+          this.currentScore = snapshot.currentScore ?? null
+          this.scoreDetail = snapshot.currentScoreDetail ?? null
+
+          // 更新迷你波形数据
+          const dbVal = Math.max(0, Math.min(100, this.currentDisplayDb))
+          this.recentDbValues.push(dbVal)
+          if (this.recentDbValues.length > MINI_BAR_COUNT) {
+            this.recentDbValues.shift()
+          }
+
+          // 更新历史
+          this.history = noiseService.getHistory()
+        })
+      } catch (e) {
+        console.error('噪音监测启动失败:', e)
+        this.status = 'error'
+      }
+    },
+    stopMonitoring() {
+      if (this.unsubscribe) {
+        this.unsubscribe()
+        this.unsubscribe = null
+      }
+      noiseService.stop()
+      this.isMonitoring = false
+      this.status = 'initializing'
+      this.recentDbValues = new Array(MINI_BAR_COUNT).fill(0)
+      this.currentScore = null
+      this.scoreDetail = null
+    },
+    handleCalibrate(targetDb) {
+      noiseService.calibrate(targetDb, (success, msg) => {
+        console.log(success ? '校准成功' : `校准失败: ${msg}`)
+      })
+    },
+    handleClearHistory() {
+      noiseService.clearHistory()
+      this.history = []
+    },
+    barColor(val) {
+      if (val < 30) return 'success'
+      if (val < 55) return 'light-green'
+      if (val < 70) return 'warning'
+      if (val < 85) return 'orange'
+      return 'error'
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.noise-monitor-card {
+  overflow: hidden;
+
+  .noise-db-value {
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .noise-level-label {
+    font-weight: 500;
+    letter-spacing: 0.5px;
+  }
+
+  .noise-mini-bars {
+    opacity: 0.85;
+  }
+}
+</style>
diff --git a/src/components/NoiseMonitorDetail.vue b/src/components/NoiseMonitorDetail.vue
new file mode 100644
index 0000000..9e674b3
--- /dev/null
+++ b/src/components/NoiseMonitorDetail.vue
@@ -0,0 +1,1392 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="900"
+    scrollable
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <v-card class="rounded-xl noise-detail-card">
+      <!-- 顶部标题栏 -->
+      <v-card-title class="d-flex align-center pa-4">
+        <v-icon
+          class="mr-2"
+          color="primary"
+        >
+          mdi-waveform
+        </v-icon>
+        <span class="text-h6 font-weight-bold">环境噪音监测</span>
+        <v-spacer />
+        <v-chip
+          v-if="sessionActive"
+          color="teal"
+          size="small"
+          variant="tonal"
+          class="mr-2"
+        >
+          <v-icon
+            start
+            size="12"
+          >
+            mdi-record-circle
+          </v-icon>
+          {{ sessionData?.sessionName || '自习中' }}
+        </v-chip>
+        <v-chip
+          :color="isMonitoring ? 'success' : 'grey'"
+          size="small"
+          variant="tonal"
+          class="mr-2"
+        >
+          {{ isMonitoring ? '监测中' : '已停止' }}
+        </v-chip>
+        <v-btn
+          icon="mdi-close"
+          size="small"
+          variant="text"
+          @click="$emit('update:modelValue', false)"
+        />
+      </v-card-title>
+
+      <!-- 分页标签 -->
+      <v-tabs
+        v-model="activeTab"
+        color="primary"
+        density="compact"
+        grow
+      >
+        <v-tab value="realtime">
+          <v-icon
+            start
+            size="18"
+          >
+            mdi-pulse
+          </v-icon>
+          实时监测
+        </v-tab>
+        <v-tab value="reports">
+          <v-icon
+            start
+            size="18"
+          >
+            mdi-chart-bar
+          </v-icon>
+          统计报告
+        </v-tab>
+        <v-tab value="settings">
+          <v-icon
+            start
+            size="18"
+          >
+            mdi-cog
+          </v-icon>
+          自习配置
+        </v-tab>
+      </v-tabs>
+
+      <v-divider />
+
+      <v-card-text
+        class="pa-0"
+        style="max-height: 70vh;"
+      >
+        <v-tabs-window v-model="activeTab">
+          <!-- ==================== 实时监测 ==================== -->
+          <v-tabs-window-item value="realtime">
+            <!-- 分贝仪表区 -->
+            <div class="noise-dashboard pa-5">
+              <div class="d-flex align-center justify-center">
+                <div class="text-center">
+                  <div
+                    class="noise-gauge-ring"
+                    :class="`ring-${dbColor}`"
+                  >
+                    <div class="noise-gauge-inner d-flex flex-column align-center justify-center">
+                      <span
+                        class="noise-gauge-value font-weight-bold"
+                        :class="`text-${dbColor}`"
+                      >
+                        {{ currentDb }}
+                      </span>
+                      <span class="text-caption text-medium-emphasis">dB</span>
+                    </div>
+                  </div>
+                  <div
+                    class="text-subtitle-1 font-weight-medium mt-3"
+                    :class="`text-${dbColor}`"
+                  >
+                    {{ noiseLevel }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- 分贝条 -->
+              <div
+                class="noise-level-bar mt-5 mx-auto"
+                style="max-width: 500px;"
+              >
+                <div class="d-flex justify-space-between text-caption text-medium-emphasis mb-1">
+                  <span>0 dB</span>
+                  <span>50</span>
+                  <span>100 dB</span>
+                </div>
+                <div class="noise-gradient-bar">
+                  <div
+                    v-if="isMonitoring && typeof currentDb === 'number'"
+                    class="noise-indicator"
+                    :style="{ left: `${Math.min(100, Math.max(0, currentDb))}%` }"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <v-divider />
+
+            <!-- 实时波形 -->
+            <div class="pa-5">
+              <div class="d-flex align-center mb-3">
+                <v-icon
+                  class="mr-2"
+                  size="18"
+                  color="primary"
+                >
+                  mdi-chart-line
+                </v-icon>
+                <span class="text-subtitle-2 font-weight-medium">噪音走势</span>
+                <v-spacer />
+                <span class="text-caption text-medium-emphasis">
+                  最近 {{ ringBuffer.length }} 个采样
+                </span>
+              </div>
+              <div
+                ref="waveformContainer"
+                class="noise-waveform"
+              >
+                <svg
+                  width="100%"
+                  height="120"
+                  :viewBox="`0 0 ${waveformWidth} 120`"
+                  preserveAspectRatio="none"
+                >
+                  <!-- 网格 -->
+                  <line
+                    v-for="y in gridLines"
+                    :key="`grid-${y.val}`"
+                    x1="0"
+                    :y1="y.y"
+                    :x2="waveformWidth"
+                    :y2="y.y"
+                    stroke="currentColor"
+                    stroke-opacity="0.08"
+                    stroke-dasharray="4,4"
+                  />
+                  <!-- 阈值线 -->
+                  <line
+                    v-if="alertThreshold"
+                    x1="0"
+                    :y1="dbToY(alertThreshold)"
+                    :x2="waveformWidth"
+                    :y2="dbToY(alertThreshold)"
+                    stroke="rgb(var(--v-theme-error))"
+                    stroke-opacity="0.5"
+                    stroke-dasharray="6,3"
+                    stroke-width="1.5"
+                  />
+                  <!-- 波形填充 -->
+                  <path
+                    v-if="waveformPath"
+                    :d="waveformFillPath"
+                    :fill="`url(#waveGradient-rt)`"
+                    opacity="0.3"
+                  />
+                  <!-- 波形线 -->
+                  <path
+                    v-if="waveformPath"
+                    :d="waveformPath"
+                    fill="none"
+                    stroke="rgb(var(--v-theme-primary))"
+                    stroke-width="2"
+                    stroke-linejoin="round"
+                    stroke-linecap="round"
+                  />
+                  <defs>
+                    <linearGradient
+                      id="waveGradient-rt"
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
+                      <stop
+                        offset="0%"
+                        stop-color="rgb(var(--v-theme-primary))"
+                        stop-opacity="0.4"
+                      />
+                      <stop
+                        offset="100%"
+                        stop-color="rgb(var(--v-theme-primary))"
+                        stop-opacity="0.02"
+                      />
+                    </linearGradient>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+
+            <v-divider />
+
+            <!-- 当前评分 -->
+            <div class="pa-5">
+              <div class="d-flex align-center mb-3">
+                <v-icon
+                  class="mr-2"
+                  size="18"
+                  color="amber"
+                >
+                  mdi-star-circle
+                </v-icon>
+                <span class="text-subtitle-2 font-weight-medium">实时评分</span>
+              </div>
+              <div
+                v-if="currentScore !== null"
+                class="d-flex flex-wrap ga-4"
+              >
+                <v-card
+                  variant="tonal"
+                  :color="scoreColor"
+                  rounded="xl"
+                  class="flex-grow-1"
+                  min-width="200"
+                >
+                  <v-card-text class="d-flex align-center pa-4">
+                    <v-progress-circular
+                      :model-value="currentScore"
+                      :color="scoreColor"
+                      :size="56"
+                      :width="5"
+                      class="mr-4"
+                    >
+                      <span class="text-h6 font-weight-bold">{{ currentScore }}</span>
+                    </v-progress-circular>
+                    <div>
+                      <div class="text-subtitle-1 font-weight-bold">
+                        {{ scoreLabel }}
+                      </div>
+                      <div class="text-caption text-medium-emphasis">
+                        综合评分 (0-100)
+                      </div>
+                    </div>
+                  </v-card-text>
+                </v-card>
+
+                <v-card
+                  v-if="scoreDetail"
+                  variant="outlined"
+                  rounded="xl"
+                  class="flex-grow-1"
+                  min-width="200"
+                >
+                  <v-card-text class="pa-4">
+                    <div class="text-subtitle-2 font-weight-medium mb-2">
+                      扣分扣因
+                    </div>
+                    <div
+                      v-for="item in scorePenaltyItems"
+                      :key="item.label"
+                      class="d-flex align-center justify-space-between mb-1"
+                    >
+                      <div class="d-flex align-center">
+                        <v-icon
+                          :color="item.color"
+                          size="14"
+                          class="mr-2"
+                        >
+                          {{ item.icon }}
+                        </v-icon>
+                        <span class="text-body-2">{{ item.label }}</span>
+                      </div>
+                      <div
+                        class="d-flex align-center"
+                        style="min-width: 140px;"
+                      >
+                        <v-progress-linear
+                          :model-value="item.percent"
+                          :color="item.color"
+                          height="6"
+                          rounded
+                          class="mr-2"
+                        />
+                        <span
+                          class="text-caption font-weight-medium"
+                          style="min-width: 36px; text-align: right;"
+                        >
+                          {{ item.percent }}%
+                        </span>
+                      </div>
+                    </div>
+                  </v-card-text>
+                </v-card>
+              </div>
+              <div
+                v-else
+                class="text-center text-medium-emphasis py-4"
+              >
+                <v-icon
+                  size="32"
+                  class="mb-2"
+                >
+                  mdi-chart-arc
+                </v-icon>
+                <div class="text-body-2">
+                  开始监测后将显示评分
+                </div>
+              </div>
+            </div>
+
+            <v-divider />
+
+            <!-- 操作按钮 -->
+            <div class="pa-4 d-flex align-center">
+              <v-btn
+                v-if="!isMonitoring"
+                color="success"
+                variant="elevated"
+                prepend-icon="mdi-play"
+                size="large"
+                class="px-6"
+                @click="$emit('start')"
+              >
+                开始监测
+              </v-btn>
+              <v-btn
+                v-else
+                color="error"
+                variant="tonal"
+                prepend-icon="mdi-stop"
+                size="large"
+                class="px-6"
+                @click="$emit('stop')"
+              >
+                停止监测
+              </v-btn>
+              <v-spacer />
+              <v-btn
+                color="deep-purple"
+                variant="tonal"
+                prepend-icon="mdi-crosshairs-gps"
+                :disabled="!isMonitoring"
+                :loading="isCalibrating"
+                @click="doCalibrate"
+              >
+                校准({{ calibrateTarget }}dB)
+              </v-btn>
+            </div>
+          </v-tabs-window-item>
+
+          <!-- ==================== 统计报告 ==================== -->
+          <v-tabs-window-item value="reports">
+            <div
+              v-if="sortedDateKeys.length === 0"
+              class="text-center text-medium-emphasis py-12"
+            >
+              <v-icon
+                size="48"
+                class="mb-3"
+              >
+                mdi-chart-box-outline
+              </v-icon>
+              <div class="text-body-1">
+                暂无统计报告
+              </div>
+              <div class="text-caption mt-1">
+                在配置的晚自习时间段内，系统会自动记录并生成报告
+              </div>
+            </div>
+
+            <template v-else>
+              <!-- 日期选择器 + 操作 -->
+              <div class="pa-4">
+                <div class="d-flex align-center flex-wrap ga-2 mb-3">
+                  <v-icon
+                    size="18"
+                    color="teal"
+                    class="mr-1"
+                  >
+                    mdi-calendar
+                  </v-icon>
+                  <span class="text-subtitle-2 font-weight-medium">选择日期</span>
+                  <v-spacer />
+                  <v-btn
+                    color="error"
+                    size="x-small"
+                    variant="text"
+                    prepend-icon="mdi-delete-sweep"
+                    @click="confirmClearMode = 'all'"
+                  >
+                    清空全部
+                  </v-btn>
+                </div>
+                <div class="d-flex flex-wrap ga-2">
+                  <v-chip
+                    v-for="dateKey in sortedDateKeys"
+                    :key="dateKey"
+                    :color="selectedDate === dateKey ? 'primary' : undefined"
+                    :variant="selectedDate === dateKey ? 'elevated' : 'tonal'"
+                    size="small"
+                    @click="$emit('select-date', dateKey)"
+                  >
+                    <v-icon
+                      start
+                      size="14"
+                    >
+                      mdi-calendar-blank
+                    </v-icon>
+                    {{ formatDateLabel(dateKey) }}
+                    <v-badge
+                      :content="reportMeta.dates[dateKey].count"
+                      color="primary"
+                      inline
+                      class="ml-1"
+                    />
+                  </v-chip>
+                </div>
+              </div>
+
+              <v-divider />
+
+              <!-- 当日元数据摘要 -->
+              <div
+                v-if="selectedDate && reportMeta.dates[selectedDate]"
+                class="pa-4 pb-0"
+              >
+                <div class="d-flex align-center ga-3 flex-wrap">
+                  <div class="text-h6 font-weight-bold">
+                    {{ formatDateLabel(selectedDate) }}
+                  </div>
+                  <v-chip
+                    size="small"
+                    :color="metaScoreColor(reportMeta.dates[selectedDate].avgScore)"
+                    variant="tonal"
+                  >
+                    均分 {{ reportMeta.dates[selectedDate].avgScore }}
+                  </v-chip>
+                  <v-chip
+                    size="small"
+                    variant="tonal"
+                  >
+                    {{ reportMeta.dates[selectedDate].count }} 条记录
+                  </v-chip>
+                  <v-spacer />
+                  <v-btn
+                    color="error"
+                    size="x-small"
+                    variant="text"
+                    prepend-icon="mdi-delete"
+                    @click="confirmClearMode = 'date'"
+                  >
+                    清空当日
+                  </v-btn>
+                </div>
+              </div>
+
+              <!-- 当日报告列表 -->
+              <div
+                v-if="dateReports.length === 0 && selectedDate"
+                class="text-center text-medium-emphasis py-8"
+              >
+                <v-icon size="32">
+                  mdi-file-document-outline
+                </v-icon>
+                <div class="text-body-2 mt-1">
+                  该日期暂无报告数据
+                </div>
+              </div>
+
+              <!-- 报告选择条 -->
+              <div
+                v-if="dateReports.length > 0"
+                class="pa-4 pt-3 d-flex flex-wrap ga-2"
+              >
+                <v-chip
+                  v-for="(report, idx) in dateReports"
+                  :key="report.startTime"
+                  :color="selectedReportIndex === idx ? 'teal' : undefined"
+                  :variant="selectedReportIndex === idx ? 'elevated' : 'outlined'"
+                  size="small"
+                  @click="selectedReportIndex = idx"
+                >
+                  {{ report.sessionName }}
+                  <span class="text-caption ml-1">{{ formatTime(report.startTime) }}</span>
+                </v-chip>
+              </div>
+
+              <v-divider v-if="selectedReport" />
+
+              <!-- 选中的报告 -->
+              <div
+                v-if="selectedReport"
+                class="report-content"
+              >
+                <!-- 报告标题 -->
+                <div class="pa-5 pb-0">
+                  <div class="text-h6 font-weight-bold d-flex align-center">
+                    {{ selectedReport.sessionName }} 统计报告
+                  </div>
+                </div>
+
+                <!-- 报告概览 6宫格 -->
+                <div class="pa-5">
+                  <div class="d-flex align-center mb-3">
+                    <span class="report-section-line bg-teal" />
+                    <span class="text-subtitle-2 font-weight-bold ml-2">报告概览</span>
+                  </div>
+                  <div class="report-grid">
+                    <div class="report-stat-card">
+                      <div class="text-caption text-medium-emphasis">
+                        时长
+                      </div>
+                      <div class="text-h6 font-weight-bold">
+                        {{ formatDuration(selectedReport.duration) }}
+                      </div>
+                    </div>
+                    <div class="report-stat-card">
+                      <div class="text-caption text-medium-emphasis">
+                        表现
+                      </div>
+                      <div class="text-h6 font-weight-bold">
+                        {{ selectedReport.score }} 分
+                        <span class="text-caption">（{{ reportScoreLabel(selectedReport.score) }}）</span>
+                      </div>
+                    </div>
+                    <div class="report-stat-card">
+                      <div class="text-caption text-medium-emphasis">
+                        峰值
+                      </div>
+                      <div class="text-h6 font-weight-bold">
+                        {{ selectedReport.maxDb }} dB
+                      </div>
+                    </div>
+                    <div class="report-stat-card">
+                      <div class="text-caption text-medium-emphasis">
+                        平均
+                      </div>
+                      <div class="text-h6 font-weight-bold">
+                        {{ selectedReport.avgDb }} dB
+                      </div>
+                    </div>
+                    <div class="report-stat-card">
+                      <div class="text-caption text-medium-emphasis">
+                        超阈时长
+                      </div>
+                      <div class="text-h6 font-weight-bold">
+                        {{ formatSeconds(selectedReport.overThresholdDuration) }}
+                      </div>
+                    </div>
+                    <div class="report-stat-card">
+                      <div class="text-caption text-medium-emphasis">
+                        打断次数
+                      </div>
+                      <div class="text-h6 font-weight-bold">
+                        {{ selectedReport.segmentCount }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 噪音走势图 -->
+                <div class="pa-5">
+                  <div class="d-flex align-center mb-3">
+                    <span class="report-section-line bg-teal" />
+                    <span class="text-subtitle-2 font-weight-bold ml-2">噪音走势</span>
+                  </div>
+                  <div
+                    ref="reportChartContainer"
+                    class="noise-waveform"
+                  >
+                    <svg
+                      width="100%"
+                      height="140"
+                      :viewBox="`0 0 ${reportChartWidth} 140`"
+                      preserveAspectRatio="none"
+                    >
+                      <!-- Y轴网格 -->
+                      <line
+                        v-for="y in reportGridLines"
+                        :key="`rg-${y.val}`"
+                        x1="0"
+                        :y1="y.y"
+                        :x2="reportChartWidth"
+                        :y2="y.y"
+                        stroke="currentColor"
+                        stroke-opacity="0.1"
+                        stroke-dasharray="4,4"
+                      />
+                      <!-- 阈值线 -->
+                      <line
+                        x1="0"
+                        :y1="reportDbToY(selectedReport.alertThresholdDb || 55)"
+                        :x2="reportChartWidth"
+                        :y2="reportDbToY(selectedReport.alertThresholdDb || 55)"
+                        stroke="rgb(var(--v-theme-error))"
+                        stroke-opacity="0.6"
+                        stroke-dasharray="6,3"
+                        stroke-width="1.5"
+                      />
+                      <!-- 走势填充 -->
+                      <path
+                        v-if="reportWaveformPath"
+                        :d="reportWaveformFillPath"
+                        fill="url(#reportGrad)"
+                        opacity="0.3"
+                      />
+                      <!-- 走势线 -->
+                      <path
+                        v-if="reportWaveformPath"
+                        :d="reportWaveformPath"
+                        fill="none"
+                        stroke="rgb(var(--v-theme-primary))"
+                        stroke-width="1.5"
+                        stroke-linejoin="round"
+                      />
+                      <defs>
+                        <linearGradient
+                          id="reportGrad"
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop
+                            offset="0%"
+                            stop-color="rgb(var(--v-theme-primary))"
+                            stop-opacity="0.3"
+                          />
+                          <stop
+                            offset="100%"
+                            stop-color="rgb(var(--v-theme-primary))"
+                            stop-opacity="0.02"
+                          />
+                        </linearGradient>
+                      </defs>
+                    </svg>
+                  </div>
+                  <div class="text-caption text-medium-emphasis mt-2">
+                    统计范围：{{ formatFullTime(selectedReport.startTime) }} - {{ formatFullTime(selectedReport.endTime) }}；
+                    噪音报警阈值: {{ selectedReport.alertThresholdDb || 55 }} dB；
+                    覆盖率: {{ reportCoverage }}%
+                  </div>
+                </div>
+
+                <!-- 更多统计 -->
+                <div class="pa-5">
+                  <div class="d-flex align-center mb-3">
+                    <span class="report-section-line bg-teal" />
+                    <span class="text-subtitle-2 font-weight-bold ml-2">更多统计</span>
+                  </div>
+                  <div class="d-flex flex-wrap ga-4">
+                    <!-- 噪音等级分布 -->
+                    <v-card
+                      variant="outlined"
+                      rounded="xl"
+                      class="flex-grow-1"
+                      min-width="280"
+                    >
+                      <v-card-text class="pa-4">
+                        <div class="text-subtitle-2 font-weight-medium mb-3">
+                          噪音等级分布
+                        </div>
+                        <div class="noise-level-distribution">
+                          <div
+                            class="d-flex"
+                            style="height: 16px; border-radius: 8px; overflow: hidden;"
+                          >
+                            <div
+                              v-for="seg in levelDistribution"
+                              :key="seg.label"
+                              :style="{
+                                width: `${seg.percent}%`,
+                                backgroundColor: seg.color,
+                                minWidth: seg.percent > 0 ? '4px' : '0',
+                              }"
+                            />
+                          </div>
+                          <div class="d-flex flex-wrap ga-3 mt-3 justify-center">
+                            <div
+                              v-for="seg in levelDistribution"
+                              :key="`leg-${seg.label}`"
+                              class="d-flex align-center"
+                            >
+                              <span
+                                class="d-inline-block mr-1"
+                                :style="{
+                                  width: '10px',
+                                  height: '10px',
+                                  borderRadius: '2px',
+                                  backgroundColor: seg.color,
+                                }"
+                              />
+                              <span class="text-caption text-medium-emphasis">
+                                {{ seg.label }} ({{ seg.percent }}%)
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </v-card-text>
+                    </v-card>
+
+                    <!-- 扣分扣因 -->
+                    <v-card
+                      variant="outlined"
+                      rounded="xl"
+                      class="flex-grow-1"
+                      min-width="280"
+                    >
+                      <v-card-text class="pa-4">
+                        <div class="text-subtitle-2 font-weight-medium mb-3">
+                          扣分扣因 (越长扣分越多)
+                        </div>
+                        <div
+                          v-for="item in reportPenaltyItems"
+                          :key="item.label"
+                          class="d-flex align-center mb-2"
+                        >
+                          <span
+                            class="text-body-2 mr-3"
+                            style="min-width: 32px;"
+                          >{{ item.label }}</span>
+                          <v-progress-linear
+                            :model-value="item.percent"
+                            :color="item.color"
+                            height="10"
+                            rounded
+                            class="flex-grow-1 mr-2"
+                          />
+                          <span
+                            class="text-body-2 font-weight-bold"
+                            style="min-width: 40px; text-align: right;"
+                          >{{ item.percent }}%</span>
+                        </div>
+                      </v-card-text>
+                    </v-card>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </v-tabs-window-item>
+
+          <!-- ==================== 自习配置 ==================== -->
+          <v-tabs-window-item value="settings">
+            <div class="pa-5">
+              <div class="d-flex align-center mb-4">
+                <v-icon
+                  class="mr-2"
+                  color="teal"
+                >
+                  mdi-clock-edit-outline
+                </v-icon>
+                <span class="text-subtitle-1 font-weight-bold">晚自习时间段</span>
+                <v-spacer />
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  size="small"
+                  prepend-icon="mdi-plus"
+                  @click="addSession"
+                >
+                  添加时段
+                </v-btn>
+              </div>
+
+              <div class="text-caption text-medium-emphasis mb-4">
+                配置晚自习时间段后，系统会在对应时段内自动开启噪音监测并记录统计报告。时间段外不会长期记录。
+              </div>
+
+              <div
+                v-for="(session, idx) in editSessions"
+                :key="idx"
+                class="mb-3"
+              >
+                <v-card
+                  variant="outlined"
+                  rounded="xl"
+                >
+                  <v-card-text class="pa-4">
+                    <div class="d-flex align-center ga-3 flex-wrap">
+                      <v-text-field
+                        v-model="session.name"
+                        density="compact"
+                        variant="outlined"
+                        label="名称"
+                        hide-details
+                        style="max-width: 160px;"
+                      />
+                      <v-menu
+                        v-model="timePickerMenus[idx]"
+                        :close-on-content-click="false"
+                        location="bottom"
+                      >
+                        <template #activator="{ props: menuProps }">
+                          <v-text-field
+                            v-bind="menuProps"
+                            :model-value="session.start"
+                            density="compact"
+                            variant="outlined"
+                            label="开始时间"
+                            readonly
+                            hide-details
+                            prepend-inner-icon="mdi-clock-outline"
+                            style="max-width: 170px;"
+                          />
+                        </template>
+                        <v-time-picker
+                          v-model="session.start"
+                          color="primary"
+                          format="24hr"
+                          scrollable
+                          @update:model-value="timePickerMenus[idx] = false"
+                        />
+                      </v-menu>
+                      <v-text-field
+                        v-model.number="session.duration"
+                        density="compact"
+                        variant="outlined"
+                        type="number"
+                        label="时长"
+                        suffix="分钟"
+                        hide-details
+                        style="max-width: 130px;"
+                        :min="10"
+                        :max="300"
+                      />
+                      <span class="text-caption text-medium-emphasis">
+                        至 {{ sessionEndTime(session) }}
+                      </span>
+                      <v-switch
+                        v-model="session.enabled"
+                        density="compact"
+                        color="primary"
+                        hide-details
+                        label="启用"
+                      />
+                      <v-btn
+                        icon="mdi-delete"
+                        color="error"
+                        size="x-small"
+                        variant="text"
+                        @click="editSessions.splice(idx, 1)"
+                      />
+                    </div>
+                  </v-card-text>
+                </v-card>
+              </div>
+
+              <v-divider class="my-5" />
+
+              <!-- 报警阈值 -->
+              <div class="d-flex align-center mb-4">
+                <v-icon
+                  class="mr-2"
+                  color="orange"
+                >
+                  mdi-alert-decagram
+                </v-icon>
+                <span class="text-subtitle-1 font-weight-bold">监测参数</span>
+              </div>
+
+              <div class="d-flex align-center flex-wrap ga-4 mb-4">
+                <v-text-field
+                  v-model.number="editAlertThreshold"
+                  density="compact"
+                  variant="outlined"
+                  type="number"
+                  label="噪音报警阈值"
+                  suffix="dB"
+                  hide-details
+                  style="max-width: 200px;"
+                  :min="30"
+                  :max="90"
+                />
+                <v-text-field
+                  v-model.number="calibrateTarget"
+                  density="compact"
+                  variant="outlined"
+                  type="number"
+                  label="校准基准"
+                  suffix="dB"
+                  hide-details
+                  style="max-width: 200px;"
+                  :min="20"
+                  :max="80"
+                />
+              </div>
+
+              <v-divider class="my-5" />
+
+              <div class="d-flex justify-end ga-3">
+                <v-btn
+                  variant="text"
+                  @click="resetEditConfig"
+                >
+                  重置
+                </v-btn>
+                <v-btn
+                  color="primary"
+                  variant="elevated"
+                  prepend-icon="mdi-content-save"
+                  @click="saveConfig"
+                >
+                  保存配置
+                </v-btn>
+              </div>
+            </div>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-card-text>
+    </v-card>
+
+    <!-- 清空报告确认 -->
+    <v-dialog
+      v-model="showConfirmClear"
+      max-width="360"
+    >
+      <v-card>
+        <v-card-title>确认清空</v-card-title>
+        <v-card-text>
+          {{ confirmClearMode === 'all'
+            ? '确定要清空所有日期的统计报告吗？此操作不可撤销。'
+            : `确定要清空 ${formatDateLabel(selectedDate)} 的统计报告吗？此操作不可撤销。`
+          }}
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="confirmClearMode = ''"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="error"
+            @click="doClearReports"
+          >
+            确认清空
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'NoiseMonitorDetail',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    status: { type: String, default: '' },
+    currentDb: { type: [Number, String], default: '--' },
+    currentDbfs: { type: Number, default: 0 },
+    noiseLevel: { type: String, default: '未知' },
+    dbColor: { type: String, default: 'grey' },
+    currentScore: { type: Number, default: null },
+    scoreDetail: { type: Object, default: null },
+    ringBuffer: { type: Array, default: () => [] },
+    lastSlice: { type: Object, default: null },
+    history: { type: Array, default: () => [] },
+    isMonitoring: { type: Boolean, default: false },
+    sessionConfig: { type: Object, default: null },
+    sessionActive: { type: Boolean, default: false },
+    sessionData: { type: Object, default: null },
+    reportMeta: { type: Object, default: () => ({ dates: {} }) },
+    selectedDate: { type: String, default: '' },
+    dateReports: { type: Array, default: () => [] },
+  },
+  emits: ['update:modelValue', 'start', 'stop', 'calibrate', 'clear-history', 'save-config', 'select-date', 'clear-date-reports', 'clear-all-reports'],
+  data() {
+    return {
+      activeTab: 'realtime',
+      calibrateTarget: 40,
+      isCalibrating: false,
+      confirmClearMode: '', // '' | 'date' | 'all'
+      waveformWidth: 600,
+      reportChartWidth: 600,
+      selectedReportIndex: 0,
+      // 编辑态配置
+      editSessions: [],
+      editAlertThreshold: 55,
+      timePickerMenus: {},
+    }
+  },
+  computed: {
+    scoreColor() {
+      if (this.currentScore === null) return 'grey'
+      if (this.currentScore >= 80) return 'success'
+      if (this.currentScore >= 60) return 'warning'
+      return 'error'
+    },
+    scoreLabel() {
+      if (this.currentScore === null) return '暂无评分'
+      if (this.currentScore >= 90) return '非常安静'
+      if (this.currentScore >= 80) return '环境良好'
+      if (this.currentScore >= 60) return '需要注意'
+      if (this.currentScore >= 40) return '比较嘈杂'
+      return '极度嘈杂'
+    },
+    alertThreshold() {
+      return this.sessionConfig?.alertThresholdDb || 55
+    },
+    scorePenaltyItems() {
+      if (!this.scoreDetail) return []
+      const total = 100
+      return [
+        {
+          label: '持续',
+          icon: 'mdi-volume-high',
+          color: 'amber',
+          percent: Math.round((this.scoreDetail.sustainedPenalty / total) * 100),
+        },
+        {
+          label: '时长',
+          icon: 'mdi-clock-alert',
+          color: 'orange',
+          percent: Math.round((this.scoreDetail.timePenalty / total) * 100),
+        },
+        {
+          label: '打断',
+          icon: 'mdi-flash-alert',
+          color: 'pink',
+          percent: Math.round((this.scoreDetail.segmentPenalty / total) * 100),
+        },
+      ]
+    },
+    gridLines() {
+      return [20, 40, 60, 80].map(val => ({ val, y: this.dbToY(val) }))
+    },
+    reportGridLines() {
+      return [20, 40, 60, 80].map(val => ({ val, y: this.reportDbToY(val) }))
+    },
+    waveformPath() {
+      if (!this.ringBuffer || this.ringBuffer.length < 2) return null
+      const w = this.waveformWidth
+      const points = this.ringBuffer.slice(-120)
+      const step = w / (points.length - 1)
+      return points.map((pt, i) => {
+        const x = i * step
+        const y = this.dbToY(pt.displayDb ?? 0)
+        return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+      }).join(' ')
+    },
+    waveformFillPath() {
+      if (!this.waveformPath) return null
+      return `${this.waveformPath} L${this.waveformWidth},120 L0,120 Z`
+    },
+    showConfirmClear() {
+      return this.confirmClearMode !== ''
+    },
+    sortedDateKeys() {
+      if (!this.reportMeta?.dates) return []
+      return Object.keys(this.reportMeta.dates).sort().reverse()
+    },
+    selectedReport() {
+      return this.dateReports[this.selectedReportIndex] || null
+    },
+    reportCoverage() {
+      if (!this.selectedReport?.samples?.length || !this.selectedReport?.duration) return 0
+      return ((this.selectedReport.samples.length * 2 / (this.selectedReport.duration / 1000)) * 100).toFixed(1)
+    },
+    reportWaveformPath() {
+      if (!this.selectedReport?.samples?.length) return null
+      const samples = this.selectedReport.samples
+      if (samples.length < 2) return null
+      const w = this.reportChartWidth
+      const step = w / (samples.length - 1)
+      return samples.map((s, i) => {
+        const x = i * step
+        const y = this.reportDbToY(s.db)
+        return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+      }).join(' ')
+    },
+    reportWaveformFillPath() {
+      if (!this.reportWaveformPath) return null
+      return `${this.reportWaveformPath} L${this.reportChartWidth},140 L0,140 Z`
+    },
+    levelDistribution() {
+      if (!this.selectedReport?.samples?.length) {
+        return [
+          { label: '安静', percent: 0, color: '#4caf50' },
+          { label: '正常', percent: 0, color: '#8bc34a' },
+          { label: '吵闹', percent: 0, color: '#ff9800' },
+          { label: '极吵', percent: 0, color: '#f44336' },
+        ]
+      }
+      const dbs = this.selectedReport.samples.map(s => s.db)
+      const total = dbs.length
+      let quiet = 0, normal = 0, loud = 0, extreme = 0
+      dbs.forEach(d => {
+        if (d < 45) quiet++
+        else if (d < 60) normal++
+        else if (d < 75) loud++
+        else extreme++
+      })
+      return [
+        { label: '安静', percent: Math.round(quiet / total * 100), color: '#4caf50' },
+        { label: '正常', percent: Math.round(normal / total * 100), color: '#8bc34a' },
+        { label: '吵闹', percent: Math.round(loud / total * 100), color: '#ff9800' },
+        { label: '极吵', percent: Math.round(extreme / total * 100), color: '#f44336' },
+      ]
+    },
+    reportPenaltyItems() {
+      if (!this.selectedReport?.scorePenalties) return []
+      const p = this.selectedReport.scorePenalties
+      return [
+        { label: '持续', color: 'amber', percent: Math.min(100, Math.round(p.sustained / 40 * 100)) },
+        { label: '时长', color: 'orange', percent: Math.min(100, Math.round(p.time / 30 * 100)) },
+        { label: '打断', color: 'pink', percent: Math.min(100, Math.round(p.segment / 30 * 100)) },
+      ]
+    },
+  },
+  watch: {
+    modelValue(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.updateWaveformWidth()
+          this.updateReportChartWidth()
+        })
+        this.resetEditConfig()
+      }
+    },
+    activeTab() {
+      this.$nextTick(() => {
+        this.updateWaveformWidth()
+        this.updateReportChartWidth()
+      })
+    },
+    selectedReportIndex() {
+      this.$nextTick(() => this.updateReportChartWidth())
+    },
+    selectedDate() {
+      this.selectedReportIndex = 0
+    },
+  },
+  mounted() {
+    this.updateWaveformWidth()
+    window.addEventListener('resize', this.handleResize)
+    this.resetEditConfig()
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.updateWaveformWidth()
+      this.updateReportChartWidth()
+    },
+    updateWaveformWidth() {
+      if (this.$refs.waveformContainer) {
+        this.waveformWidth = this.$refs.waveformContainer.offsetWidth || 600
+      }
+    },
+    updateReportChartWidth() {
+      if (this.$refs.reportChartContainer) {
+        this.reportChartWidth = this.$refs.reportChartContainer.offsetWidth || 600
+      }
+    },
+    dbToY(db) {
+      return 120 - Math.max(0, Math.min(100, db)) / 100 * 120
+    },
+    reportDbToY(db) {
+      return 140 - Math.max(0, Math.min(100, db)) / 100 * 140
+    },
+    doCalibrate() {
+      this.isCalibrating = true
+      this.$emit('calibrate', this.calibrateTarget)
+      setTimeout(() => { this.isCalibrating = false }, 3500)
+    },
+    doClearReports() {
+      if (this.confirmClearMode === 'all') {
+        this.$emit('clear-all-reports')
+      } else if (this.confirmClearMode === 'date') {
+        this.$emit('clear-date-reports', this.selectedDate)
+      }
+      this.confirmClearMode = ''
+      this.selectedReportIndex = 0
+    },
+    resetEditConfig() {
+      if (this.sessionConfig) {
+        this.editSessions = JSON.parse(JSON.stringify(this.sessionConfig.sessions || []))
+        this.editAlertThreshold = this.sessionConfig.alertThresholdDb || 55
+      }
+    },
+    addSession() {
+      this.editSessions.push({
+        name: `第${this.editSessions.length + 1}节晚自习`,
+        start: '19:00',
+        duration: 70,
+        enabled: true,
+      })
+    },
+    sessionEndTime(session) {
+      if (!session?.start || !session?.duration) return '--:--'
+      const [h, m] = session.start.split(':').map(Number)
+      const totalMin = h * 60 + m + (session.duration || 0)
+      const eh = Math.floor(totalMin / 60) % 24
+      const em = totalMin % 60
+      return `${String(eh).padStart(2, '0')}:${String(em).padStart(2, '0')}`
+    },
+    saveConfig() {
+      this.$emit('save-config', {
+        sessions: this.editSessions,
+        alertThresholdDb: this.editAlertThreshold,
+      })
+    },
+    formatDateLabel(dateStr) {
+      if (!dateStr) return ''
+      const today = new Date()
+      const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
+      const yesterday = new Date(today)
+      yesterday.setDate(yesterday.getDate() - 1)
+      const yesterdayStr = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, '0')}-${String(yesterday.getDate()).padStart(2, '0')}`
+      if (dateStr === todayStr) return '今天'
+      if (dateStr === yesterdayStr) return '昨天'
+      const parts = dateStr.split('-')
+      return `${parseInt(parts[1])}月${parseInt(parts[2])}日`
+    },
+    formatTime(ts) {
+      const d = new Date(ts)
+      return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+    },
+    metaScoreColor(score) {
+      if (score >= 80) return 'success'
+      if (score >= 60) return 'warning'
+      return 'error'
+    },
+    formatFullTime(ts) {
+      if (!ts) return '--'
+      const d = new Date(ts)
+      return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
+    },
+    formatDuration(ms) {
+      if (!ms) return '0 分钟'
+      const totalMin = Math.floor(ms / 60000)
+      const h = Math.floor(totalMin / 60)
+      const m = totalMin % 60
+      if (h > 0) return `${h} 小时 ${m} 分钟`
+      return `${m} 分钟`
+    },
+    formatSeconds(sec) {
+      if (!sec || sec < 0) return '0秒'
+      const m = Math.floor(sec / 60)
+      const s = sec % 60
+      if (m > 0) return `${m}分${s}秒`
+      return `${s}秒`
+    },
+    reportScoreLabel(score) {
+      if (score >= 90) return '优秀'
+      if (score >= 80) return '良好'
+      if (score >= 60) return '一般'
+      if (score >= 40) return '较差'
+      return '极差'
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.noise-detail-card {
+  .noise-dashboard {
+    background: linear-gradient(
+      135deg,
+      rgba(var(--v-theme-surface-variant), 0.3),
+      rgba(var(--v-theme-surface), 1)
+    );
+  }
+
+  .noise-gauge-ring {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 4px solid;
+    transition: border-color 0.3s ease;
+
+    &.ring-success { border-color: rgb(var(--v-theme-success)); }
+    &.ring-light-green { border-color: rgb(var(--v-theme-light-green)); }
+    &.ring-warning { border-color: rgb(var(--v-theme-warning)); }
+    &.ring-orange { border-color: rgb(var(--v-theme-orange)); }
+    &.ring-error { border-color: rgb(var(--v-theme-error)); }
+    &.ring-grey { border-color: rgb(var(--v-theme-grey)); }
+  }
+
+  .noise-gauge-inner {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: rgb(var(--v-theme-surface));
+  }
+
+  .noise-gauge-value {
+    font-size: 2.4rem;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .noise-gradient-bar {
+    position: relative;
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(
+      to right,
+      rgb(var(--v-theme-success)),
+      rgb(var(--v-theme-light-green)),
+      rgb(var(--v-theme-warning)),
+      rgb(var(--v-theme-orange)),
+      rgb(var(--v-theme-error))
+    );
+  }
+
+  .noise-indicator {
+    position: absolute;
+    top: -4px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: white;
+    border: 3px solid rgb(var(--v-theme-primary));
+    transform: translateX(-50%);
+    transition: left 0.15s ease;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .noise-waveform {
+    background: rgba(var(--v-theme-surface-variant), 0.15);
+    border-radius: 12px;
+    padding: 8px;
+    overflow: hidden;
+  }
+}
+
+// 报告样式
+.report-section-line {
+  display: inline-block;
+  width: 4px;
+  height: 18px;
+  border-radius: 2px;
+}
+
+.report-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+
+  @media (max-width: 600px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.report-stat-card {
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  background: rgba(var(--v-theme-surface-variant), 0.1);
+}
+</style>
diff --git a/src/components/TimeCard.vue b/src/components/TimeCard.vue
index baa6b04..48ecf6e 100644
--- a/src/components/TimeCard.vue
+++ b/src/components/TimeCard.vue
@@ -12,25 +12,89 @@
       class="pa-6 d-flex flex-column"
       style="height: 100%"
     >
-      <!-- 时间显示 -->
-      <div
-        class="time-display"
-        :style="timeStyle"
-      >
-        {{ timeString }}<span
-          class="seconds-text"
-          :style="secondsStyle"
-        >{{ secondsString }}</span>
-      </div>
+      <div class="d-flex align-center" style="gap: 16px;">
+        <!-- 左侧：时间显示 -->
+        <div class="flex-grow-1">
+          <div
+            class="time-display"
+            :style="timeStyle"
+          >
+            {{ timeString }}<span
+              class="seconds-text"
+              :style="secondsStyle"
+            >{{ secondsString }}</span>
+          </div>
+          <div
+            class="date-line mt-3"
+            :style="dateStyle"
+          >
+            {{ dateString }}  {{ weekdayString }}  {{ periodOfDay }}
+          </div>
+        </div>
 
-      <!-- 日期 + 星期 + 时段 -->
-      <div
-        class="date-line mt-3"
-        :style="dateStyle"
-      >
-        {{ dateString }}  {{ weekdayString }}  {{ periodOfDay }}
+        <!-- 右侧：环境噪音状态 -->
+        <div
+          v-if="noiseEnabled"
+          class="d-flex flex-column align-center justify-center"
+          style="min-width: 80px;"
+          @click.stop="onNoiseClick"
+        >
+
+          <div
+            class="noise-side-db font-weight-bold"
+            :class="`text-${noiseDbColor}`"
+            :style="{ fontSize: `${fontSize * 0.9}px`, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }"
+          >
+            {{ noiseDisplayDb }}
+          </div>
+          <div
+            class="text-caption mt-1"
+            :class="`text-${noiseDbColor}`"
+            style="white-space: nowrap; font-size: 11px;"
+          >
+            {{ noiseStatusText }}
+          </div>
+          <div
+            v-if="!noiseMonitoring"
+            class="text-caption text-medium-emphasis mt-1"
+            style="font-size: 10px; cursor: pointer;"
+          >
+            点击开启
+          </div>
+        </div>
       </div>
     </v-card-text>
+
+    <!-- 噪音详情对话框 -->
+    <noise-monitor-detail
+      v-if="noiseEnabled"
+      v-model="showNoiseDetail"
+      :status="noiseStatus"
+      :current-db="noiseDisplayDb"
+      :current-dbfs="noiseCurrentDbfs"
+      :noise-level="noiseStatusText"
+      :db-color="noiseDbColor"
+      :current-score="noiseScore"
+      :score-detail="noiseScoreDetail"
+      :ring-buffer="noiseRingBuffer"
+      :last-slice="noiseLastSlice"
+      :history="noiseHistory"
+      :is-monitoring="noiseMonitoring"
+      :session-config="noiseSessionConfig"
+      :session-active="noiseSessionActive"
+      :session-data="noiseSessionData"
+      :report-meta="noiseReportMeta"
+      :selected-date="noiseSelectedDate"
+      :date-reports="noiseCurrentDateReports"
+      @start="startNoise"
+      @stop="stopNoise"
+      @calibrate="calibrateNoise"
+      @clear-history="clearNoiseHistory"
+      @save-config="onSaveSessionConfig"
+      @select-date="onSelectReportDate"
+      @clear-date-reports="onClearDateReports"
+      @clear-all-reports="onClearAllReports"
+    />
   </v-card>
 
   <!-- 全屏时间弹框 -->
@@ -487,6 +551,13 @@
 <script>
 import { SettingsManager, watchSettings, getSetting, setSetting } from '@/utils/settings'
 import { playSound, defaultSingleSound } from '@/utils/soundList'
+import { noiseService } from '@wydev/noise-core'
+import { defineAsyncComponent } from 'vue'
+import dataProvider from '@/utils/dataProvider'
+
+const NoiseMonitorDetail = defineAsyncComponent(() =>
+  import('@/components/NoiseMonitorDetail.vue')
+)
 
 // 时间字体大小比例（卡片场景）
 const TIME_FONT_RATIO = 2.0
@@ -495,6 +566,7 @@ const DATE_FONT_RATIO = 0.6
 
 export default {
   name: 'TimeCard',
+  components: { NoiseMonitorDetail },
   data() {
     return {
       now: new Date(),
@@ -539,6 +611,29 @@ export default {
       stopwatchLastTick: null,
       laps: [],
       lastLapElapsed: 0,
+      // 噪音监测
+      noiseEnabled: false,
+      noiseMonitoring: false,
+      noiseStatus: 'initializing',
+      noiseCurrentDbfs: -100,
+      noiseCurrentDisplayDb: 0,
+      noiseSmoothedDb: 0, // 防抖后的平滑值
+      noiseScore: null,
+      noiseScoreDetail: null,
+      noiseRingBuffer: [],
+      noiseLastSlice: null,
+      noiseHistory: [],
+      noiseUnsubscribe: null,
+      showNoiseDetail: false,
+      // 晚自习会话
+      noiseSessionConfig: null, // KV存储的配置
+      noiseSessionActive: false,
+      noiseSessionData: null, // 当前会话数据
+      noiseSessionCheckTimer: null,
+      // 按日期存储的报告系统
+      noiseReportMeta: {}, // { dates: { '2026-03-07': { count, avgScore, sessions } } }
+      noiseSelectedDate: '', // 当前查看的日期 YYYY-MM-DD
+      noiseCurrentDateReports: [], // 当前日期的报告列表
     }
   },
   computed: {
@@ -647,6 +742,35 @@ export default {
       }
       return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}.${String(centis).padStart(2, '0')}`
     },
+    // ===== 噪音监测 computed =====
+    noiseDisplayDb() {
+      if (!this.noiseMonitoring || this.noiseStatus !== 'active') return '--'
+      return Math.round(this.noiseSmoothedDb)
+    },
+    noiseDbColor() {
+      const db = typeof this.noiseDisplayDb === 'number' ? this.noiseDisplayDb : 0
+      if (db < 40) return 'success'
+      if (db < 55) return 'light-green'
+      if (db < 70) return 'warning'
+      if (db < 85) return 'orange'
+      return 'error'
+    },
+    noiseIconColor() {
+      if (!this.noiseMonitoring) return 'grey'
+      return this.noiseDbColor
+    },
+    noiseStatusText() {
+      if (!this.noiseMonitoring || this.noiseStatus !== 'active') return '未监测'
+      const db = typeof this.noiseDisplayDb === 'number' ? this.noiseDisplayDb : 0
+      if (db < 30) return '极其安静'
+      if (db < 40) return '非常安静'
+      if (db < 50) return '安静'
+      if (db < 60) return '正常交谈'
+      if (db < 70) return '较为嘈杂'
+      if (db < 80) return '嘈杂'
+      if (db < 90) return '非常嘈杂'
+      return '极度嘈杂'
+    },
   },
   watch: {
     showFullscreen(val) {
@@ -680,6 +804,15 @@ export default {
     this.unwatch = watchSettings(() => {
       this.loadSettings()
     })
+    // 噪音: 加载历史 & 自动启动
+    this.noiseEnabled = getSetting('noiseMonitor.enabled')
+    if (this.noiseEnabled) {
+      this.noiseHistory = noiseService.getHistory()
+      // 先加载配置，再启动会话检查（自动检测当前是否在晚自习时段并自动开始）
+      this.loadNoiseSessionConfig().then(() => {
+        this.startSessionCheck()
+      })
+    }
   },
   beforeUnmount() {
     this.stopTimer()
@@ -687,6 +820,8 @@ export default {
     this.clearStopwatchTimer()
     this.clearToolbarTimer()
     this.dismissCountdownDialog()
+    this.stopNoise()
+    this.stopSessionCheck()
     if (this.unwatch) {
       this.unwatch()
     }
@@ -698,6 +833,7 @@ export default {
     loadSettings() {
       this.fontSize = SettingsManager.getSetting('font.size')
       this.timeCardEnabled = getSetting('timeCard.enabled')
+      this.noiseEnabled = getSetting('noiseMonitor.enabled')
     },
     setTimeCardEnabled(val) {
       this.timeCardEnabled = val
@@ -857,6 +993,353 @@ export default {
       const centis = Math.floor((ms % 1000) / 10)
       return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}.${String(centis).padStart(2, '0')}`
     },
+    // ===== 噪音监测 methods =====
+    async startNoise() {
+      try {
+        await noiseService.start()
+        this.noiseMonitoring = true
+        this.noiseUnsubscribe = noiseService.subscribe((snapshot) => {
+          this.noiseStatus = snapshot.status
+          this.noiseCurrentDbfs = snapshot.currentDbfs
+          this.noiseCurrentDisplayDb = snapshot.currentDisplayDb
+          // 防抖平滑: 指数移动平均
+          const alpha = 0.25
+          const rawDb = snapshot.currentDisplayDb
+          this.noiseSmoothedDb = this.noiseSmoothedDb === 0
+            ? rawDb
+            : this.noiseSmoothedDb * (1 - alpha) + rawDb * alpha
+          this.noiseRingBuffer = snapshot.ringBuffer || []
+          this.noiseLastSlice = snapshot.lastSlice || null
+          this.noiseScore = snapshot.currentScore ?? null
+          this.noiseScoreDetail = snapshot.currentScoreDetail ?? null
+          this.noiseHistory = noiseService.getHistory()
+          // 会话数据采集
+          if (this.noiseSessionActive && this.noiseSessionData) {
+            this.collectSessionSample(snapshot)
+          }
+        })
+      } catch (e) {
+        console.error('噪音监测启动失败:', e)
+        this.noiseStatus = 'error'
+      }
+    },
+    stopNoise() {
+      if (this.noiseUnsubscribe) {
+        this.noiseUnsubscribe()
+        this.noiseUnsubscribe = null
+      }
+      if (this.noiseMonitoring) {
+        noiseService.stop()
+      }
+      this.noiseMonitoring = false
+      this.noiseStatus = 'initializing'
+      this.noiseSmoothedDb = 0
+      this.noiseScore = null
+      this.noiseScoreDetail = null
+    },
+    calibrateNoise(targetDb) {
+      noiseService.calibrate(targetDb, (success, msg) => {
+        console.log(success ? '校准成功' : `校准失败: ${msg}`)
+      })
+    },
+    clearNoiseHistory() {
+      noiseService.clearHistory()
+      this.noiseHistory = []
+    },
+    onNoiseClick() {
+      if (!this.noiseMonitoring) {
+        this.startNoise()
+      } else {
+        this.showNoiseDetail = true
+      }
+    },
+
+    // ===== 晚自习会话管理 =====
+    async loadNoiseSessionConfig() {
+      try {
+        const res = await dataProvider.loadData('noise-session-config')
+        const data = res?.data || res
+        if (data && data.sessions) {
+          this.noiseSessionConfig = data
+        } else {
+          // 默认配置
+          this.noiseSessionConfig = {
+            sessions: [
+              { name: '第1节晚自习', start: '19:20', duration: 70, enabled: true },
+              { name: '第2节晚自习', start: '20:20', duration: 110, enabled: true },
+            ],
+            alertThresholdDb: 55,
+          }
+        }
+        // 加载报告
+        await this.loadSessionReports()
+      } catch (e) {
+        console.error('加载噪音会话配置失败:', e)
+        this.noiseSessionConfig = {
+          sessions: [
+            { name: '第1节晚自习', start: '19:20', duration: 70, enabled: true },
+            { name: '第2节晚自习', start: '20:20', duration: 110, enabled: true },
+          ],
+          alertThresholdDb: 55,
+        }
+      }
+    },
+    async saveNoiseSessionConfig() {
+      try {
+        await dataProvider.saveData('noise-session-config', this.noiseSessionConfig)
+      } catch (e) {
+        console.error('保存噪音会话配置失败:', e)
+      }
+    },
+    // ===== 按日期的报告存储 =====
+    formatDateKey(ts) {
+      const d = new Date(ts)
+      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+    },
+    async loadReportMeta() {
+      try {
+        const res = await dataProvider.loadData('noise-reports-meta')
+        const data = res?.data || res
+        if (data && data.dates) {
+          // 清理超过 30 天的元数据
+          const cutoffDate = new Date()
+          cutoffDate.setDate(cutoffDate.getDate() - 30)
+          const cutoffKey = this.formatDateKey(cutoffDate.getTime())
+          const cleaned = {}
+          for (const [key, val] of Object.entries(data.dates)) {
+            if (key >= cutoffKey) cleaned[key] = val
+          }
+          this.noiseReportMeta = { dates: cleaned }
+        } else {
+          this.noiseReportMeta = { dates: {} }
+        }
+      } catch {
+        this.noiseReportMeta = { dates: {} }
+      }
+    },
+    async saveReportMeta() {
+      try {
+        await dataProvider.saveData('noise-reports-meta', this.noiseReportMeta)
+      } catch {
+        console.error('保存报告元数据失败')
+      }
+    },
+    async loadReportsForDate(dateStr) {
+      this.noiseSelectedDate = dateStr
+      try {
+        const res = await dataProvider.loadData(`noise-reports-${dateStr}`)
+        const data = res?.data || res
+        this.noiseCurrentDateReports = Array.isArray(data) ? data : []
+      } catch {
+        this.noiseCurrentDateReports = []
+      }
+    },
+    async saveReportToDate(report) {
+      const dateStr = this.formatDateKey(report.startTime)
+      // 加载当天已有报告
+      let existing = []
+      try {
+        const res = await dataProvider.loadData(`noise-reports-${dateStr}`)
+        const data = res?.data || res
+        if (Array.isArray(data)) existing = data
+      } catch { /* empty */ }
+      existing.push(report)
+      await dataProvider.saveData(`noise-reports-${dateStr}`, existing)
+      // 更新元数据
+      if (!this.noiseReportMeta.dates) this.noiseReportMeta.dates = {}
+      const scores = existing.map(r => r.score)
+      this.noiseReportMeta.dates[dateStr] = {
+        count: existing.length,
+        avgScore: Math.round(scores.reduce((a, b) => a + b, 0) / scores.length),
+        sessions: existing.map(r => r.sessionName),
+        lastUpdated: Date.now(),
+      }
+      await this.saveReportMeta()
+      // 如果当前正在查看该日期，刷新
+      if (this.noiseSelectedDate === dateStr) {
+        this.noiseCurrentDateReports = existing
+      }
+    },
+    async loadSessionReports() {
+      await this.loadReportMeta()
+      // 默认加载今天的报告
+      const today = this.formatDateKey(Date.now())
+      await this.loadReportsForDate(today)
+    },
+    startSessionCheck() {
+      // 每 30 秒检查是否在晚自习时间段
+      this.checkSessionTime()
+      this.noiseSessionCheckTimer = setInterval(() => {
+        this.checkSessionTime()
+      }, 30000)
+    },
+    stopSessionCheck() {
+      if (this.noiseSessionCheckTimer) {
+        clearInterval(this.noiseSessionCheckTimer)
+        this.noiseSessionCheckTimer = null
+      }
+    },
+    checkSessionTime() {
+      if (!this.noiseSessionConfig?.sessions) return
+      const now = new Date()
+      const nowMinutes = now.getHours() * 60 + now.getMinutes()
+      const activeSession = this.noiseSessionConfig.sessions.find(s => {
+        if (!s.enabled) return false
+        const [h, m] = s.start.split(':').map(Number)
+        const startMin = h * 60 + m
+        const endMin = startMin + (s.duration || 70)
+        return nowMinutes >= startMin && nowMinutes < endMin
+      })
+      if (activeSession && !this.noiseSessionActive) {
+        // 进入晚自习时段，自动开始
+        this.beginSession(activeSession)
+      } else if (!activeSession && this.noiseSessionActive) {
+        // 离开晚自习时段，自动结束并保存
+        this.endSession()
+      }
+    },
+    beginSession(session) {
+      this.noiseSessionActive = true
+      this.noiseSessionData = {
+        sessionName: session.name,
+        startTime: Date.now(),
+        endTime: null,
+        samples: [], // { t, db }
+        slices: [],
+        alertThresholdDb: this.noiseSessionConfig.alertThresholdDb || 55,
+      }
+      // 如果还没在监测，自动开始
+      if (!this.noiseMonitoring) {
+        this.startNoise()
+      }
+    },
+    endSession() {
+      if (!this.noiseSessionData) {
+        this.noiseSessionActive = false
+        return
+      }
+      this.noiseSessionData.endTime = Date.now()
+      this.noiseSessionData.slices = [...this.noiseHistory]
+      // 生成报告并按日期保存
+      const report = this.generateSessionReport(this.noiseSessionData)
+      this.saveReportToDate(report)
+      this.noiseSessionActive = false
+      this.noiseSessionData = null
+    },
+    collectSessionSample(snapshot) {
+      if (!this.noiseSessionData) return
+      const db = snapshot.currentDisplayDb
+      if (typeof db === 'number' && db > 0) {
+        // 每 2 秒采样一次（通过间隔控制）
+        const samples = this.noiseSessionData.samples
+        const lastT = samples.length > 0 ? samples[samples.length - 1].t : 0
+        if (Date.now() - lastT >= 2000) {
+          samples.push({ t: Date.now(), db: Math.round(db * 10) / 10 })
+        }
+      }
+    },
+    generateSessionReport(data) {
+      const samples = data.samples
+      const dbs = samples.map(s => s.db)
+      const threshold = data.alertThresholdDb
+      const duration = data.endTime - data.startTime
+
+      if (dbs.length === 0) {
+        return {
+          sessionName: data.sessionName,
+          startTime: data.startTime,
+          endTime: data.endTime,
+          duration,
+          avgDb: 0, maxDb: 0, score: 100,
+          overThresholdDuration: 0, overThresholdRatio: 0,
+          segmentCount: 0, samples: [],
+          scorePenalties: { sustained: 0, time: 0, segment: 0 },
+        }
+      }
+
+      // 统计
+      const avgDb = Math.round(dbs.reduce((a, b) => a + b, 0) / dbs.length * 10) / 10
+      const maxDb = Math.round(Math.max(...dbs) * 10) / 10
+
+      // 超阈时长
+      let overCount = 0
+      dbs.forEach(d => { if (d > threshold) overCount++ })
+      const overThresholdRatio = overCount / dbs.length
+      const overThresholdDuration = Math.round(overThresholdRatio * duration / 1000)
+
+      // 打断次数（超阈片段）
+      let segmentCount = 0
+      let inSegment = false
+      dbs.forEach(d => {
+        if (d > threshold && !inSegment) { segmentCount++; inSegment = true }
+        if (d <= threshold) inSegment = false
+      })
+
+      // 评分
+      const sustainedPenalty = Math.min(40, Math.max(0, (avgDb - threshold) / 30 * 40))
+      const timePenalty = Math.min(30, overThresholdRatio * 30)
+      const segmentPenalty = Math.min(30, (segmentCount / Math.max(1, duration / 60000) / 6) * 30)
+      const score = Math.max(0, Math.round(100 - sustainedPenalty - timePenalty - segmentPenalty))
+
+      return {
+        sessionName: data.sessionName,
+        startTime: data.startTime,
+        endTime: data.endTime,
+        duration,
+        avgDb, maxDb, score,
+        overThresholdDuration,
+        overThresholdRatio: Math.round(overThresholdRatio * 1000) / 10,
+        segmentCount,
+        samples: samples.length > 500 ? this.downsampleArray(samples, 500) : samples,
+        scorePenalties: {
+          sustained: Math.round(sustainedPenalty),
+          time: Math.round(timePenalty),
+          segment: Math.round(segmentPenalty),
+        },
+        alertThresholdDb: threshold,
+      }
+    },
+    downsampleArray(arr, targetLen) {
+      const step = arr.length / targetLen
+      const result = []
+      for (let i = 0; i < targetLen; i++) {
+        result.push(arr[Math.floor(i * step)])
+      }
+      return result
+    },
+    onSaveSessionConfig(config) {
+      this.noiseSessionConfig = config
+      this.saveNoiseSessionConfig()
+    },
+    async onSelectReportDate(dateStr) {
+      await this.loadReportsForDate(dateStr)
+    },
+    async onClearDateReports(dateStr) {
+      try {
+        await dataProvider.saveData(`noise-reports-${dateStr}`, [])
+      } catch { /* empty */ }
+      // 更新元数据
+      if (this.noiseReportMeta.dates) {
+        delete this.noiseReportMeta.dates[dateStr]
+        await this.saveReportMeta()
+      }
+      if (this.noiseSelectedDate === dateStr) {
+        this.noiseCurrentDateReports = []
+      }
+    },
+    async onClearAllReports() {
+      // 清空所有日期的报告
+      if (this.noiseReportMeta.dates) {
+        for (const dateStr of Object.keys(this.noiseReportMeta.dates)) {
+          try {
+            await dataProvider.saveData(`noise-reports-${dateStr}`, [])
+          } catch { /* empty */ }
+        }
+      }
+      this.noiseReportMeta = { dates: {} }
+      await this.saveReportMeta()
+      this.noiseCurrentDateReports = []
+    },
   },
 }
 </script>
@@ -885,6 +1368,22 @@ export default {
   letter-spacing: 1px;
 }
 
+/* 噪音侧栏 */
+.noise-side {
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: rgba(var(--v-theme-surface-variant), 0.25);
+  transition: background 0.2s ease;
+  cursor: pointer;
+}
+.noise-side:hover {
+  background: rgba(var(--v-theme-surface-variant), 0.5);
+}
+.noise-side-db {
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
 /* 全屏样式 */
 .fullscreen-time-card {
   position: relative;
diff --git a/src/components/home/HomeActions.vue b/src/components/home/HomeActions.vue
index f517616..620d38b 100644
--- a/src/components/home/HomeActions.vue
+++ b/src/components/home/HomeActions.vue
@@ -7,10 +7,11 @@
       color="error"
       size="large"
       @click="$emit('upload')"
+      rounded="xl"
     >
       上传
     </v-btn>
-    <v-btn v-else color="success" size="large" @click="$emit('show-sync-message')">
+    <v-btn v-else color="success" size="large" @click="$emit('show-sync-message')" rounded="xl">
       同步完成
     </v-btn>
     <v-btn
diff --git a/src/components/home/HomeworkGrid.vue b/src/components/home/HomeworkGrid.vue
index 8051c2d..8233454 100644
--- a/src/components/home/HomeworkGrid.vue
+++ b/src/components/home/HomeworkGrid.vue
@@ -126,6 +126,7 @@
           border
           class="glow-track"
           height="100%"
+          rounded="xl"
           @click="handleCardClick('dialog', item.key)"
           @mousemove="handleMouseMove"
           @touchmove="handleTouchMove"
@@ -185,6 +186,7 @@
           v-for="subject in unusedSubjects"
           :key="subject.name"
           border
+          rounded="xl"
           class="empty-subject-card"
           @click="handleCardClick('dialog', subject.name)"
         >
diff --git a/src/utils/settings.js b/src/utils/settings.js
index 6b3ae8f..9322da7 100644
--- a/src/utils/settings.js
+++ b/src/utils/settings.js
@@ -100,6 +100,20 @@ const settingsDefinitions = {
     icon: "mdi-card-outline",
   },
 
+  // 噪音监测设置
+  "noiseMonitor.enabled": {
+    type: "boolean",
+    default: false,
+    description: "启用环境噪音监测卡片",
+    icon: "mdi-microphone",
+  },
+  "noiseMonitor.autoStart": {
+    type: "boolean",
+    default: false,
+    description: "打开页面时自动开始监测",
+    icon: "mdi-play-circle-outline",
+  },
+
   // 时间卡片设置
   "timeCard.enabled": {
     type: "boolean",