feat: 迁移自定义功能至 1.5.9.9 版本

包含音乐源限制、CI 防 OOM 优化、数据库连接池优化、管理端权限及 UI 细节定制等功能

app/components/Admin/BlacklistManager.vue

@@ -5,104 +5,104 @@
     <!-- 页面标题 -->
     <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
       <div>
-        <h2 class="text-2xl font-black text-text-primary tracking-tight flex items-center gap-3">
-          {{ locale.title }}
+        <h2 class="text-2xl font-black text-zinc-100 tracking-tight flex items-center gap-3">
+          歌曲黑名单管理
         </h2>
-        <p class="text-xs text-text-tertiary mt-1 font-medium">
-          {{ locale.desc }}
+        <p class="text-xs text-zinc-500 mt-1 font-medium">
+          禁止特定歌曲或包含关键词的歌曲被点播，维护广播内容的健康与合规
         </p>
       </div>
     </div>
 
     <!-- 添加黑名单项表单 -->
-    <section class="bg-bg-secondary-40 border border-border-secondary rounded-xl p-8 shadow-xl">
-      <h3 class="text-[10px] font-black text-text-disabled uppercase tracking-[0.2em] mb-6 px-1">
-        {{ locale.addTitle }}
+    <section class="bg-zinc-900/40 border border-zinc-800 rounded-xl p-8 shadow-xl">
+      <h3 class="text-[10px] font-black text-zinc-600 uppercase tracking-[0.2em] mb-6 px-1">
+        添加黑名单项
       </h3>
       <div class="grid grid-cols-1 xl:grid-cols-12 gap-6 items-end">
-        <div class="xl:col-span-2 space-y-2">
-          <label class="text-[10px] font-black text-text-disabled uppercase tracking-widest px-1"
-            >{{ locale.type }}</label
+        <div class="xl:col-span-3 space-y-2">
+          <label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
+            >封禁类型</label
           >
-          <div class="grid grid-cols-2 gap-1 p-1 bg-bg-primary border border-border-secondary rounded-lg">
+          <div class="flex p-1 bg-zinc-950 border border-zinc-800 rounded-lg gap-1">
             <button
-              class="flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
-              :class="newItem.type === 'SONG' ? 'bg-bg-tertiary text-primary' : 'text-text-disabled'"
-              @click="selectType('SONG')"
+              class="flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
+              :class="newItem.type === 'SONG' ? 'bg-zinc-800 text-blue-400' : 'text-zinc-600'"
+              @click="newItem.type = 'SONG'"
             >
-              <Music :size="12" /> {{ locale.song }}
+              <Music :size="12" /> 歌曲
             </button>
             <button
-              class="flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
-              :class="newItem.type === 'KEYWORD' ? 'bg-bg-tertiary text-info' : 'text-text-disabled'"
-              @click="selectType('KEYWORD')"
+              class="flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
+              :class="newItem.type === 'KEYWORD' ? 'bg-zinc-800 text-purple-400' : 'text-zinc-600'"
+              @click="newItem.type = 'KEYWORD'"
             >
-              <Type :size="12" /> {{ locale.keyword }}
+              <Type :size="12" /> 关键词
             </button>
             <button
-              class="flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
-              :class="newItem.type === 'LANGUAGE' ? 'bg-bg-tertiary text-warning' : 'text-text-disabled'"
-              @click="selectType('LANGUAGE')"
+              class="flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
+              :class="newItem.type === 'LANGUAGE' ? 'bg-zinc-800 text-amber-400' : 'text-zinc-600'"
+              @click="newItem.type = 'LANGUAGE'"
             >
-              <Languages :size="12" /> {{ locale.language }}
+              <Languages :size="12" /> 语种
             </button>
             <button
-              class="flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
-              :class="newItem.type === 'GENRE' ? 'bg-bg-tertiary text-success' : 'text-text-disabled'"
-              @click="selectType('GENRE')"
+              class="flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-[11px] font-bold transition-all"
+              :class="newItem.type === 'GENRE' ? 'bg-zinc-800 text-emerald-400' : 'text-zinc-600'"
+              @click="newItem.type = 'GENRE'"
             >
