DemonGatanjieuandClaude Opus 5.5
46facb9115
The browser now navigates from one narrow icon rail on the left: Home, Models, Gallery, Workflows, Materials, then Voices and Audio, then scan, Model Doctor, Node Assistant and the toolbox, with settings at the bottom. It replaces the header tabs, the image/audio toggle and the tool bar under the folder list, so the list column holds only a list and can close without hiding a command. - ui_shell_rail.js builds the rail; ui_shell_nav.js owns goTo(page), which page has a list and whether it is open (remembered per page; below 760 px it starts closed and overlays), the page title in the header and the page reopened next time. Clicking the current page's icon toggles its list (from a model's detail it returns to the grid). - ui_home.js: task cards and first steps; the first open lands there. - Window drag/resize moved to ui_shell_frame.js and scan polling to ui_scan_watch.js; ui_sidebar.js goes from 864 to 464 lines. - Workspaces (recipes, notes, materials) keep the rail visible; the list steps aside while one is open. - Removed what the rail replaced: sidebar_actions.js (bottom-bar hover labels and tooltip bubble), the domain toggle button, their CSS and unused text keys. - Spotlight tour: the rail step replaces the header-tabs step, cards open to the right of rail items, and the audio tour points at the rail's Audio entry. - Decision record AD-017; architecture map, frontend and update-guide docs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
57 lines
4.1 KiB
JavaScript
57 lines
4.1 KiB
JavaScript
// Content only. Maintenance checklist: docs/architecture/update-guide.md.
|
|
// Change the ID only when users should see a new guide, never for typo fixes.
|
|
export const CURRENT_UPDATE_GUIDE = Object.freeze({
|
|
id: '2026-09-recipes-and-studios',
|
|
steps: Object.freeze([
|
|
{ id: 'recipes', icon: '📑', titleKey: 'updateGuideRecipesTitle', bodyKey: 'updateGuideRecipesBody' },
|
|
{ id: 'materials', icon: '✨', titleKey: 'updateGuideMaterialsTitle', bodyKey: 'updateGuideMaterialsBody' },
|
|
{ id: 'sources', icon: '🌐', titleKey: 'updateGuideSourcesTitle', bodyKey: 'updateGuideSourcesBody' },
|
|
{ id: 'precision-scan', icon: '🎯', titleKey: 'updateGuideScanTitle', bodyKey: 'updateGuideScanBody' },
|
|
]),
|
|
});
|
|
|
|
// Spotlight tour of the audio studio. Steps whose target is not on screen (no characters
|
|
// yet, the audio gallery open, sidebar collapsed) are skipped.
|
|
export const AUDIO_TOUR_STEPS = Object.freeze([
|
|
{ targetSelector: '[data-tour="audio-import"]', icon: '📥', titleKey: 'audioTourImportTitle', bodyKey: 'audioTourImportBody', position: 'bottom' },
|
|
{ targetSelector: '.anomalous-character-voice-header.is-draggable', icon: '🧲', titleKey: 'audioTourDragTitle', bodyKey: 'audioTourDragBody', position: 'bottom' },
|
|
{ targetSelector: '.anomalous-character-voice-actions', icon: '🎭', titleKey: 'audioTourEditTitle', bodyKey: 'audioTourEditBody', position: 'bottom' },
|
|
{ targetSelector: '.anomalous-voice-copy-btn', icon: '🏷️', titleKey: 'audioTourTagTitle', bodyKey: 'audioTourTagBody', position: 'bottom' },
|
|
{ targetSelector: '[data-tour="audio-script"]', icon: '📜', titleKey: 'audioTourScriptTitle', bodyKey: 'audioTourScriptBody', position: 'bottom' },
|
|
{ targetSelector: '#anomalous-audio-gallery-btn', icon: '🎧', titleKey: 'audioTourGalleryTitle', bodyKey: 'audioTourGalleryBody', position: 'right' },
|
|
{ targetSelector: '.anomalous-audio-sidebar-settings', icon: '⚙️', titleKey: 'audioTourSettingsTitle', bodyKey: 'audioTourSettingsBody', position: 'top' },
|
|
]);
|
|
|
|
// How-to for the audio studio; the "!" button opens it while the audio domain is active.
|
|
// Optional fields: titleKey (dialog title), tour: false (no spotlight tour banner) or the
|
|
// guide's own spotlight steps (default: the browser's tour).
|
|
export const AUDIO_USAGE_GUIDE = Object.freeze({
|
|
id: 'audio-studio-usage',
|
|
titleKey: 'audioGuideTitle',
|
|
tour: AUDIO_TOUR_STEPS,
|
|
steps: Object.freeze([
|
|
{ id: 'files', icon: '🎙️', titleKey: 'audioGuideFilesTitle', bodyKey: 'audioGuideFilesBody' },
|
|
{ id: 'drag', icon: '🧲', titleKey: 'audioGuideDragTitle', bodyKey: 'audioGuideDragBody' },
|
|
{ id: 'tags', icon: '🏷️', titleKey: 'audioGuideTagsTitle', bodyKey: 'audioGuideTagsBody' },
|
|
{ id: 'script', icon: '📜', titleKey: 'audioGuideScriptTitle', bodyKey: 'audioGuideScriptBody' },
|
|
{ id: 'generate', icon: '🎧', titleKey: 'audioGuideGenerateTitle', bodyKey: 'audioGuideGenerateBody' },
|
|
]),
|
|
});
|
|
|
|
export function validateUpdateGuide(guide, locales) {
|
|
if (!guide || typeof guide.id !== 'string' || !/^[a-z0-9][a-z0-9-]{0,79}$/.test(guide.id)) return false;
|
|
if (!Array.isArray(guide.steps) || guide.steps.length < 1 || guide.steps.length > 5) return false;
|
|
if (guide.titleKey !== undefined && !['zh', 'en'].every(locale => typeof locales[locale]?.[guide.titleKey] === 'string')) return false;
|
|
if (Array.isArray(guide.tour) && !guide.tour.every(step => typeof step?.targetSelector === 'string'
|
|
&& ['titleKey', 'bodyKey'].every(field => ['zh', 'en'].every(locale => typeof locales[locale]?.[step[field]] === 'string')))) return false;
|
|
const ids = new Set();
|
|
return guide.steps.every(step => {
|
|
if (!step || typeof step.id !== 'string' || !step.id || ids.has(step.id)) return false;
|
|
ids.add(step.id);
|
|
if (typeof step.icon !== 'string' || !step.icon || step.icon.length > 8) return false;
|
|
return ['titleKey', 'bodyKey'].every(field => typeof step[field] === 'string'
|
|
&& ['zh', 'en'].every(locale => typeof locales[locale]?.[step[field]] === 'string'
|
|
&& locales[locale][step[field]].trim().length > 0));
|
|
});
|
|
}
|