增加提示词选择功能
This commit is contained in:
@@ -6,6 +6,7 @@ import NotificationToast from './NotificationToast.vue';
|
||||
import PresetDropdown from './PresetDropdown.vue';
|
||||
import TranslationPopup from './TranslationPopup.vue';
|
||||
import FolderSelector from './preset/FolderSelector.vue';
|
||||
import PromptQuickAdd from './PromptQuickAdd.vue';
|
||||
|
||||
const store = usePromptStore();
|
||||
const draggingIndex = ref<number | null>(null);
|
||||
@@ -77,6 +78,7 @@ onMounted(() => {
|
||||
if (defaultFolder) {
|
||||
selectedFolderId.value = defaultFolder;
|
||||
}
|
||||
store.searchQuery = ''; // Reset search query to ensure all tags are shown
|
||||
});
|
||||
|
||||
// 清理事件监听器
|
||||
@@ -287,6 +289,40 @@ function applyTextReplacement(
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleAddTag(tag: string) {
|
||||
const el = inputEl.value;
|
||||
if (!el) {
|
||||
store.setPromptTextRaw(store.promptText ? store.promptText + ', ' + tag : tag);
|
||||
return;
|
||||
}
|
||||
|
||||
el.focus(); // Ensure focus for undo/redo support
|
||||
|
||||
const start = el.selectionStart ?? store.promptText.length;
|
||||
const end = el.selectionEnd ?? start;
|
||||
const text = el.value;
|
||||
|
||||
let prefix = '';
|
||||
// 如果前面有内容且不是逗号结尾，加逗号
|
||||
if (start > 0) {
|
||||
const prev = text.slice(0, start).trim();
|
||||
if (prev.length > 0 && !/[,，]$/.test(prev)) {
|
||||
prefix = ', ';
|
||||
} else if (prev.length > 0 && /[,，]$/.test(prev) && text[start-1] !== ' ') {
|
||||
// 如果是逗号结尾但没空格，加空格
|
||||
prefix = ' ';
|
||||
}
|
||||
}
|
||||
|
||||
const toInsert = prefix + tag;
|
||||
applyTextReplacement(el, start, end, toInsert);
|
||||
|
||||
nextTick(() => {
|
||||
el.focus();
|
||||
});
|
||||
}
|
||||
|
||||
async function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === 'Tab') {
|
||||
// 在光标位置进行补全，不影响撤回
|
||||
@@ -991,6 +1027,7 @@ function isRemoveDisabled(token: string): boolean {
|
||||
@click="applySuggestion(s)"
|
||||
>{{ s }}</li>
|
||||
</ul>
|
||||
<PromptQuickAdd @add-tag="handleAddTag" />
|
||||
</section>
|
||||
|
||||
<section class="pe-right-pane">
|
||||
@@ -1507,7 +1544,15 @@ function isRemoveDisabled(token: string): boolean {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pe-left-pane, .pe-right-pane {
|
||||
.pe-left-pane {
|
||||
padding: 1.5rem;
|
||||
background-color: var(--color-bg-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pe-right-pane {
|
||||
padding: 1.5rem;
|
||||
background-color: var(--color-bg-primary);
|
||||
overflow: auto;
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { usePromptStore } from '../stores/promptStore';
|
||||
import type { PromptTag } from '../types';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'add-tag', tag: string): void
|
||||
}>();
|
||||
|
||||
const store = usePromptStore();
|
||||
const categories = computed(() => store.categories);
|
||||
const currentCategory = computed(() => store.currentCategory);
|
||||
const currentGroup = computed(() => store.currentGroup);
|
||||
const filteredTags = computed(() => store.filteredTags);
|
||||
const selectedLang = computed(() => store.selectedLang);
|
||||
|
||||
function selectCategory(index: number) {
|
||||
store.selectCategory(index);
|
||||
}
|
||||
|
||||
function selectGroup(index: number) {
|
||||
store.selectGroup(index);
|
||||
}
|
||||
|
||||
function onTagClick(tag: PromptTag) {
|
||||
emit('add-tag', tag.key);
|
||||
}
|
||||
|
||||
function displayTrans(tag: PromptTag) {
|
||||
return tag.translation?.[selectedLang.value] ?? tag.key;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pqa-root">
|
||||
<!-- Categories -->
|
||||
<div class="pqa-categories">
|
||||
<button
|
||||
v-for="(c, i) in categories"
|
||||
:key="c.id"
|
||||
class="pqa-tab"
|
||||
:class="{ active: i === store.selectedCategoryIndex }"
|
||||
@click="selectCategory(i)"
|
||||
>
|
||||
{{ c.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Groups -->
|
||||
<div class="pqa-groups" v-if="currentCategory?.groups.length">
|
||||
<button
|
||||
v-for="(g, i) in currentCategory.groups"
|
||||
:key="g.id"
|
||||
class="pqa-group-tab"
|
||||
:class="{ active: i === store.selectedGroupIndex }"
|
||||
:style="{ '--group-color': g.color || 'var(--color-text-secondary)' }"
|
||||
@click="selectGroup(i)"
|
||||
@mousedown.prevent
|
||||
>
|
||||
<span class="pqa-dot"></span>
|
||||
{{ g.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="pqa-tags">
|
||||
<button
|
||||
v-for="tag in filteredTags"
|
||||
:key="tag.key"
|
||||
class="pqa-tag"
|
||||
@click="onTagClick(tag)"
|
||||
@mousedown.prevent
|
||||
:title="tag.key"
|
||||
>
|
||||
<span class="pqa-tag-text">{{ displayTrans(tag) }}</span>
|
||||
<span class="pqa-tag-sub" v-if="displayTrans(tag) !== tag.key">{{ tag.key }}</span>
|
||||
</button>
|
||||
<div v-if="filteredTags.length === 0" class="pqa-empty">
|
||||
无相关提示词
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pqa-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pqa-categories {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pqa-categories::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
.pqa-categories::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pqa-categories::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.pqa-tab {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pqa-tab:hover {
|
||||
border-color: var(--color-border-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.pqa-tab.active {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.pqa-groups {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pqa-groups::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
.pqa-groups::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pqa-groups::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.pqa-group-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pqa-group-tab:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.pqa-group-tab.active {
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--group-color);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--group-color);
|
||||
}
|
||||
|
||||
.pqa-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--group-color);
|
||||
}
|
||||
|
||||
.pqa-tags {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.pqa-tag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.pqa-tag:hover {
|
||||
background: var(--color-bg-primary);
|
||||
border-color: var(--color-accent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.pqa-tag:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.pqa-tag-text {
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.pqa-tag-sub {
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: 0.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pqa-empty {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 0.8rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user