优化: 界面交互完善与设置体验

- 审批卡尊重滚动意图,等长切换回底,排队超时按钮修活
- 带图编辑提示不静默丢,删除目标回写,切换文案消歧
- 会话键盘可达+搜索态重命名,筛选计数口径对齐
- 子任务提示正名,看板加载态
- 主题跟随系统,表单脏态拦截,密钥显隐留空提示

src/components/settings/AppearanceSection.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, onMounted, useTemplateRef } from 'vue'
+import { reactive, watch, onMounted, onUnmounted, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppSettingsStore } from '@/stores/appSettings'
 import SettingRow from './SettingRow.vue'
@@ -77,6 +77,14 @@ function applyTheme(theme: string) {
   }
 }
 
+// 走查 P2-4:原实现只在挂载/改档时读一次 matchMedia.matches,OS 深浅色切换后应用停在旧色,
+// 需重启或重选档位才跟随。挂 change 监听实时重算;非 system 档是用户手动定色,不应被 OS
+// 切色打断,故回调内先判档。组件卸载必须移除监听(本 Section 随分类切换反复挂卸,不清理会叠监听器)。
+const systemDarkQuery = window.matchMedia('(prefers-color-scheme: dark)')
+function onSystemThemeChange() {
+  if (settings.theme === 'system') applyTheme('system')
+}
+
 // 即时生效反馈:SettingRow refs,key 映射对应 row
 const rowTheme = useTemplateRef<InstanceType<typeof SettingRow>>('rowTheme')
 const rowLanguage = useTemplateRef<InstanceType<typeof SettingRow>>('rowLanguage')
@@ -113,6 +121,11 @@ watch(() => settings.language, (val) => {
 
 onMounted(() => {
   applyTheme(settings.theme)
+  systemDarkQuery.addEventListener('change', onSystemThemeChange)
+})
+
+onUnmounted(() => {
+  systemDarkQuery.removeEventListener('change', onSystemThemeChange)
 })
 </script>