mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-12 02:37:45 +08:00
Add internationalization support for help view and implement help rendering logic
- Introduced `help-i18n.js` for managing translations in Chinese and English for the help view. - Created `help.js` to render the help view, including command categories, workflow diagrams, and CodexLens quick-start. - Implemented search functionality with debounce for command filtering. - Added workflow diagram rendering with Cytoscape.js integration. - Developed tests for write-file verification, ensuring proper handling of small and large JSON files.
This commit is contained in:
catlog22
264
ccw/src/templates/dashboard-css/16-help.css
Normal file
264
ccw/src/templates/dashboard-css/16-help.css
Normal file
@@ -0,0 +1,264 @@
|
||||
/* ==========================================
|
||||
HELP VIEW - TAB, ACCORDION, SEARCH STYLES
|
||||
========================================== */
|
||||
|
||||
/* ==========================================
|
||||
TAB TRANSITIONS
|
||||
========================================== */
|
||||
|
||||
.help-main-tab {
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.help-main-tab:hover {
|
||||
background-color: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.help-main-tab.bg-primary {
|
||||
background-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.help-main-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: hsl(var(--primary));
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.help-main-tab.bg-primary::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
ACCORDION ANIMATIONS
|
||||
========================================== */
|
||||
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.accordion-content:not(.hidden) {
|
||||
max-height: 5000px;
|
||||
transition: max-height 0.5s ease-in;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background-color: hsl(var(--muted) / 0.8);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
SEARCH HIGHLIGHTING
|
||||
========================================== */
|
||||
|
||||
#helpSearchInput {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#helpSearchInput:focus {
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
|
||||
}
|
||||
|
||||
/* Highlight matching text in search results */
|
||||
mark,
|
||||
.search-highlight {
|
||||
background-color: hsl(var(--primary) / 0.2);
|
||||
color: hsl(var(--foreground));
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: hsl(var(--primary) / 0.3);
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
CYTOSCAPE CONTAINER
|
||||
========================================== */
|
||||
|
||||
#cytoscapeContainer {
|
||||
min-height: 500px;
|
||||
background-color: hsl(var(--background));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#cytoscapeContainer::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#cytoscapeContainer::-webkit-scrollbar-track {
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#cytoscapeContainer::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--muted-foreground) / 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#cytoscapeContainer::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground) / 0.6);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
WORKFLOW DIAGRAM BUTTONS
|
||||
========================================== */
|
||||
|
||||
.workflow-diagram-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.workflow-diagram-btn.bg-primary {
|
||||
background-color: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.workflow-diagram-btn.bg-muted {
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.workflow-diagram-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px hsl(var(--primary) / 0.15);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
COMMAND CARDS
|
||||
========================================== */
|
||||
|
||||
.help-view-container .bg-background {
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
|
||||
.help-view-container .border-border {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
.help-view-container .border-primary {
|
||||
border-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.help-view-container code {
|
||||
font-family: 'Fira Code', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Command card hover effect */
|
||||
.help-view-container .bg-background:hover {
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 2px 8px hsl(var(--primary) / 0.1);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
RESPONSIVE DESIGN
|
||||
========================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.help-main-tab {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#cytoscapeContainer {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.workflow-diagram-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
CODEXLENS QUICK-START SECTION
|
||||
========================================== */
|
||||
|
||||
.codexlens-quickstart h3,
|
||||
.codexlens-quickstart h4,
|
||||
.codexlens-quickstart h5 {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.codexlens-quickstart p {
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.codexlens-quickstart .bg-muted {
|
||||
background-color: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.codexlens-quickstart code {
|
||||
background-color: hsl(var(--muted));
|
||||
color: hsl(var(--foreground));
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
DARK MODE SUPPORT
|
||||
========================================== */
|
||||
|
||||
.dark .help-main-tab:hover {
|
||||
background-color: hsl(var(--muted) / 0.8);
|
||||
}
|
||||
|
||||
.dark #helpSearchInput {
|
||||
background-color: hsl(var(--background));
|
||||
border-color: hsl(var(--border));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.dark #cytoscapeContainer {
|
||||
background-color: hsl(var(--background));
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
.dark mark,
|
||||
.dark .search-highlight {
|
||||
background-color: hsl(var(--primary) / 0.3);
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
LOADING STATES
|
||||
========================================== */
|
||||
|
||||
.help-view-container .loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 0;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.help-view-container .loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user