-              <AudioLines :size="12" /> {{ locale.genre }}
+              <Disc3 :size="12" /> 曲风
             </button>
           </div>
         </div>
 
         <div class="xl:col-span-4 space-y-2">
-          <label class="text-[10px] font-black text-text-disabled uppercase tracking-widest px-1">
-            {{ valueLabel }}
+          <label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1">
+            {{ typeValueLabel }}
           </label>
           <input
-            v-if="newItem.type === 'SONG' || newItem.type === 'KEYWORD'"
             v-model="newItem.value"
             type="text"
-            :placeholder="
-              newItem.type === 'SONG' ? locale.songPlaceholder : locale.keywordPlaceholder
-            "
-            class="w-full bg-bg-primary border border-border-secondary rounded-lg px-5 py-3 text-sm text-text-primary focus:outline-none focus:border-primary-30 placeholder:text-text-secondary transition-all"
+            :placeholder="typePlaceholder"
+            class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-5 py-3 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 placeholder:text-zinc-700 transition-all"
           >
-          <CustomSelect
-            v-else
-            v-model="newItem.value"
-            :options="typeValueOptions"
-          />
-          <p
-            v-if="newItem.type === 'LANGUAGE' || newItem.type === 'GENRE'"
-            class="text-[10px] text-text-secondary px-1 leading-relaxed"
-          >
-            {{ newItem.type === 'LANGUAGE' ? locale.languageHint : locale.genreHint }}
+        </div>
+
+        <div v-if="newItem.type === 'LANGUAGE' || newItem.type === 'GENRE'" class="xl:col-span-5 xl:col-start-auto space-y-1">
+          <p class="text-[10px] text-zinc-600 font-bold leading-relaxed px-1">
+            <template v-if="newItem.type === 'LANGUAGE'">
+              💡 支持多语种匹配：中文 / 英文 / 日文 / 韩文 / 俄文 / 阿拉伯文 等，支持逗号分隔，例如：<span class="text-amber-400">日文,韩文</span>
+            </template>
+            <template v-else>
+              💡 支持曲风关键词，可逗号分隔，例如：<span class="text-emerald-400">DJ,摇滚,rap</span>
+            </template>
           </p>
         </div>
 
         <div class="xl:col-span-4 space-y-2">
-          <label class="text-[10px] font-black text-text-disabled uppercase tracking-widest px-1"
-            >{{ locale.reason }}</label
+          <label class="text-[10px] font-black text-zinc-600 uppercase tracking-widest px-1"
+            >封禁原因 (可选)</label
           >
           <input
             v-model="newItem.reason"
             type="text"
-            :placeholder="locale.reasonPlaceholder"
-            class="w-full bg-bg-primary border border-border-secondary rounded-lg px-5 py-3 text-sm text-text-primary focus:outline-none focus:border-primary-30 placeholder:text-text-secondary transition-all"
+            placeholder="简述加入黑名单的原因"
+            class="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-5 py-3 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 placeholder:text-zinc-700 transition-all"
           >
         </div>
 
         <div class="xl:col-span-2">
           <button
             :disabled="!newItem.value || loading"
-            class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-primary-hover hover:bg-primary disabled:opacity-50 disabled:cursor-not-allowed text-text-primary text-xs font-black rounded-lg shadow-lg shadow-[var(--primary-glow)] transition-all active:scale-95"
+            class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-xs font-black rounded-lg shadow-lg shadow-blue-900/20 transition-all active:scale-95"
             @click="addBlacklistItem"
           >
             <Plus v-if="!loading" :size="16" />
-            <AppSpinner :size="16" />
-            {{ loading ? locale.processing : locale.addButton }}
+            <div
+              v-else
+              class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"
+            />
+            {{ loading ? '处理中...' : '添加到黑名单' }}
           </button>
         </div>
       </div>
@@ -110,30 +110,28 @@
 
     <!-- 筛选和搜索 -->
     <div
