mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
JohnDoe6345789
58a94d0489
feat(styles): create global styles entry point and organize global styles feat(styles): implement base HTML element styles and utility classes for flexbox feat(styles): establish layout, position, spacing, and text utility classes feat(styles): introduce mixins for animations, cards, dialogs, flexbox, grid, and responsive design test(quick_guide): add component and metadata validation tests for quick_guide package test(ui_level6): implement metadata validation tests for ui_level6 package
303 lines
12 KiB
QML
303 lines
12 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import "../contexts"
|
|
import "../fakemui"
|
|
|
|
/**
|
|
* Documentation.qml - Tabbed documentation viewer
|
|
* Mirrors React's Documentation.jsx
|
|
*/
|
|
Item {
|
|
id: root
|
|
|
|
property int currentTab: 0
|
|
|
|
readonly property var tabs: [
|
|
{ key: "gettingStarted", title: LanguageContext.t("gettingStarted") },
|
|
{ key: "usingUI", title: LanguageContext.t("usingUI") },
|
|
{ key: "apiReference", title: LanguageContext.t("apiReference") },
|
|
{ key: "cliCommands", title: LanguageContext.t("cliCommands") },
|
|
{ key: "authentication", title: LanguageContext.t("authentication") }
|
|
]
|
|
|
|
// Inline component for documentation content
|
|
component DocContent: ScrollView {
|
|
id: docScroll
|
|
property var content: []
|
|
clip: true
|
|
|
|
ColumnLayout {
|
|
width: docScroll.width - 32
|
|
x: 16
|
|
y: 16
|
|
spacing: 12
|
|
|
|
Repeater {
|
|
model: content
|
|
|
|
delegate: Loader {
|
|
Layout.fillWidth: true
|
|
sourceComponent: {
|
|
switch (modelData.type) {
|
|
case "h1": return h1Comp
|
|
case "h2": return h2Comp
|
|
case "p": return pComp
|
|
case "code": return codeComp
|
|
case "ul": return ulComp
|
|
default: return null
|
|
}
|
|
}
|
|
|
|
property var itemData: modelData
|
|
}
|
|
}
|
|
|
|
Item { Layout.preferredHeight: 32 }
|
|
}
|
|
}
|
|
|
|
// H1 Component
|
|
Component {
|
|
id: h1Comp
|
|
Text {
|
|
text: itemData.text || ""
|
|
font.pixelSize: 28
|
|
font.bold: true
|
|
color: Theme.text
|
|
wrapMode: Text.WordWrap
|
|
}
|
|
}
|
|
|
|
// H2 Component
|
|
Component {
|
|
id: h2Comp
|
|
Column {
|
|
spacing: 8
|
|
Item { height: 8 }
|
|
Text {
|
|
text: itemData.text || ""
|
|
font.pixelSize: 20
|
|
font.bold: true
|
|
color: Theme.text
|
|
wrapMode: Text.WordWrap
|
|
}
|
|
}
|
|
}
|
|
|
|
// Paragraph Component
|
|
Component {
|
|
id: pComp
|
|
Text {
|
|
text: itemData.text || ""
|
|
font.pixelSize: 14
|
|
color: Theme.textSecondary
|
|
wrapMode: Text.WordWrap
|
|
lineHeight: 1.5
|
|
}
|
|
}
|
|
|
|
// Code Block Component
|
|
Component {
|
|
id: codeComp
|
|
Rectangle {
|
|
width: parent.width
|
|
height: codeText.height + 24
|
|
color: Qt.rgba(0, 0, 0, 0.2)
|
|
radius: 4
|
|
|
|
Text {
|
|
id: codeText
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: parent.top
|
|
anchors.margins: 12
|
|
text: itemData.text || ""
|
|
font.pixelSize: 13
|
|
font.family: "Courier New"
|
|
color: Theme.text
|
|
wrapMode: Text.WrapAnywhere
|
|
}
|
|
}
|
|
}
|
|
|
|
// Unordered List Component
|
|
Component {
|
|
id: ulComp
|
|
Column {
|
|
spacing: 8
|
|
Repeater {
|
|
model: itemData.items || []
|
|
Row {
|
|
spacing: 8
|
|
Text {
|
|
text: "•"
|
|
font.pixelSize: 14
|
|
color: Theme.primary
|
|
}
|
|
Text {
|
|
text: modelData
|
|
font.pixelSize: 14
|
|
color: Theme.textSecondary
|
|
wrapMode: Text.WordWrap
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
|
|
// Tab bar
|
|
TabBar {
|
|
id: tabBar
|
|
Layout.fillWidth: true
|
|
currentIndex: currentTab
|
|
onCurrentIndexChanged: currentTab = currentIndex
|
|
|
|
background: Rectangle {
|
|
color: Theme.surface
|
|
|
|
Rectangle {
|
|
anchors.bottom: parent.bottom
|
|
width: parent.width
|
|
height: 1
|
|
color: Theme.border
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
model: tabs
|
|
|
|
TabButton {
|
|
text: modelData.title
|
|
width: implicitWidth + 32
|
|
|
|
background: Rectangle {
|
|
color: tabBar.currentIndex === index ?
|
|
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) :
|
|
"transparent"
|
|
}
|
|
|
|
contentItem: Text {
|
|
text: parent.text
|
|
font.pixelSize: 14
|
|
font.bold: tabBar.currentIndex === index
|
|
color: tabBar.currentIndex === index ? Theme.primary : Theme.textSecondary
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Content area
|
|
StackLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
currentIndex: currentTab
|
|
|
|
// Getting Started
|
|
DocContent {
|
|
content: [
|
|
{ type: "h1", text: LanguageContext.t("gettingStarted") },
|
|
{ type: "p", text: LanguageContext.t("gettingStartedIntro") },
|
|
{ type: "h2", text: LanguageContext.t("installation") },
|
|
{ type: "code", text: "pip install codex-task-runner" },
|
|
{ type: "h2", text: LanguageContext.t("quickStart") },
|
|
{ type: "p", text: LanguageContext.t("quickStartDesc") },
|
|
{ type: "code", text: "from codex_task_runner import CodexClient\n\nclient = CodexClient()\ntask = client.create_task(\"Fix the bug in main.py\")\nprint(task.id)" },
|
|
{ type: "h2", text: LanguageContext.t("configuration") },
|
|
{ type: "p", text: LanguageContext.t("configDesc") },
|
|
{ type: "code", text: "# .env file\nCODEX_API_KEY=your_api_key\nCODEX_BASE_URL=https://api.codex.com" }
|
|
]
|
|
}
|
|
|
|
// Using UI
|
|
DocContent {
|
|
content: [
|
|
{ type: "h1", text: LanguageContext.t("usingUI") },
|
|
{ type: "p", text: LanguageContext.t("usingUIIntro") },
|
|
{ type: "h2", text: LanguageContext.t("navigation") },
|
|
{ type: "p", text: LanguageContext.t("navigationDesc") },
|
|
{ type: "ul", items: [
|
|
LanguageContext.t("navTasks"),
|
|
LanguageContext.t("navNewPrompt"),
|
|
LanguageContext.t("navAccount"),
|
|
LanguageContext.t("navDocs")
|
|
]},
|
|
{ type: "h2", text: LanguageContext.t("taskList") },
|
|
{ type: "p", text: LanguageContext.t("taskListDesc") },
|
|
{ type: "h2", text: LanguageContext.t("taskDetail") },
|
|
{ type: "p", text: LanguageContext.t("taskDetailDesc") },
|
|
{ type: "h2", text: LanguageContext.t("keyboardShortcuts") },
|
|
{ type: "code", text: "Ctrl+K / ⌘K - Open search\nCtrl+N / ⌘N - New task\nCtrl+R / ⌘R - Refresh\nEsc - Close dialogs" }
|
|
]
|
|
}
|
|
|
|
// API Reference
|
|
DocContent {
|
|
content: [
|
|
{ type: "h1", text: LanguageContext.t("apiReference") },
|
|
{ type: "p", text: LanguageContext.t("apiReferenceIntro") },
|
|
{ type: "h2", text: "GET /tasks" },
|
|
{ type: "p", text: LanguageContext.t("getTasksDesc") },
|
|
{ type: "code", text: "curl -X GET 'http://localhost:5000/tasks?status=all&limit=20'" },
|
|
{ type: "h2", text: "GET /task/:id" },
|
|
{ type: "p", text: LanguageContext.t("getTaskDesc") },
|
|
{ type: "code", text: "curl -X GET 'http://localhost:5000/task/abc123'" },
|
|
{ type: "h2", text: "POST /prompt" },
|
|
{ type: "p", text: LanguageContext.t("postPromptDesc") },
|
|
{ type: "code", text: "curl -X POST 'http://localhost:5000/prompt' \\\n -H 'Content-Type: application/json' \\\n -d '{\"prompt_text\": \"Fix the bug\", \"branch\": \"main\"}'" },
|
|
{ type: "h2", text: "POST /task/:id/pr" },
|
|
{ type: "p", text: LanguageContext.t("createPRDesc") },
|
|
{ type: "code", text: "curl -X POST 'http://localhost:5000/task/abc123/pr'" }
|
|
]
|
|
}
|
|
|
|
// CLI Commands
|
|
DocContent {
|
|
content: [
|
|
{ type: "h1", text: LanguageContext.t("cliCommands") },
|
|
{ type: "p", text: LanguageContext.t("cliCommandsIntro") },
|
|
{ type: "h2", text: "codex tasks" },
|
|
{ type: "p", text: LanguageContext.t("cliTasksDesc") },
|
|
{ type: "code", text: "codex tasks --status=running --limit=10" },
|
|
{ type: "h2", text: "codex run" },
|
|
{ type: "p", text: LanguageContext.t("cliRunDesc") },
|
|
{ type: "code", text: "codex run \"Implement the login feature\"" },
|
|
{ type: "h2", text: "codex poll" },
|
|
{ type: "p", text: LanguageContext.t("cliPollDesc") },
|
|
{ type: "code", text: "codex poll abc123 --interval=5" },
|
|
{ type: "h2", text: "codex pr" },
|
|
{ type: "p", text: LanguageContext.t("cliPRDesc") },
|
|
{ type: "code", text: "codex pr abc123 --title=\"Feature: Login\"" }
|
|
]
|
|
}
|
|
|
|
// Authentication
|
|
DocContent {
|
|
content: [
|
|
{ type: "h1", text: LanguageContext.t("authentication") },
|
|
{ type: "p", text: LanguageContext.t("authenticationIntro") },
|
|
{ type: "h2", text: LanguageContext.t("apiKey") },
|
|
{ type: "p", text: LanguageContext.t("apiKeyDesc") },
|
|
{ type: "code", text: "export CODEX_API_KEY=your_api_key_here" },
|
|
{ type: "h2", text: LanguageContext.t("sessionCookie") },
|
|
{ type: "p", text: LanguageContext.t("sessionCookieDesc") },
|
|
{ type: "code", text: "# Cookie is automatically managed by the browser\n# For CLI, export from browser developer tools" },
|
|
{ type: "h2", text: LanguageContext.t("securityTips") },
|
|
{ type: "ul", items: [
|
|
LanguageContext.t("securityTip1"),
|
|
LanguageContext.t("securityTip2"),
|
|
LanguageContext.t("securityTip3"),
|
|
LanguageContext.t("securityTip4")
|
|
]}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|