Yeomai/SpineParticlesWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新版本记录

Browse Source
This commit is contained in:
tianmo committed 2026-11-05 17:39:39 +08:00
1 parent 8977463861
commit 98e5c435c8
16 files changed
+262 -57
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/HelpDialog.vue
+158 -53
View File
@@ -2,57 +2,79 @@
<div v-if="show" class="help-overlay" role="presentation" @click.self="close">
<section class="help-dialog" data-matomo-section="help" role="dialog" aria-modal="true" aria-labelledby="help-title">
<header class="help-head">
<div>
<h2 id="help-title">{{ $t('help.title') }}</h2>
<p>{{ $t('help.subtitle') }}</p>
</div>
<nav class="help-tabs" :aria-label="$t('help.tabsLabel')">
<button
id="help-title"
type="button"
class="help-tab"
:class="{ active: activeTab === 'guide' }"
:aria-pressed="activeTab === 'guide'"
aria-controls="help-guide-panel"
@click="activeTab = 'guide'"
>
<strong>{{ $t('help.title') }}</strong>
<small>{{ $t('help.subtitle') }}</small>
</button>
<button
type="button"
class="help-tab"
:class="{ active: activeTab === 'updates' }"
:aria-pressed="activeTab === 'updates'"
aria-controls="help-updates-panel"
@click="activeTab = 'updates'"
>
<strong>{{ $t('help.updates') }}</strong>
<small>{{ $t('help.updatesSubtitle') }}</small>
</button>
</nav>
<button class="help-close" :aria-label="$t('help.close')" :title="$t('help.closeShort')" @click="close">✕</button>
</header>
<div class="help-body">
<section class="help-section help-start">
<h3>{{ $t('help.quickStart') }}</h3>
<ol>
<li>{{ $t('help.stepCreate') }}</li>
<li>{{ $t('help.stepEdit') }}</li>
<li>{{ $t('help.stepPreview') }}</li>
<li>{{ $t('help.stepExport') }}</li>
</ol>
<p class="help-note">{{ $t('help.quickNote') }}</p>
</section>
<div class="help-grid">
<section class="help-section">
<h3>{{ $t('help.commonOps') }}</h3>
<dl class="help-list">
<div><dt>{{ $t('help.eye') }}</dt><dd>{{ $t('help.eyeDesc') }}</dd></div>
<div><dt>+Copy</dt><dd>{{ $t('help.copyDesc') }}</dd></div>
<div><dt>{{ $t('toolbar.background') }}</dt><dd>{{ $t('help.backgroundDesc') }}</dd></div>
<div><dt>{{ $t('toolbar.settings') }}</dt><dd>{{ $t('help.settingsDesc') }}</dd></div>
<div><dt>{{ $t('help.undoShortcut') }}</dt><dd>{{ $t('help.undoDesc') }}</dd></div>
<div><dt>Spine Bone</dt><dd>{{ $t('help.spineBoneDesc') }}</dd></div>
</dl>
<div v-show="activeTab === 'guide'" id="help-guide-panel">
<section class="help-section help-start">
<h3>{{ $t('help.quickStart') }}</h3>
<ol>
<li>{{ $t('help.stepCreate') }}</li>
<li>{{ $t('help.stepEdit') }}</li>
<li>{{ $t('help.stepPreview') }}</li>
<li>{{ $t('help.stepExport') }}</li>
</ol>
<p class="help-note">{{ $t('help.quickNote') }}</p>
</section>
<section class="help-section">
<h3>{{ $t('help.shortcuts') }}</h3>
<div class="shortcut-list">
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>Z</kbd><em>{{ $t('help.undoShortcut') }}</em></div>
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>S</kbd><em>{{ $t('help.saveShortcut') }}</em></div>
<div><kbd>Q</kbd><em>{{ $t('help.panShortcut') }}</em></div>
<div><kbd>W</kbd><em>{{ $t('help.translateShortcut') }}</em></div>
<div><kbd>E</kbd><em>{{ $t('help.rotateShortcut') }}</em></div>
<div><kbd>R</kbd><em>{{ $t('help.scaleShortcut') }}</em></div>
<div><kbd>D</kbd><em>{{ $t('help.playShortcut') }}</em></div>
<div><kbd>S</kbd><em>{{ $t('help.startShortcut') }}</em></div>
</div>
<p class="help-note">{{ $t('help.shortcutNote') }}</p>
</section>
</div>
<div class="help-grid">
<section class="help-section">
<h3>{{ $t('help.commonOps') }}</h3>
<dl class="help-list">
<div><dt>{{ $t('help.eye') }}</dt><dd>{{ $t('help.eyeDesc') }}</dd></div>
<div><dt>+Copy</dt><dd>{{ $t('help.copyDesc') }}</dd></div>
<div><dt>{{ $t('toolbar.background') }}</dt><dd>{{ $t('help.backgroundDesc') }}</dd></div>
<div><dt>{{ $t('toolbar.settings') }}</dt><dd>{{ $t('help.settingsDesc') }}</dd></div>
<div><dt>{{ $t('help.undoShortcut') }}</dt><dd>{{ $t('help.undoDesc') }}</dd></div>
<div><dt>Spine Bone</dt><dd>{{ $t('help.spineBoneDesc') }}</dd></div>
</dl>
</section>
<div class="help-doc-title">{{ $t('help.modules') }}</div>
<section class="help-section">
<h3>{{ $t('help.shortcuts') }}</h3>
<div class="shortcut-list">
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>Z</kbd><em>{{ $t('help.undoShortcut') }}</em></div>
<div><kbd>Ctrl/⌘</kbd><span>+</span><kbd>S</kbd><em>{{ $t('help.saveShortcut') }}</em></div>
<div><kbd>Q</kbd><em>{{ $t('help.panShortcut') }}</em></div>
<div><kbd>W</kbd><em>{{ $t('help.translateShortcut') }}</em></div>
<div><kbd>E</kbd><em>{{ $t('help.rotateShortcut') }}</em></div>
<div><kbd>R</kbd><em>{{ $t('help.scaleShortcut') }}</em></div>
<div><kbd>D</kbd><em>{{ $t('help.playShortcut') }}</em></div>
<div><kbd>S</kbd><em>{{ $t('help.startShortcut') }}</em></div>
</div>
<p class="help-note">{{ $t('help.shortcutNote') }}</p>
</section>
</div>
<section class="help-section help-module" :class="{ open: openModules[0] }">
<div class="help-doc-title">{{ $t('help.modules') }}</div>
<section class="help-section help-module" :class="{ open: openModules[0] }">
<button type="button" class="help-module-head" :aria-expanded="openModules[0] ? 'true' : 'false'" @click="openModules[0] = !openModules[0]">
<span class="mnum">1</span><span class="mtitle">{{ $t('help.configTitle') }}</span><span class="caret">{{ openModules[0] ? '▾' : '▸' }}</span>
</button>
@@ -185,10 +207,37 @@
</div>
</section>
<section class="help-section help-export">
<h3>{{ $t('help.differenceTitle') }}</h3>
<p>{{ $t('help.differenceDesc') }}</p>
</section>
<section class="help-section help-export">
<h3>{{ $t('help.differenceTitle') }}</h3>
<p>{{ $t('help.differenceDesc') }}</p>
</section>
</div>
<div v-show="activeTab === 'updates'" id="help-updates-panel" class="help-updates">
<section
v-for="(release, index) in releases"
:key="release.title"
class="help-section release-card"
:class="{ open: openRelease === index }"
>
<button
type="button"
class="release-head"
:aria-expanded="openRelease === index"
@click="openRelease = openRelease === index ? null : index"
>
<time :datetime="release.date">{{ release.date }}</time>
<span>{{ $t(release.title) }}</span>
<b>{{ openRelease === index ? '▾' : '▸' }}</b>
</button>
<div v-show="openRelease === index" class="release-body">
<p>{{ $t(release.heading) }}</p>
<ol>
<li v-for="update in release.updates" :key="update">{{ $t(update) }}</li>
</ol>
</div>
</section>
</div>
</div>
</section>
</div>
@@ -200,9 +249,27 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
defineProps<{ show: boolean }>()
const emit = defineEmits<{ (event: 'close'): void }>()
const activeTab = ref<'guide' | 'updates'>('guide')
// 功能模块详解：默认全部收起，点击标题栏展开/收起单个模块。
const openModules = ref<boolean[]>(Array.from({ length: 9 }, () => false))
const releases = [
{
date: '2026-11-05',
title: 'help.releaseSummaryV11105',
heading: 'help.releaseHeadingV11105',
updates: ['help.releaseWindowFix'],
},
{
date: '2026-11-04',
title: 'help.releaseSummaryV11104',
heading: 'help.releaseHeadingV11104',
updates: ['help.releaseLanguageUpdate', 'help.releaseFollowUpdate'],
},
]
const openRelease = ref<number | null>(0)
function close() {
emit('close')
}
@@ -221,22 +288,38 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
box-sizing: border-box; background: rgba(5, 8, 15, .72); backdrop-filter: blur(3px);
}
.help-dialog {
width: min(820px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
width: min(820px, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
border: 1px solid #3a4864; border-radius: 14px; background: #141a27; color: #b8c3d8;
box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
}
.help-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px 15px;
position: relative; display: flex; align-items: flex-end; min-height: 82px; padding: 14px 52px 0 18px;
border-bottom: 1px solid #2b354a; background: linear-gradient(135deg, #202942, #181e2d);
}
.help-head h2 { margin: 0; color: #eef2ff; font-size: 19px; }
.help-head p { margin: 5px 0 0; color: #7786a3; font-size: 11px; }
.help-tabs { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-tab {
display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
padding: 11px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
background: transparent; color: #7786a3; font: inherit; text-align: left; cursor: pointer;
}
.help-tab strong { color: inherit; font-size: 19px; }
.help-tab small { overflow: hidden; width: 100%; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.help-tab:hover { color: #b9c5dc; }
.help-tab.active { border-color: #3a4864; background: #141a27; color: #eef2ff; }
.help-tab:focus-visible { outline: 2px solid #8b86ff; outline-offset: -2px; }
.help-close {
width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #43516b; border-radius: 6px;
position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 1px solid #43516b; border-radius: 6px;
background: #273249; color: #ccd7ed; cursor: pointer;
}
.help-close:hover { border-color: #7774ff; background: #3b4670; color: #fff; }
.help-body { min-height: 0; overflow: auto; padding: 18px 20px 21px; }
.help-body {
min-height: 0; overflow: auto; padding: 18px 20px 21px;
scrollbar-width: thin; scrollbar-color: #3a455e transparent;
}
.help-body::-webkit-scrollbar { width: 6px; }
.help-body::-webkit-scrollbar-track { background: transparent; }
.help-body::-webkit-scrollbar-thumb { border-radius: 3px; background: #3a455e; }
.help-body::-webkit-scrollbar-thumb:hover { background: #596683; }
.help-section { padding: 14px 15px; border: 1px solid #2c3850; border-radius: 10px; background: #181f2e; }
.help-section h3 { margin: 0 0 11px; color: #9fb2ff; font-size: 13px; }
.help-start ol { margin: 0; padding-left: 21px; color: #aab6cc; font-size: 12px; line-height: 1.75; }
@@ -259,6 +342,24 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
.help-note { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid #2a3549; color: #697791; font-size: 10px; line-height: 1.55; }
.help-export { margin-top: 12px; }
.help-export p { margin: 0; color: #8997b0; font-size: 11px; line-height: 1.65; }
.help-updates { display: grid; gap: 10px; }
.release-card { padding: 0; overflow: hidden; }
.release-head {
display: flex; width: 100%; align-items: center; gap: 11px; padding: 14px 15px; border: 0;
background: transparent; color: #d3dcf0; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.release-head time {
flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: #30395a;
color: #b8c2ff; font-size: 10px; font-weight: 700;
}
.release-head span { flex: 1; min-width: 0; font-weight: 700; }
.release-head b { color: #7b86a2; font-size: 12px; font-weight: 400; }
.release-head:hover, .release-card.open .release-head { background: #1d2638; color: #fff; }
.release-card.open .release-head b { color: #9fb2ff; }
.release-body { margin: 0 15px; padding: 12px 0 14px; border-top: 1px solid #2a3549; }
.release-body p { margin: 0; color: #9ba9c2; font-size: 12px; line-height: 1.7; }
.release-body ol { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 21px; color: #9ba9c2; font-size: 12px; line-height: 1.7; }
.release-body li::marker { color: #8f9eff; font-weight: 700; }
.help-doc-title { margin: 16px 2px 2px; color: #9fb2ff; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.help-module { margin-top: 12px; }
.help-module-head {
@@ -289,5 +390,9 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
@media (max-width: 760px) {
.help-overlay { padding: 66px 12px 14px; }
.help-grid { grid-template-columns: 1fr; }
.help-head { padding-left: 10px; padding-right: 48px; }
.help-tab { padding: 9px 10px; }
.help-tab strong { font-size: 15px; }
.help-tab small { font-size: 9px; }
}
</style>