-      class="bg-bg-secondary-20 border border-border-secondary rounded-xl p-4 flex flex-col md:flex-row gap-4 items-center"
+      class="bg-zinc-900/20 border border-zinc-800 rounded-xl p-4 flex flex-col md:flex-row gap-4 items-center"
     >
       <div class="flex-1 relative w-full">
-        <Search class="absolute left-4 top-1/2 -translate-y-1/2 text-text-secondary" :size="18" />
+        <Search class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-700" :size="18" />
         <input
           v-model="filters.search"
           type="text"
-          :placeholder="locale.searchPlaceholder"
-          class="w-full bg-bg-primary-50 border border-border-secondary rounded-lg pl-12 pr-4 py-3 text-sm text-text-primary focus:outline-none focus:border-primary-30 placeholder:text-text-secondary transition-all"
+          placeholder="在黑名单中搜索..."
+          class="w-full bg-zinc-950/50 border border-zinc-800 rounded-lg pl-12 pr-4 py-3 text-sm text-zinc-200 focus:outline-none focus:border-blue-500/30 placeholder:text-zinc-700 transition-all"
           @input="debounceSearch"
         >
       </div>
       <div class="flex gap-3 w-full md:w-auto">
         <CustomSelect
-          :label="locale.typeFilter"
-          v-model="filters.type"
-          :options="typeOptions"
-          label-key="label"
-          value-key="value"
+          label="类型筛选"
+          :value="typeFilterLabel"
+          :options="['全部类型', '具体歌曲', '关键词', '语种', '曲风']"
           class="flex-1 md:w-48"
-          @change="() => { pagination.page = 1; loadBlacklist(); }"
+          @change="handleTypeFilterChange"
         />
         <button
-          class="p-3 bg-bg-primary border border-border-secondary rounded-lg text-text-disabled hover:text-primary transition-all active:scale-95 flex items-center justify-center"
+          class="p-3 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-600 hover:text-blue-400 transition-all active:scale-95"
           @click="loadBlacklist"
         >
           <Filter :size="18" />
@@ -144,8 +142,8 @@
     <!-- 黑名单列表 -->
     <div class="space-y-4">
       <div class="flex items-center justify-between px-2">
-        <h4 class="text-[10px] font-black text-text-disabled uppercase tracking-widest">
-          {{ locale.listTitle(pagination.total) }}
+        <h4 class="text-[10px] font-black text-zinc-600 uppercase tracking-widest">
+          黑名单列表 ({{ pagination.total }} 项)
         </h4>
       </div>
 
@@ -161,64 +159,67 @@
           <div
             v-for="item in blacklist"
             :key="item.id"
-            class="group flex flex-col lg:flex-row lg:items-center gap-6 p-6 bg-bg-secondary-30 border rounded-xl transition-all hover:border-border-tertiary"
-            :class="[item.isActive ? 'border-border-secondary' : 'border-border-secondary-40 opacity-60']"
+            class="group flex flex-col lg:flex-row lg:items-center gap-6 p-6 bg-zinc-900/30 border rounded-xl transition-all hover:border-zinc-700"
+            :class="[item.isActive ? 'border-zinc-800' : 'border-zinc-800/40 opacity-60']"
           >
             <div class="flex-1 flex items-start gap-5">
               <div
                 class="shrink-0 w-12 h-12 rounded-lg flex items-center justify-center border transition-all"
-                :class="getTypeMeta(item.type).boxClass"
+                :class="getTypeIconClass(item.type)"
               >
-                <component :is="getTypeMeta(item.type).icon" :size="22" />
+                <Music v-if="item.type === 'SONG'" :size="22" />
+                <Type v-else-if="item.type === 'KEYWORD'" :size="22" />
+                <Languages v-else-if="item.type === 'LANGUAGE'" :size="22" />
+                <Disc3 v-else :size="22" />
               </div>
 
               <div class="space-y-1.5 min-w-0">
                 <div class="flex items-center gap-3">
                   <span
                     class="text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded border"
-                    :class="getTypeMeta(item.type).badgeClass"
+                    :class="getTypeBadgeClass(item.type)"
                   >
-                    {{ getTypeMeta(item.type).label }}
+                    {{ getTypeLabel(item.type) }}
                   </span>
