kjqwdw/prompt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提示词编辑器风格统一和移动端适配

Browse Source
This commit is contained in:
kjqwer
2025-11-12 09:47:35 +08:00
parent 1682b62832
commit bf0a5a0098
2 changed files with 49 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PromptManager.vue
+47 -19
View File
@@ -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>