From bf0a5a00982ed596e790807c3445d92a053aa451 Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Wed, 12 Nov 2025 09:47:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=AF=8D=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80=E5=92=8C=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PromptManager.vue | 66 +++++++++++++++++++++++---------
 src/stores/promptStore.ts        |  3 +-
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/components/PromptManager.vue b/src/components/PromptManager.vue
index 3558f3e..824e5de 100644
--- a/src/components/PromptManager.vue
+++ b/src/components/PromptManager.vue
@@ -111,7 +111,7 @@ function resetDefault() {
     <header class="pm-toolbar">
       <div class="pm-left">
         <label>语言</label>
-        <select v-model="selectedLang">
+        <select v-model="selectedLang" class="pm-select pm-lang">
           <option v-for="l in languages" :key="l" :value="l">{{ l }}</option>
         </select>
         <input
@@ -151,7 +151,7 @@ function resetDefault() {
 
       <section class="pm-list">
         <div class="pm-list-toolbar">
-          <button @click="addTag">新增提示词</button>
+          <button class="pm-btn-primary" @click="addTag">新增提示词</button>
         </div>
         <div v-if="!currentGroup" class="pm-empty">请选择一个分组</div>
         <ul v-else class="pm-tags">
@@ -162,7 +162,7 @@ function resetDefault() {
             @dragstart="onDragStart(ti)"
             @dragover="onDragOver(ti, $event)"
             @drop="onDrop(ti)"
-            :class="{ hidden: t.hidden }"
+            :class="{ hidden: t.hidden, 'pm-over': ti===overIndex }"
           >
             <span class="pm-handle">⋮⋮</span>
             <input class="pm-key" :value="t.key" @input="updateKey(t, ($event.target as HTMLInputElement).value)" />
@@ -178,31 +178,59 @@ function resetDefault() {
 </template>
 
 <style scoped>
-.pm-root { display: flex; flex-direction: column; height: 100vh; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
-.pm-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; gap: 12px; }
+.pm-root { display: flex; flex-direction: column; height: 100vh; }
+.pm-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--color-border); gap: 12px; background-color: var(--color-bg-primary); }
 .pm-left { display: flex; align-items: center; gap: 8px; }
 .pm-right { display: flex; align-items: center; gap: 8px; }
-.pm-tip { font-size: 12px; color: #6b7280; }
-.pm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; line-height: 1; font-size: 14px; }
+.pm-tip { font-size: 12px; color: var(--color-text-tertiary); }
+
+/* 按钮与输入样式，与 PresetManager 保持一致 */
+.pm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); cursor: pointer; line-height: 1; font-size: 14px; color: var(--color-text-primary); transition: all 0.2s ease; }
+.pm-btn:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-border-hover); }
+.pm-btn-primary, .pm-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; line-height: 1; }
+.pm-btn-primary { background-color: var(--color-accent); color: var(--color-text-primary); border-color: var(--color-accent); }
+.pm-btn-primary:hover { background-color: var(--color-accent-hover); }
+.pm-btn-secondary { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
+.pm-btn-secondary:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-border-hover); }
+
 .pm-import { display: inline-flex; align-items: center; gap: 6px; }
 .pm-import input { display: none; }
-.pm-search { width: 240px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; }
+.pm-search { width: 240px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-secondary); color: var(--color-text-primary); }
+.pm-search:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
+.pm-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 10px; height: 32px; line-height: 20px; font-size: 14px; color: var(--color-text-primary); }
+.pm-select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
+
 .pm-main { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 50px); }
-.pm-cats { border-right: 1px solid #e5e7eb; overflow: auto; padding: 8px; }
-.pm-section-title { font-size: 12px; color: #6b7280; margin: 8px 0; }
+.pm-cats { border-right: 1px solid var(--color-border); overflow: auto; padding: 8px; background-color: var(--color-bg-primary); }
+.pm-section-title { font-size: 12px; color: var(--color-text-tertiary); margin: 8px 0; }
 .pm-cats ul { list-style: none; margin: 0; padding: 0; }
-.pm-cats li { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
-.pm-cats li.active { background: #eef2ff; }
+.pm-cats li { padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer; }
+.pm-cats li.active { background-color: var(--color-accent-light); }
 .pm-color { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
 .pm-list { padding: 8px; overflow: auto; }
-.pm-list-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
-.pm-empty { color: #6b7280; padding: 20px; }
+.pm-list-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 8px; }
+.pm-empty { color: var(--color-text-tertiary); padding: 20px; }
 .pm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
-.pm-tags li { display: grid; grid-template-columns: 24px 1fr 1fr auto auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 6px; }
+.pm-tags li { display: grid; grid-template-columns: 24px 1fr 1fr auto auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-primary); }
 .pm-tags li { will-change: transform; }
 .pm-tags li.hidden { opacity: 0.5; }
-.pm-handle { cursor: grab; user-select: none; color: #6b7280; text-align: center; }
-.pm-key, .pm-trans { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; }
-.pm-hide, .pm-del, .pm-list-toolbar button, .pm-right button { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; line-height: 1; }
-.pm-hide:hover, .pm-del:hover, .pm-list-toolbar button:hover, .pm-right button:hover, .pm-btn:hover { background: #f3f4f6; }
+.pm-tags li.pm-over { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
+.pm-handle { cursor: grab; user-select: none; color: var(--color-text-tertiary); text-align: center; }
+.pm-key, .pm-trans { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-secondary); color: var(--color-text-primary); }
+.pm-key:focus, .pm-trans:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
+.pm-hide, .pm-del, .pm-list-toolbar button, .pm-right button { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); cursor: pointer; line-height: 1; }
+.pm-hide:hover, .pm-del:hover, .pm-list-toolbar button:hover, .pm-right button:hover, .pm-btn:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-hover); }
+
+/* 手机端适配 */
+@media (max-width: 768px) {
+  .pm-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
+  .pm-left, .pm-right { flex-wrap: wrap; width: 100%; }
+  .pm-search { width: 100%; }
+  .pm-tip { display: none; }
+  .pm-main { grid-template-columns: 1fr; height: auto; }
+  .pm-cats { border-right: 0; border-bottom: 1px solid var(--color-border); }
+  .pm-tags li { grid-template-columns: 1fr; gap: 8px; }
+  .pm-handle { text-align: left; }
+  .pm-key, .pm-trans { width: 100%; }
+}
 </style>
\ No newline at end of file
diff --git a/src/stores/promptStore.ts b/src/stores/promptStore.ts
index 65ab103..1e52b08 100644
--- a/src/stores/promptStore.ts
+++ b/src/stores/promptStore.ts
@@ -202,7 +202,8 @@ export const usePromptStore = defineStore('promptStore', {
     addTag(groupId: string, key = 'new_tag') {
       const grp = this.findGroupById(groupId);
       if (!grp) return;
-      grp.tags.push({ key, translation: { en: key, [this.selectedLang]: key } });
+      // 新增提示词插入到列表顶部，便于用户立即编辑
+      grp.tags.unshift({ key, translation: { en: key, [this.selectedLang]: key } });
     },
     removeTag(groupId: string, key: string) {
       const grp = this.findGroupById(groupId);