UI: 全选按钮左置+颜色区分、placeholder浅色、应用到配方
All checks were successful
PR Preview / teardown-preview (pull_request) Has been skipped
Test / unit-test (push) Successful in 4s
Test / build-check (push) Successful in 4s
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 14s
Test / e2e-test (push) Successful in 58s

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-10 09:28:01 +00:00
parent c3a4e5523d
commit ea4bf63d5e

View File

@@ -35,10 +35,14 @@
<!-- Tag Filter & Select All (visible to all) --> <!-- Tag Filter & Select All (visible to all) -->
<div class="tag-filter-bar"> <div class="tag-filter-bar">
<button
class="btn-sm"
:class="selectedDiaryIds.size > 0 ? 'btn-select-active' : 'btn-outline'"
@click="toggleSelectAllDiary"
>全选</button>
<button class="tag-toggle-btn" @click="showTagFilter = !showTagFilter"> <button class="tag-toggle-btn" @click="showTagFilter = !showTagFilter">
🏷 标签筛选 {{ showTagFilter ? '' : '' }} 🏷 标签筛选 {{ showTagFilter ? '' : '' }}
</button> </button>
<button class="btn-sm btn-outline" @click="toggleSelectAllDiary">全选/取消</button>
<div v-if="showTagFilter" class="tag-list"> <div v-if="showTagFilter" class="tag-list">
<span <span
v-for="tag in recipeStore.allTags" v-for="tag in recipeStore.allTags"
@@ -289,7 +293,7 @@
<select v-model.number="formDilution" class="select-sm"> <select v-model.number="formDilution" class="select-sm">
<option v-for="n in 20" :key="n" :value="n">{{ n }}</option> <option v-for="n in 20" :key="n" :value="n">{{ n }}</option>
</select> </select>
<button class="action-btn action-btn-primary action-btn-sm" @click="applyVolumeDilution">应用</button> <button class="action-btn action-btn-primary action-btn-sm" @click="applyVolumeDilution">应用到配方</button>
</div> </div>
<div class="hint" style="margin-top:6px;font-size:11px;color:#999">{{ formDilutionHint }}</div> <div class="hint" style="margin-top:6px;font-size:11px;color:#999">{{ formDilutionHint }}</div>
</div> </div>
@@ -1356,7 +1360,8 @@ watch(() => recipeStore.recipes, () => {
.parsed-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; } .parsed-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.editor-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .editor-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.editor-name-input { width: 100%; font-size: 17px; font-weight: 600; border: none; border-bottom: 2px solid #e5e4e7; padding: 6px 0; outline: none; font-family: inherit; background: transparent; } .editor-name-input { width: 100%; font-size: 17px; font-weight: 600; border: none; border-bottom: 2px solid #e5e4e7; padding: 6px 0; outline: none; font-family: inherit; background: transparent; color: #3e3a44; }
.editor-name-input::placeholder { color: #ccc; font-weight: 400; }
.editor-name-input:focus { border-bottom-color: #7ec6a4; } .editor-name-input:focus { border-bottom-color: #7ec6a4; }
.editor-header-actions { display: flex; gap: 6px; flex-shrink: 0; } .editor-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.editor-tip { font-size: 12px; color: #999; background: #f8f7f5; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; } .editor-tip { font-size: 12px; color: #999; background: #f8f7f5; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; }
@@ -1401,6 +1406,7 @@ watch(() => recipeStore.recipes, () => {
.drops-sm { width: 50px; padding: 4px 6px; border: 1.5px solid #d4cfc7; border-radius: 6px; font-size: 12px; text-align: center; outline: none; font-family: inherit; } .drops-sm { width: 50px; padding: 4px 6px; border: 1.5px solid #d4cfc7; border-radius: 6px; font-size: 12px; text-align: center; outline: none; font-family: inherit; }
.drops-sm:focus { border-color: #7ec6a4; } .drops-sm:focus { border-color: #7ec6a4; }
.select-sm { padding: 4px 6px; border: 1.5px solid #d4cfc7; border-radius: 6px; font-size: 12px; font-family: inherit; background: #fff; width: auto; } .select-sm { padding: 4px 6px; border: 1.5px solid #d4cfc7; border-radius: 6px; font-size: 12px; font-family: inherit; background: #fff; width: auto; }
.btn-select-active { background: #e8f5e9; color: #2e7d5a; border: 1.5px solid #7ec6a4; border-radius: 10px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600; }
.divider-text { .divider-text {
text-align: center; text-align: center;