-                  <h5 class="text-base font-black text-text-primary truncate tracking-tight">
+                  <h5 class="text-base font-black text-zinc-100 truncate tracking-tight">
                     {{ item.value }}
                   </h5>
                 </div>
 
                 <div class="flex flex-wrap items-center gap-4">
-                  <div class="flex items-center gap-2 text-text-tertiary font-bold text-[11px]">
-                    <MessageSquare :size="12" class="text-text-secondary" />
-                    {{ locale.reasonPrefix }} {{ item.reason || locale.noReason }}
+                  <div class="flex items-center gap-2 text-zinc-500 font-bold text-[11px]">
+                    <MessageSquare :size="12" class="text-zinc-700" />
+                    原因: {{ item.reason || '未填写原因' }}
                   </div>
                   <div
-                    class="flex items-center gap-2 text-text-disabled font-bold text-[10px] uppercase tracking-tighter"
+                    class="flex items-center gap-2 text-zinc-600 font-bold text-[10px] uppercase tracking-tighter"
                   >
-                    <Clock :size="11" class="text-text-primary" />
-                    {{ locale.createdAt }} {{ formatDate(item.createdAt) }}
+                    <Clock :size="11" class="text-zinc-800" />
+                    创建时间: {{ formatDate(item.createdAt) }}
                   </div>
                 </div>
               </div>
             </div>
 
             <div
-              class="flex items-center justify-end gap-3 pt-4 lg:pt-0 border-t lg:border-t-0 border-border-secondary-50"
+              class="flex items-center justify-end gap-3 pt-4 lg:pt-0 border-t lg:border-t-0 border-zinc-800/50"
             >
               <button
                 :disabled="loading"
                 class="flex items-center gap-2 px-5 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
                 :class="[
                   item.isActive
-                    ? 'bg-bg-tertiary text-text-tertiary hover:text-warning hover:bg-warning-5 hover:border-warning-10 border border-transparent'
-                    : 'bg-success text-text-primary shadow-lg shadow-[var(--success-glow-20)]'
+                    ? 'bg-zinc-800 text-zinc-500 hover:text-amber-500 hover:bg-amber-500/5 hover:border-amber-500/10 border border-transparent'
+                    : 'bg-emerald-600 text-white shadow-lg shadow-emerald-900/20'
                 ]"
                 @click="toggleItemStatus(item)"
               >
                 <Power :size="12" />
-                {{ item.isActive ? locale.disable : locale.enable }}
+                {{ item.isActive ? '禁用' : '启用' }}
               </button>
               <button
                 :disabled="loading"
-                class="p-3 bg-bg-primary border border-border-secondary rounded-xl text-text-secondary hover:text-error hover:border-error-30 transition-all active:scale-95"
+                class="p-3 bg-zinc-950 border border-zinc-800 rounded-xl text-zinc-700 hover:text-red-500 hover:border-red-500/30 transition-all active:scale-95"
                 @click="deleteItem(item)"
               >
                 <Trash2 :size="16" />
@@ -232,24 +233,26 @@
           v-if="loading && blacklist.length === 0"
           class="py-20 flex flex-col items-center justify-center space-y-4"
         >
-          <AppSpinner :size="48" />
-          <p class="text-text-tertiary text-xs font-bold uppercase tracking-widest">{{ locale.loading }}</p>
+          <div
+            class="w-12 h-12 border-4 border-zinc-800 border-t-blue-500 rounded-full animate-spin"
+          />
+          <p class="text-zinc-500 text-xs font-bold uppercase tracking-widest">加载中...</p>
         </div>
 
         <!-- 空状态 -->
         <div
           v-else-if="blacklist.length === 0"
-          class="py-20 flex flex-col items-center justify-center text-center space-y-4 bg-bg-secondary-10 border border-border-secondary-40 border-dashed rounded-xl"
+          class="py-20 flex flex-col items-center justify-center text-center space-y-4 bg-zinc-900/10 border border-zinc-800/40 border-dashed rounded-xl"
         >
           <div
