优化优先级

src/components/editor/EditorInput.vue

@@ -6,14 +6,16 @@ import PromptQuickAdd from '../PromptQuickAdd.vue';
 const props = defineProps<{
   text: string;
   suggestions: string[];
-  priorityStyle: '{}' | '()' | '[]' | '<>' | 'suffix';
+  numericMode: boolean;
+  bracketStyle: '()' | '{}' | '[]' | '<>';
   priorityStep: number;
   getSuggestions: (prefix: string, limit: number) => string[];
 }>();
 
 const emit = defineEmits<{
   'update:text': [value: string];
-  'update:priorityStyle': [value: '{}' | '()' | '[]' | '<>' | 'suffix'];
+  'update:numericMode': [value: boolean];
+  'update:bracketStyle': [value: '()' | '{}' | '[]' | '<>'];
   'update:priorityStep': [value: number];
   'update-suggestions': [];
   'copy': [];
@@ -33,9 +35,14 @@ const localText = computed({
   set: (v: string) => emit('update:text', v),
 });
 
-const localPriorityStyle = computed({
-  get: () => props.priorityStyle,
-  set: (v: '{}' | '()' | '[]' | '<>' | 'suffix') => emit('update:priorityStyle', v),
+const localNumericMode = computed({
+  get: () => props.numericMode,
+  set: (v: boolean) => emit('update:numericMode', v),
+});
+
+const localBracketStyle = computed({
+  get: () => props.bracketStyle,
+  set: (v: '()' | '{}' | '[]' | '<>') => emit('update:bracketStyle', v),
 });
 
 const localPriorityStep = computed({
@@ -204,24 +211,41 @@ defineExpose({
         切换 _/空格
       </button>
       <div class="pe-priority-group">
-        <label class="pe-priority-label">优先级样式</label>
-        <select class="pe-priority-select" v-model="localPriorityStyle" title="选择新增优先级的样式">
-          <option value="{}">{}</option>
-          <option value="()">()</option>
-          <option value="[]">[]</option>
-          <option value="<>">&lt;&gt;</option>
-          <option value="suffix">后缀数字</option>
-        </select>
-        <label class="pe-priority-label">后缀数字间隔</label>
-        <input 
-          type="number" 
-          class="pe-priority-step" 
-          v-model.number="localPriorityStep" 
-          title="设置增减间隔" 
-          min="0.01" 
-          step="0.01" 
-          placeholder="1" 
-        />
+        <button
+          type="button"
+          class="pe-mode-toggle"
+          :class="{ 'is-numeric': localNumericMode }"
+          role="switch"
+          :aria-checked="localNumericMode"
+          @click="localNumericMode = !localNumericMode"
+          :title="localNumericMode ? '当前：数字权重模式（点击切换为括号嵌套）' : '当前：括号嵌套模式（点击切换为数字权重）'"
+        >
+          <span class="pe-mode-opt" :class="{ active: !localNumericMode }">括号</span>
+          <span class="pe-mode-opt" :class="{ active: localNumericMode }">数字</span>
+          <span class="pe-mode-knob"></span>
+        </button>
+
+        <template v-if="!localNumericMode">
+          <label class="pe-priority-label">括号样式</label>
+          <select class="pe-priority-select" v-model="localBracketStyle" title="选择外套括号的样式">
+            <option value="()">( )</option>
+            <option value="{}">{ }</option>
+            <option value="[]">[ ]</option>
+            <option value="<>">&lt; &gt;</option>
+          </select>
+        </template>
+        <template v-else>
+          <label class="pe-priority-label">权重步进</label>
+          <input
+            type="number"
+            class="pe-priority-step"
+            v-model.number="localPriorityStep"
+            title="设置每次加减的权重步进"
+            min="0.01"
+            step="0.05"
+            placeholder="0.1"
+          />
+        </template>
       </div>
     </div>
     <ul class="pe-suggest" v-if="suggestions.length">
@@ -322,6 +346,59 @@ defineExpose({
   flex-wrap: wrap;
 }
 
+/* 模式切换开关：括号 / 数字 */
+.pe-mode-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background-color: var(--color-bg-secondary);
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.pe-mode-toggle:hover {
+  border-color: var(--color-border-hover);
+}
+
+.pe-mode-opt {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  padding: 0.4rem 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  transition: color 0.25s ease;
+}
+
+.pe-mode-opt.active {
+  color: white;
+}
+
+.pe-mode-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(50% - 2px);
+  height: calc(100% - 4px);
+  border-radius: 999px;
+  background-color: var(--color-accent);
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.pe-mode-toggle.is-numeric .pe-mode-knob {
+  transform: translateX(100%);
+}
+
 .pe-priority-label {
   font-size: 0.875rem;
   font-weight: 500;