文件拆分

src/components/editor/EditorInput.vue

@@ -0,0 +1,395 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue';
+import { splitTokens, parseDetailedToken, constructToken } from '../../stores/promptStore';
+import PromptQuickAdd from '../PromptQuickAdd.vue';
+
+const props = defineProps<{
+  text: string;
+  suggestions: string[];
+  priorityStyle: '{}' | '()' | '[]' | '<>' | 'suffix';
+  priorityStep: number;
+  getSuggestions: (prefix: string, limit: number) => string[];
+}>();
+
+const emit = defineEmits<{
+  'update:text': [value: string];
+  'update:priorityStyle': [value: '{}' | '()' | '[]' | '<>' | 'suffix'];
+  'update:priorityStep': [value: number];
+  'update-suggestions': [];
+  'copy': [];
+  'replace-cn-comma': [];
+  'format-prompt': [];
+  'unify-priority': [];
+  'toggle-underscore': [];
+  'add-tag': [tag: string];
+}>();
+
+const inputEl = ref<HTMLTextAreaElement | null>(null);
+
+const localText = computed({
+  get: () => props.text,
+  set: (v: string) => emit('update:text', v),
+});
+
+const localPriorityStyle = computed({
+  get: () => props.priorityStyle,
+  set: (v: '{}' | '()' | '[]' | '<>' | 'suffix') => emit('update:priorityStyle', v),
+});
+
+const localPriorityStep = computed({
+  get: () => props.priorityStep,
+  set: (v: number) => emit('update:priorityStep', v),
+});
+
+// 计算左侧输入（textarea）基于光标位置的片段替换范围（修剪前后空格）
+function getTextSegmentBounds(txt: string, pos: number) {
+  const leftCommaEn = txt.lastIndexOf(',', pos - 1);
+  const leftCommaCn = txt.lastIndexOf('，', pos - 1);
+  const left = Math.max(leftCommaEn, leftCommaCn);
+  const rightCommaEn = txt.indexOf(',', pos);
+  const rightCommaCn = txt.indexOf('，', pos);
+  const rightCandidates = [rightCommaEn, rightCommaCn].filter(i => i !== -1);
+  const right = rightCandidates.length ? Math.min(...rightCandidates) : txt.length;
+  let start = left < 0 ? 0 : left + 1;
+  let end = right;
+  while (start < end && txt[start] && /\s/.test(txt[start]!)) start++;
+  while (end > start && txt[end - 1] && /\s/.test(txt[end - 1]!)) end--;
+  return { start, end };
+}
+
+// 统一的文本替换方法：优先使用原生插入以保留撤回栈，失败时回退
+function applyTextReplacement(
+  el: HTMLTextAreaElement | HTMLInputElement,
+  start: number,
+  end: number,
+  text: string,
+) {
+  try {
+    if (typeof el.setSelectionRange === 'function') {
+      el.setSelectionRange(start, end);
+    }
+    const ok = (document as any).execCommand && (document as any).execCommand('insertText', false, text);
+    if (ok) return;
+  } catch {}
+  try {
+    el.setRangeText(text, start, end, 'end');
+    try {
+      const ie = new (window as any).InputEvent('input', { bubbles: true, data: text, inputType: 'insertReplacementText' });
+      el.dispatchEvent(ie);
+    } catch {
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  } catch {
+    const value = (el as any).value as string;
+    (el as any).value = value.slice(0, start) + text + value.slice(end);
+    el.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+}
+
+async function onKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Tab') {
+    // 在光标位置进行补全，不影响撤回
+    const el = inputEl.value;
+    if (!el) return;
+    const pos = el.selectionStart ?? props.text.length;
+    const { start, end } = getTextSegmentBounds(props.text, pos);
+    const segment = props.text.slice(start, end);
+    const { core } = parseDetailedToken(segment);
+    const cleanCore = core.replace(/^[\(\[\{<]+/, '').replace(/[\)\]\}>]+$/, '');
+    
+    const list = props.getSuggestions(cleanCore, 8);
+    if (list.length > 0) {
+      e.preventDefault();
+      const s = list[0];
+      if (!s) return;
+      
+      // 智能替换：保留包裹层和权重
+      const { weight, wrappers } = parseDetailedToken(segment);
+      let newToken = '';
+      if (wrappers.length === 0 && weight === undefined && segment !== cleanCore) {
+         newToken = segment.replace(cleanCore, s);
+      } else {
+         newToken = constructToken(s, weight, wrappers);
+      }
+
+      applyTextReplacement(el, start, end, newToken);
+      await nextTick();
+      emit('update:text', el.value);
+      emit('update-suggestions');
+    }
+  }
+}
+
+async function applySuggestion(s: string) {
+  const el = inputEl.value;
+  if (!el) return;
+  el.focus();
+  const pos = el.selectionStart ?? props.text.length;
+  const { start, end } = getTextSegmentBounds(props.text, pos);
+  
+  // 智能替换逻辑
+  const segment = props.text.slice(start, end);
+  const { core, weight, wrappers } = parseDetailedToken(segment);
+  const cleanCore = core.replace(/^[\(\[\{<]+/, '').replace(/[\)\]\}>]+$/, '');
+  
+  let newToken = '';
+  if (wrappers.length === 0 && weight === undefined && segment !== cleanCore) {
+     newToken = segment.replace(cleanCore, s);
+  } else {
+     newToken = constructToken(s, weight, wrappers);
+  }
+
+  applyTextReplacement(el, start, end, newToken);
+  await nextTick();
+  emit('update:text', el.value);
+  emit('update-suggestions');
+}
+
+function updateSuggestions() {
+  // 通知父组件更新建议
+  emit('update-suggestions');
+}
+
+defineExpose({
+  inputEl,
+});
+</script>
+
+<template>
+  <section class="pe-left-pane">
+    <div class="pe-section-title">提示词输入（逗号分隔）</div>
+    <textarea 
+      ref="inputEl" 
+      class="pe-input" 
+      v-model="localText" 
+      @keydown="onKeyDown" 
+      @click="updateSuggestions" 
+      @keyup="updateSuggestions" 
+      placeholder="例如：1girl, aaa, bbb, ccc"
+    ></textarea>
+    <div class="pe-input-actions">
+      <button @click="emit('replace-cn-comma')" title="将中文逗号、括号等替换为英文符号">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
+          <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
+          <line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2"/>
+          <line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        归一化符号
+      </button>
+      <button @click="emit('format-prompt')" title="格式化提示词为标准格式">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <polyline points="4 7 4 4 20 4 20 7" stroke="currentColor" stroke-width="2"/>
+          <line x1="9" y1="20" x2="15" y2="20" stroke="currentColor" stroke-width="2"/>
+          <line x1="12" y1="4" x2="12" y2="20" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        格式化
+      </button>
+      <button @click="emit('unify-priority')" title="统一优先级样式 (core:weight)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+           <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+           <path d="M8 12h8" stroke="currentColor" stroke-width="2"/>
+           <path d="M12 8v8" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        统一优先级
+      </button>
+      <button @click="emit('toggle-underscore')" title="切换下划线和空格格式">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 12h18" stroke="currentColor" stroke-width="2"/>
+          <path d="M8 8l4-4 4 4" stroke="currentColor" stroke-width="2"/>
+          <path d="M8 16l4 4 4-4" stroke="currentColor" stroke-width="2"/>
+        </svg>
+        切换 _/空格
+      </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" 
+        />
+      </div>
+    </div>
+    <ul class="pe-suggest" v-if="suggestions.length">
+      <li 
+        v-for="s in suggestions" 
+        :key="s" 
+        @mousedown.prevent 
+        @click="applySuggestion(s)"
+      >{{ s }}</li>
+    </ul>
+    <PromptQuickAdd @add-tag="(tag) => emit('add-tag', tag)" />
+  </section>
+</template>
+
+<style scoped>
+.pe-left-pane {
+  padding: 1.5rem;
+  background-color: var(--color-bg-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.pe-section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.pe-input {
+  width: 100%;
+  height: 200px;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  resize: vertical;
+  transition: all 0.2s ease;
+}
+
+.pe-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pe-input-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+.pe-input-actions button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.pe-input-actions button:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-border-hover);
+}
+
+.pe-input-actions button svg {
+  flex-shrink: 0;
+}
+
+.pe-priority-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.pe-priority-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.pe-priority-select, .pe-priority-step {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pe-priority-select:hover, .pe-priority-step:hover {
+  border-color: var(--color-border-hover);
+}
+
+.pe-priority-select:focus, .pe-priority-step:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pe-suggest {
+  list-style: none;
+  margin: 1rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.pe-suggest li {
+  padding: 0.375rem 0.75rem;
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pe-suggest li:hover {
+  background-color: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+@media (max-width: 768px) {
+  .pe-left-pane {
+    padding: 1rem;
+  }
+  
+  .pe-input {
+    height: 150px;
+  }
+}
+
+@media (max-width: 640px) {
+  .pe-input-actions {
+    flex-direction: column;
+  }
+  
+  .pe-input-actions button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>
+

src/components/editor/EditorToolbar.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { LangCode, PresetFolder } from '../../types';
+import PresetDropdown from '../PresetDropdown.vue';
+import FolderSelector from '../preset/FolderSelector.vue';
+
+const props = defineProps<{
+  languages: LangCode[];
+  selectedLang: LangCode;
+  presetName: string;
+  selectedFolderId: string;
+  folderTree: any[];
+  flattenedFolders: any[];
+  showPresetDropdown: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:selectedLang': [value: LangCode];
+  'update:presetName': [value: string];
+  'update:selectedFolderId': [value: string];
+  'update:showPresetDropdown': [value: boolean];
+  'copy': [];
+  'save-preset': [];
+  'preset-load': [name: string];
+  'preset-save': [name: string];
+  'preset-delete': [name: string];
+  'preset-rename': [oldName: string, newName: string];
+}>();
+
+const localSelectedLang = computed({
+  get: () => props.selectedLang,
+  set: (v: LangCode) => emit('update:selectedLang', v),
+});
+
+const localPresetName = computed({
+  get: () => props.presetName,
+  set: (v: string) => emit('update:presetName', v),
+});
+
+const localSelectedFolderId = computed({
+  get: () => props.selectedFolderId,
+  set: (v: string) => emit('update:selectedFolderId', v),
+});
+
+const localShowPresetDropdown = computed({
+  get: () => props.showPresetDropdown,
+  set: (v: boolean) => emit('update:showPresetDropdown', v),
+});
+</script>
+
+<template>
+  <header class="pe-toolbar">
+    <div class="pe-toolbar-content">
+      <div class="pe-left">
+        <label>语言</label>
+        <select v-model="localSelectedLang">
+          <option v-for="l in languages" :key="l" :value="l">{{ l }}</option>
+        </select>
+        <button @click="emit('copy')" title="复制提示词到剪贴板">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
+            <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          复制提示词
+        </button>
+      </div>
+      <div class="pe-right">
+        <div class="pe-folder-select-wrapper">
+          <FolderSelector
+            v-model="localSelectedFolderId"
+            :tree="folderTree"
+            :flattened="flattenedFolders"
+            root-label="(默认)"
+          />
+        </div>
+        <input class="pe-preset-name" placeholder="保存为预设名称" v-model="localPresetName" />
+        <button @click="emit('save-preset')" title="保存当前提示词为预设">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2"/>
+            <polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2"/>
+            <polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          保存预设
+        </button>
+        <div class="pe-presets">
+          <button 
+            class="pe-preset-toggle" 
+            @click="localShowPresetDropdown = !localShowPresetDropdown"
+            title="快速预设"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" fill="currentColor"/>
+            </svg>
+            快速预设
+            <svg 
+              width="12" height="12" 
+              viewBox="0 0 24 24" 
+              fill="none" 
+              xmlns="http://www.w3.org/2000/svg"
+              :class="{ 'rotate-180': showPresetDropdown }"
+              class="dropdown-arrow"
+            >
+              <polyline points="6,9 12,15 18,9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          
+          <PresetDropdown 
+            :show="showPresetDropdown"
+            @close="localShowPresetDropdown = false"
+            @load="(name) => emit('preset-load', name)"
+            @save="(name) => emit('preset-save', name)"
+            @delete="(name) => emit('preset-delete', name)"
+            @rename="(oldName, newName) => emit('preset-rename', oldName, newName)"
+          />
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.pe-toolbar {
+  padding: 1rem 1.5rem;
+  background-color: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.pe-toolbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.pe-left, .pe-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.pe-left label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.pe-left select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pe-left select:hover {
+  border-color: var(--color-border-hover);
+}
+
+.pe-left select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pe-left button, .pe-right button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.pe-left button:hover, .pe-right button:hover {
+  background-color: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+}
+
+.pe-preset-name {
+  width: 200px;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.pe-folder-select-wrapper {
+  width: 130px;
+}
+
+.pe-folder-select-wrapper :deep(.selector-trigger) {
+  padding: 0.45rem 0.5rem;
+  font-size: 0.85rem;
+}
+
+.pe-preset-name:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.pe-presets {
+  position: relative;
+}
+
+.pe-preset-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.pe-preset-toggle:hover {
+  background-color: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+}
+
+.dropdown-arrow {
+  transition: transform 0.2s ease;
+  margin-left: 0.25rem;
+}
+
+.dropdown-arrow.rotate-180 {
+  transform: rotate(180deg);
+}
+
+/* 保证按钮内图标不压缩文本 */
+.pe-left button svg,
+.pe-right button svg,
+.pe-preset-toggle svg {
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .pe-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+  
+  .pe-left, .pe-right {
+    justify-content: center;
+  }
+  
+  .pe-preset-name {
+    width: 100%;
+  }
+}
+</style>