-            class="w-16 h-16 rounded-lg bg-bg-primary border border-border-secondary flex items-center justify-center text-text-primary shadow-xl"
+            class="w-16 h-16 rounded-lg bg-zinc-950 border border-zinc-800 flex items-center justify-center text-zinc-800 shadow-xl"
           >
             <Ban :size="32" />
           </div>
           <div class="space-y-1 px-4">
-            <h6 class="text-sm font-bold text-text-disabled">{{ locale.emptyTitle }}</h6>
-            <p class="text-[10px] text-text-secondary font-bold uppercase tracking-widest">
-              {{ locale.emptyDesc }}
+            <h6 class="text-sm font-bold text-zinc-600">未找到匹配的黑名单项</h6>
+            <p class="text-[10px] text-zinc-700 font-bold uppercase tracking-widest">
+              请尝试调整筛选条件或添加新项目
             </p>
           </div>
         </div>
@@ -259,19 +262,19 @@
       <div v-if="pagination.pages > 1" class="flex items-center justify-center gap-4 mt-8">
         <button
           :disabled="pagination.page <= 1 || loading"
-          class="p-3 bg-bg-primary border border-border-secondary rounded-lg text-text-tertiary hover:text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-95 flex items-center justify-center"
+          class="p-3 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 hover:text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-95"
           @click="changePage(pagination.page - 1)"
         >
           <ChevronLeft :size="20" />
         </button>
         <div
-          class="px-6 py-3 bg-bg-secondary-50 border border-border-secondary rounded-lg text-[11px] font-black text-text-tertiary uppercase tracking-widest"
+          class="px-6 py-3 bg-zinc-900/50 border border-zinc-800 rounded-lg text-[11px] font-black text-zinc-400 uppercase tracking-widest"
         >
-          {{ locale.pagination(pagination.page, pagination.pages) }}
+          第 {{ pagination.page }} 页 / 共 {{ pagination.pages }} 页
         </div>
         <button
           :disabled="pagination.page >= pagination.pages || loading"
-          class="p-3 bg-bg-primary border border-border-secondary rounded-lg text-text-tertiary hover:text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-95 flex items-center justify-center"
+          class="p-3 bg-zinc-950 border border-zinc-800 rounded-lg text-zinc-400 hover:text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-95"
           @click="changePage(pagination.page + 1)"
         >
           <ChevronRight :size="20" />
@@ -290,37 +293,39 @@
     >
       <div
         v-if="showDeleteDialog"
-        class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-bg-primary-80 backdrop-blur-sm"
+        class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm"
       >
         <div
-          class="w-full max-w-md bg-bg-secondary border border-border-secondary rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300"
+          class="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300"
           @click.stop
         >
           <div class="flex flex-col items-center py-8 space-y-6 text-center px-8">
             <div
-              class="w-16 h-16 rounded-lg bg-error-10 text-error flex items-center justify-center border border-error-20 shadow-2xl shadow-[var(--error-glow-10)]"
+              class="w-16 h-16 rounded-lg bg-red-600/10 text-red-500 flex items-center justify-center border border-red-500/20 shadow-2xl shadow-red-900/10"
             >
               <Trash2 :size="28" />
             </div>
             <div class="space-y-2">
-              <h4 class="text-lg font-bold text-text-primary">{{ locale.removeTitle }}</h4>
-              <p class="text-xs text-text-tertiary leading-relaxed">
-                {{ locale.removeMessage(deleteTargetItem?.value || '') }}
+              <h4 class="text-lg font-bold text-zinc-100">确认从黑名单移除</h4>
+              <p class="text-xs text-zinc-500 leading-relaxed">
+                确定要移除
+                <span class="text-zinc-300 font-bold">"{{ deleteTargetItem?.value }}"</span>
+                吗？移除后，该项目将恢复为正常状态。
               </p>
             </div>
             <div class="flex gap-3 w-full pt-4">
               <button
-                class="flex-1 px-4 py-4 bg-bg-tertiary hover:bg-bg-quaternary text-text-tertiary text-[10px] font-black rounded-lg transition-all uppercase tracking-widest"
+                class="flex-1 px-4 py-4 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 text-[10px] font-black rounded-lg transition-all uppercase tracking-widest"
                 @click="showDeleteDialog = false"
               >
