{"id":29431815,"url":"https://github.com/andeya/craft-gui","last_synced_at":"2026-04-12T15:33:22.782Z","repository":{"id":302784666,"uuid":"1013543869","full_name":"andeya/craft-gui","owner":"andeya","description":"Craft GUI = Tauri + Vue(Quasar) + Tailwind + TS + Vite.","archived":false,"fork":false,"pushed_at":"2025-08-17T14:59:23.000Z","size":3116,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-17T16:33:54.119Z","etag":null,"topics":["best-practices","gui","quasar","tailwindcss","tauri","typescript","vite","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andeya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-04T04:44:46.000Z","updated_at":"2025-08-17T14:59:27.000Z","dependencies_parsed_at":"2025-07-04T08:31:46.200Z","dependency_job_id":"7abee02b-ca89-4538-9534-efa68cebcd24","html_url":"https://github.com/andeya/craft-gui","commit_stats":null,"previous_names":["andeya/craft-ui"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/andeya/craft-gui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andeya%2Fcraft-gui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andeya%2Fcraft-gui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andeya%2Fcraft-gui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andeya%2Fcraft-gui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andeya","download_url":"https://codeload.github.com/andeya/craft-gui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andeya%2Fcraft-gui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273783871,"owners_count":25167478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["best-practices","gui","quasar","tailwindcss","tauri","typescript","vite","vue"],"created_at":"2025-07-12T21:01:07.568Z","updated_at":"2026-04-12T15:33:22.738Z","avatar_url":"https://github.com/andeya.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CraftGUI\n\nA cross-platform application template built with Vue 3 + Quasar + Tauri, featuring innovative automated routing and comprehensive data management systems.\n\n## 📖 Overview\n\nCraftGUI is a modern, feature-rich cross-platform application template that combines the power of Vue 3, Quasar Framework, and Tauri to create desktop and mobile applications. The project stands out with its innovative **Automated Router System** and comprehensive **Application Data Management System**, providing developers with a robust foundation for building complex applications.\n\n### 🎯 Key Highlights\n\n- **🚀 Automated Router System**: Filename-based routing metadata with automatic menu generation\n- **📊 Application Data Management**: Schema-based form generation with CRUD operations\n- **🔧 Type-Safe Development**: Full TypeScript support throughout the stack\n- **📱 Cross-Platform**: Desktop, Android, and iOS support via Tauri\n- **🎨 Modern UI**: Quasar Framework with Tailwind CSS for beautiful interfaces\n- **⚡ High Performance**: Sled database backend for efficient data storage\n- **🛡️ Security First**: Local data storage with no network transmission\n\n### 🏗️ Architecture Excellence\n\nCraftGUI implements clean architecture principles with clear separation of concerns:\n\n- **Frontend**: Vue 3 + TypeScript + Quasar Framework\n- **Backend**: Rust + Tauri for cross-platform capabilities\n- **Data Layer**: Sled embedded database with JSON Schema validation\n- **Routing**: Automated file-based routing with metadata inference\n- **Forms**: Dynamic schema-driven form generation\n\nThis template is ideal for developers building data-intensive applications, configuration management tools, or any application requiring robust form handling and data persistence.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"docs/image01.png\" alt=\"Tauri window screenshot 1\" style=\"max-width:1000px; width:100%;\" /\u003e\n  \u003cimg src=\"docs/image02.png\" alt=\"Tauri window screenshot 1\" style=\"max-width:1000px; width:100%;\" /\u003e\n\u003c/div\u003e\n\n## Innovative Feature: Filename Prefix Routing Metadata Scheme\n\nThis project implements an innovative routing metadata definition scheme that automatically sets the `showInMenu` and `order` properties of routes through filename prefixes.\n\n### Naming Rules\n\n- `001.index.vue` → `showInMenu: true`, `order: 1`, route path: `/index`\n- `002.dashboard.vue` → `showInMenu: true`, `order: 2`, route path: `/dashboard`\n- `010.admin-home.vue` → `showInMenu: true`, `order: 10`, route path: `/admin/admin-home`\n- `hidden-page.vue` → `showInMenu: false`, `order: 0`, route path: `/hidden-page`\n\n### Advantages\n\n1. **Simplified Development**: No need to repeatedly define `showInMenu` and `order` in each component\n2. **Intuitive Ordering**: Menu order can be seen directly from the filename\n3. **Enforced Standards**: No overrides allowed in components, ensuring naming convention consistency\n4. **Consistency**: Unified naming conventions for better team collaboration\n\nFor detailed documentation, see: [Router System Documentation](./docs/ROUTER_SYSTEM.md)\n\n## Core Features\n\n### 🚀 Automated Router System\n\nCraftGUI features an innovative **Automated Router System** that combines automatic route generation with filename-based metadata and a clean composables architecture. This system provides a powerful, type-safe, and developer-friendly approach to Vue.js routing.\n\n#### Key Features\n\n- **📁 Filename-Based Metadata**: Use numeric prefixes in filenames to define route metadata\n  - `001.example.vue` → `showInMenu: true, order: 1`\n  - `005.config.vue` → `showInMenu: true, order: 5`\n  - `about.vue` → `showInMenu: false, order: 0`\n- **🔄 Automatic Route Generation**: Routes are discovered from the file system\n- **📋 Menu Management**: Automatic menu generation based on metadata\n- **🏗️ Clean Architecture**: Four clear business domains with single responsibility\n- **🔧 Type Safety**: Full TypeScript support with proper interfaces\n- **🐛 Developer Experience**: Global console API for debugging and development\n\n#### Architecture\n\nThe router system is organized into four clear business domains:\n\n1. **Route Management** - Route data management and querying\n2. **Current Route State** - Current route state and metadata\n3. **Navigation** - Route navigation operations\n4. **Global State** - Global state management and console debugging\n\n#### Quick Start\n\n```vue\n\u003c!-- Example: 001.example.vue --\u003e\n\u003ctemplate\u003e\n  \u003cq-page class=\"q-pa-md\"\u003e\n    \u003ch1\u003eExample Page\u003c/h1\u003e\n  \u003c/q-page\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n// Component logic here\n\u003c/script\u003e\n\n\u003cscript lang=\"ts\"\u003e\n// Only title, icon, and description allowed\nexport const meta = {\n  title: \"Example Page\",\n  icon: \"example\",\n  description: \"Example page description\",\n};\n\u003c/script\u003e\n```\n\n#### Global Console API\n\nThe system provides a global `$router` object in the browser console for debugging:\n\n```javascript\n// All available routes\n$router.allRoutes;\n\n// Menu routes (routes with showInMenu: true)\n$router.menuRoutes;\n\n// Route statistics\n$router.stats;\n\n// Find route by path\n$router.findRouteByPath(\"/target-path\");\n```\n\nFor detailed documentation, see: [Router System Documentation](./docs/ROUTER_SYSTEM.md)\n\n### Application Data Management System\n\nCraftGUI includes a comprehensive **Application Data Management System** that provides dynamic, schema-based form generation for managing both application data and configuration settings. This system offers a unified interface for handling structured data through JSON Schema 2020-12 specifications.\n\n#### Key Features\n\n- **🔄 Dynamic Form Generation**: Forms automatically generated from JSON Schema 2020-12 definitions\n- **📊 Dual Mode Operation**:\n  - **AppData Mode**: Manage user data, product configurations with multiple records\n  - **Config Mode**: Manage application settings with single configuration record\n- **✅ Built-in Validation**: Real-time validation with JSON Schema compliance\n- **🎨 Rich UI Components**: Change tracking, diff views, empty states, and compact mode\n- **🔒 Type Safety**: Full TypeScript support with compile-time and runtime validation\n- **⚡ High Performance**: Sled database backend with efficient data serialization\n- **🛡️ Security**: Local data storage with no network transmission\n- **🔧 Extensible**: Easy to add new schemas and field types\n\n#### Architecture\n\nThe system consists of three main layers:\n\n1. **Frontend Components** - Vue.js components for data management UI\n2. **Backend Services** - Rust services for data persistence and validation\n3. **Schema System** - JSON Schema 2020-12 based validation and form generation\n\n#### Quick Start\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- AppData Mode - Multiple Records --\u003e\n  \u003cSchemaDataForm\n    mode=\"appdata\"\n    schema-name=\"UserProfile\"\n    :data-key=\"1\"\n    title=\"User Profile Management\"\n    @save=\"handleSave\"\n  /\u003e\n\n  \u003c!-- Config Mode - Application Settings --\u003e\n  \u003cSchemaDataForm\n    mode=\"config\"\n    schema-name=\"AppConfig\"\n    title=\"Application Settings\"\n    @save=\"handleConfigSave\"\n  /\u003e\n\u003c/template\u003e\n```\n\n#### Predefined Schemas\n\n- **UserProfile**: User profile information\n- **ProductConfig**: Product configuration data\n- **SystemSettings**: System-wide settings\n- **AppConfig**: Application configuration\n\n#### Advanced Features\n\n- **Change Tracking**: Visual indicators for modified fields\n- **Diff View**: Before-save difference comparison with TextDiffDialog\n- **Validation Feedback**: Real-time validation with error messages\n- **Empty States**: User-friendly empty state handling\n- **Compact Mode**: Toggle between compact and full form layouts\n- **Key Management**: Automatic next available key detection\n- **Error Handling**: Comprehensive error reporting and recovery\n\nFor detailed documentation, see: [Application Data Management System](./docs/APP_DATA_MANAGEMENT_SYSTEM.md)\n\n## Tech Stack\n\n- **Frontend Framework**: [Vue 3](https://vuejs.org/guide/quick-start)\n- **UI Framework**: [Quasar](https://quasar.dev/start/quick-start)\n- **CSS Components**: [Tailwind CSS 3](https://v3.tailwindcss.com/docs/installation)\n- **Cross Framework**: [Tauri](https://tauri.app/start/)\n- **Build Tool**: [Vite](https://vite.dev/guide/)\n- **Package Manager**: [pnpm](https://pnpm.io/)\n- **Database**: [Sled](https://github.com/spacejam/sled)\n\n## Project Structure\n\n```\ncraft-gui/\n├── src/\n│   ├── components/\n│   │   ├── schemaform/           # Schema-based form components\n│   │   │   ├── SchemaDataForm.vue    # Main form component\n│   │   │   └── SchemaField.vue   # Individual field renderer\n│   │   └── ...\n│   ├── pages/\n│   │   ├── 004.appdata-demo.vue  # AppData system demo\n│   │   ├── 99.settings/          # Settings pages\n│   │   └── ...\n│   ├── utils/\n│   │   ├── tauri-commands.ts     # Tauri command constants\n│   │   ├── schema-constants.ts   # Schema definitions\n│   │   └── ui-constants.ts       # UI text constants\n│   └── types/\n│       └── schema.ts             # JSON Schema type definitions\n├── src-tauri/\n│   └── src/\n│       ├── appdata.rs            # AppData backend services\n│       └── config.rs             # Configuration backend services\n└── docs/\n    ├── APP_DATA_MANAGEMENT_SYSTEM.md          # Main documentation\n    ├── SCHEMA_FORM_SYSTEM.md                  # Schema system docs\n    └── ...\n```\n\n## Getting Started\n\n### Running development server and use Tauri window\n\nAfter cloning for the first time, change your app identifier inside\n`src-tauri/tauri.conf.json` to your own:\n\n```jsonc\n{\n  // ...\n  // The default \"com.tauri.craft\" will prevent you from building in release mode\n  \"identifier\": \"com.my-application-name.app\"\n  // ...\n}\n```\n\nSetup pnpm:\n\n```shell\nnpm install -g pnpm\n```\n\nInstall and init:\n\n```shell\n# rm -rf src-tauri/gen\npnpm install\npnpm tauri android init\npnpm tauri ios init\n```\n\nTo develop and run the frontend in a Tauri window:\n\n```shell\n# For Desktop development, run:\npnpm tauri dev\n\n# For Android development, run:\npnpm tauri android dev\n\n# For iOS development, run:\npnpm tauri ios dev\n```\n\n### Building for release\n\nTo export the Next.js frontend via SSG and build the Tauri application for release.\n\n\u003e Detail:\n\u003e\n\u003e - [distribute](https://tauri.app/distribute/)\n\n#### For Desktop release\n\n```shell\npnpm tauri build\n```\n\n#### For Android release\n\n1. [sign](https://tauri.app/zh-cn/distribute/sign/android/)\n2. build\n\n```shell\npnpm tauri android build\n```\n\n#### For iOS release\n\n```shell\npnpm tauri ios build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandeya%2Fcraft-gui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandeya%2Fcraft-gui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandeya%2Fcraft-gui/lists"}