-                {{ locale.cancel }}
+                取消
               </button>
               <button
                 :disabled="loading"
-                class="flex-1 px-4 py-4 bg-error hover:bg-error text-text-primary text-[10px] font-black rounded-lg shadow-xl shadow-[var(--error-glow-20)] transition-all active:scale-95 uppercase tracking-widest disabled:opacity-50"
+                class="flex-1 px-4 py-4 bg-red-600 hover:bg-red-500 text-white text-[10px] font-black rounded-lg shadow-xl shadow-red-900/20 transition-all active:scale-95 uppercase tracking-widest disabled:opacity-50"
                 @click="confirmDelete"
               >
-                {{ loading ? locale.deleting : locale.confirmRemove }}
+                {{ loading ? '删除中...' : '确认移除' }}
               </button>
             </div>
           </div>
@@ -330,15 +335,12 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, reactive, ref, computed } from 'vue'
-import AppSpinner from '~/components/UI/Common/AppSpinner.vue'
 import {
   ShieldAlert,
   Music,
   Type,
-  Languages,
-  AudioLines,
   Plus,
   Search,
   Filter,
@@ -349,30 +351,14 @@ import {
   Ban,
   ChevronLeft,
   ChevronRight,
-  ChevronDown
+  ChevronDown,
+  Languages,
+  Disc3
 } from '@lucide/vue'
 import { useToast } from '~/composables/useToast'
 import CustomSelect from '~/components/UI/Common/CustomSelect.vue'
-import {
-  BLACKLIST_LANGUAGE_VALUES,
-  BLACKLIST_GENRE_VALUES,
-  BLACKLIST_LANGUAGE_LABEL_EN,
-  BLACKLIST_GENRE_LABEL_EN
-} from '~/utils/blacklist'
-import { useLocale } from '~/utils/locale'
 
 const { showToast: showNotification } = useToast()
-const { admin, currentLocale } = useLocale()
-const locale = computed(() => {
-  const base = admin.value?.blacklist || {}
-  return {
-    ...base,
-    listTitle: (total) => formatLocaleValue(base.listTitle, total),
-    pagination: (page, pages) => formatLocaleValue(base.pagination, page, pages),
-    removeMessage: (value) => formatLocaleValue(base.removeMessage, value),
-    statusSuccess: (statusText) => formatLocaleValue(base.statusSuccess, statusText)
-  }
-})
 
 const blacklist = ref([])
 const loading = ref(false)
@@ -401,80 +387,66 @@ const pagination = reactive({
   pages: 0
 })
 
-const typeOptions = computed(() => [
-  { label: locale.value?.allTypes || 'All Types', value: '' },
-  { label: locale.value?.song || 'Song', value: 'SONG' },
-  { label: locale.value?.keyword || 'Keyword', value: 'KEYWORD' },
-  { label: locale.value?.language || 'Language', value: 'LANGUAGE' },
-  { label: locale.value?.genre || 'Genre', value: 'GENRE' }
-])
+const typeFilterLabel = computed(() => {
+  if (filters.type === 'SONG') return '具体歌曲'
+  if (filters.type === 'KEYWORD') return '关键词'
+  if (filters.type === 'LANGUAGE') return '语种'
+  if (filters.type === 'GENRE') return '曲风'
+  return '全部类型'
+})
 
-// 类型 → 图标/徽章/文案元数据
-const getTypeMeta = (type) => {
+const typeValueLabel = computed(() => {
+  if (newItem.type === 'SONG') return '歌曲名称 - 艺术家'
+  if (newItem.type === 'KEYWORD') return '关键词内容'
+  if (newItem.type === 'LANGUAGE') return '语种名称'
+  if (newItem.type === 'GENRE') return '曲风名称'
+  return '内容'
+})
+
+const typePlaceholder = computed(() => {
+  if (newItem.type === 'SONG') return '例如: 歌曲名 - 艺术家'
+  if (newItem.type === 'KEYWORD') return '例如: 敏感词、特定风格'
+  if (newItem.type === 'LANGUAGE') return '例如: 日文 或 中文,英文,日文'
+  if (newItem.type === 'GENRE') return '例如: DJ 或 流行,摇滚,rap'
+  return '请输入内容'
+})
+
+const getTypeLabel = (type: string) => {
+  if (type === 'SONG') return '具体歌曲'
+  if (type === 'KEYWORD') return '关键词'
+  if (type === 'LANGUAGE') return '语种'
+  if (type === 'GENRE') return '曲风'
+  return type
+}
+
+const getTypeIconClass = (type: string) => {
   switch (type) {
     case 'SONG':
-      return {
-        icon: Music,
-        label: locale.value?.song || 'Song',
-        boxClass: 'bg-primary-hover-10 text-primary border-primary-20 shadow-lg shadow-[var(--primary-glow-5)]',
-        badgeClass: 'bg-primary-hover-10 text-primary border-primary-20'
-      }
+      return 'bg-blue-600/10 text-blue-500 border-blue-500/20 shadow-lg shadow-blue-900/5'
+    case 'KEYWORD':
+      return 'bg-purple-600/10 text-purple-500 border-purple-500/20 shadow-lg shadow-purple-900/5'
     case 'LANGUAGE':
-      return {
-        icon: Languages,
-        label: locale.value?.language || 'Language',
-        boxClass: 'bg-warning-10 text-warning border-warning-20 shadow-lg shadow-[var(--warning-glow-5)]',
-        badgeClass: 'bg-warning-10 text-warning border-warning-20'
-      }
+      return 'bg-amber-600/10 text-amber-500 border-amber-500/20 shadow-lg shadow-amber-900/5'
     case 'GENRE':
-      return {
-        icon: AudioLines,
-        label: locale.value?.genre || 'Genre',
-        boxClass: 'bg-success-10 text-success border-success-20 shadow-lg shadow-[var(--success-glow-5)]',
-        badgeClass: 'bg-success-10 text-success border-success-20'
-      }
+      return 'bg-emerald-600/10 text-emerald-500 border-emerald-500/20 shadow-lg shadow-emerald-900/5'
     default:
-      return {
-        icon: Type,
-        label: locale.value?.keyword || 'Keyword',
-        boxClass: 'bg-info-10 text-info border-info-20 shadow-lg shadow-[var(--info-glow-5)]',
-        badgeClass: 'bg-info-10 text-info border-info-20'
-      }
+      return 'bg-zinc-600/10 text-zinc-500 border-zinc-500/20'
   }
 }
 
-// 语种/曲风候选值选项（存储值为规范中文标签，英文界面附注显示名）
-const localeValueLabel = (value, enMap) =>
-  currentLocale.value === 'en-US' ? `${enMap[value] || value} (${value})` : value
-
-const typeValueOptions = computed(() => {
-  if (newItem.type === 'LANGUAGE') {
-    return BLACKLIST_LANGUAGE_VALUES.map((value) => ({
-      value,
-      label: localeValueLabel(value, BLACKLIST_LANGUAGE_LABEL_EN)
-    }))
+const getTypeBadgeClass = (type: string) => {
+  switch (type) {
+    case 'SONG':
+      return 'bg-blue-600/10 text-blue-400 border-blue-500/20'
+    case 'KEYWORD':
+      return 'bg-purple-600/10 text-purple-400 border-purple-500/20'
+    case 'LANGUAGE':
+      return 'bg-amber-600/10 text-amber-400 border-amber-500/20'
+    case 'GENRE':
+      return 'bg-emerald-600/10 text-emerald-400 border-emerald-500/20'
+    default:
+      return 'bg-zinc-600/10 text-zinc-400 border-zinc-500/20'
   }
-  if (newItem.type === 'GENRE') {
-    return BLACKLIST_GENRE_VALUES.map((value) => ({
-      value,
-      label: localeValueLabel(value, BLACKLIST_GENRE_LABEL_EN)
-    }))
-  }
-  return []
-})
-
-const valueLabel = computed(() => {
-  if (newItem.type === 'SONG') return locale.value?.songLabel
-  if (newItem.type === 'KEYWORD') return locale.value?.keywordLabel
-  if (newItem.type === 'LANGUAGE') return locale.value?.languageLabel
-  return locale.value?.genreLabel
-})
-
-// 切换类型时清空已选值
-const selectType = (type) => {
-  if (newItem.type === type) return
-  newItem.type = type
-  newItem.value = ''
 }
 
 let searchTimeout = null
@@ -499,16 +471,24 @@ const loadBlacklist = async () => {
     blacklist.value = response.blacklist
     Object.assign(pagination, response.pagination)
   } catch (err) {
-    const fetchFailed = locale.value?.fetchFailed || 'Failed to load blacklist'
-    error.value = fetchFailed
+    error.value = '获取黑名单失败'
     console.error('获取黑名单失败:', err)
-    showNotification(`${fetchFailed}: ${getErrorMessage(err)}`, 'error')
+    showNotification('获取黑名单失败: ' + (err.data?.message || err.message), 'error')
   } finally {
     loading.value = false
   }
 }
 
-// 处理类型筛选变更
+const handleTypeFilterChange = (label) => {
+  if (label === '具体歌曲') filters.type = 'SONG'
+  else if (label === '关键词') filters.type = 'KEYWORD'
+  else if (label === '语种') filters.type = 'LANGUAGE'
+  else if (label === '曲风') filters.type = 'GENRE'
+  else filters.type = ''
+
+  pagination.page = 1
+  loadBlacklist()
+}
 
 // 添加黑名单项
 const addBlacklistItem = async () => {
@@ -529,7 +509,7 @@ const addBlacklistItem = async () => {
       ...useAuth().getAuthConfig()
     })
 
-    showNotification(locale.value.addSuccess, 'success')
+    showNotification('黑名单项添加成功', 'success')
 
     // 重置表单
     newItem.value = ''
@@ -539,9 +519,9 @@ const addBlacklistItem = async () => {
     pagination.page = 1
     await loadBlacklist()
   } catch (err) {
-    error.value = getErrorMessage(err) || locale.value.addFailed
+    error.value = err.data?.message || '添加黑名单项失败'
     console.error('添加黑名单项失败:', err)
-    showNotification(locale.value.addFailedPrefix + error.value, 'error')
+    showNotification('添加失败: ' + error.value, 'error')
   } finally {
     loading.value = false
   }
@@ -562,11 +542,11 @@ const toggleItemStatus = async (item) => {
     })
 
     item.isActive = !item.isActive
-    showNotification(locale.value.statusSuccess(item.isActive ? locale.value.enable : locale.value.disable), 'success')
+    showNotification(`黑名单项已${item.isActive ? '启用' : '禁用'}`, 'success')
   } catch (err) {
-    error.value = locale.value.updateFailed
+    error.value = '更新状态失败'
     console.error('更新状态失败:', err)
-    showNotification(locale.value.updateFailed, 'error')
+    showNotification('更新状态失败', 'error')
   } finally {
     loading.value = false
   }
@@ -591,12 +571,12 @@ const confirmDelete = async () => {
       ...useAuth().getAuthConfig()
     })
 
-    showNotification(locale.value.deleteSuccess, 'success')
+    showNotification('黑名单项删除成功', 'success')
     await loadBlacklist()
   } catch (err) {
-    error.value = locale.value.deleteFailed
+    error.value = '删除失败'
     console.error('删除失败:', err)
-    showNotification(`${locale.value.deleteFailed}: ${getErrorMessage(err)}`, 'error')
+    showNotification('删除失败: ' + err.message, 'error')
   } finally {
     loading.value = false
     showDeleteDialog.value = false
@@ -622,9 +602,7 @@ const changePage = (page) => {
 // 格式化日期
 const formatDate = (dateString) => {
   if (!dateString) return '-'
-  const date = new Date(dateString)
-  if (Number.isNaN(date.getTime())) return '-'
-  return date.toLocaleString(currentLocale.value, {
+  return new Date(dateString).toLocaleString('zh-CN', {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
@@ -667,7 +645,7 @@ onMounted(() => {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--panel-bg-alt);
+  background: var(--bg-tertiary, #27272a);
   border-radius: 10px;
 }
 </style>