{"id":14968565,"url":"https://github.com/biaogebusy/web-builder","last_synced_at":"2025-05-16T04:04:34.172Z","repository":{"id":177156722,"uuid":"659306117","full_name":"biaogebusy/web-builder","owner":"biaogebusy","description":"基于TailwindCss，通过拖拽可视化配置和DeepSeek快速构建现代化响应式UI、可自定义、多主题、多语言的网站应用，包含美观的后台管理主题，拥有完整的前端解决方案的低代码平台。 Easily build responsive web apps with TailwindCSS and DeepSeek AI, featuring diverse themes, multilingual support, and drag-and-drop functionality, a low code platform with a complete front-end solution.","archived":false,"fork":false,"pushed_at":"2025-05-05T03:59:10.000Z","size":216529,"stargazers_count":437,"open_issues_count":1,"forks_count":72,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-05T04:34:24.610Z","etag":null,"topics":["ai","ai-agents","angular","deepseek","drag-and-drop","drupal","frond-end","law-code","lawcode","no-code","rxjs","storybook","tailwindcss","web-builder"],"latest_commit_sha":null,"homepage":"https://builder.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biaogebusy.png","metadata":{"files":{"readme":"README-EN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-06-27T14:49:22.000Z","updated_at":"2025-05-05T03:59:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"86e041e6-9415-4dbd-bc6c-312d942c398a","html_url":"https://github.com/biaogebusy/web-builder","commit_stats":{"total_commits":3808,"total_committers":1,"mean_commits":3808.0,"dds":0.0,"last_synced_commit":"a8c503d540b71458fc386672f87a481eaf796026"},"previous_names":["biaogebusy/xinshi-ui","biaogebusy/web-builder"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaogebusy%2Fweb-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaogebusy%2Fweb-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaogebusy%2Fweb-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biaogebusy%2Fweb-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biaogebusy","download_url":"https://codeload.github.com/biaogebusy/web-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464893,"owners_count":22075570,"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","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":["ai","ai-agents","angular","deepseek","drag-and-drop","drupal","frond-end","law-code","lawcode","no-code","rxjs","storybook","tailwindcss","web-builder"],"created_at":"2024-09-24T13:40:07.983Z","updated_at":"2025-05-16T04:04:29.162Z","avatar_url":"https://github.com/biaogebusy.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eXINSHI Web builder low code framework\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/assets/images/logo/logo-white.png\" alt=\"logo\" width=\"100px\"/\u003e\n  \u003cbr\u003e\n  \u003ci\u003eXinshi Web builder is an Angular front-end low code framework based on Material. With its rich component library, it provides an excellent digital innovation experience. \u003cbr\u003eThe Web Builder allows for quick construction of responsive, multi-themed web pages through drag-and-drop.\n    \u003c/i\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://builder.design\"\u003e\u003cstrong\u003ehttps://builder.design\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://builder.design/builder\"\u003eWeb Builder\u003c/a\u003e\n  ·\n  \u003ca href=\"https://ui.builder.design\"\u003eUI Storybook\u003c/a\u003e\n  ·\n  \u003ca href=\"https://www.zhihu.com/people/biaogebusy\"\u003e知乎\u003c/a\u003e\n    ·\n  \u003ca href=\"./README.md\"\u003e中文\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.bilibili.com/video/BV1ux4y197kc/?vd_source=f65b4e2d70ecc450290b6b1710c0ada5#reply998790468\"\u003eWatch Demo Video\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg style=\"border-radius:10px\" src=\"src/assets/storybook/assets/builder.png\" alt=\"logo\" width=\"80%\"/\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003e Oumuamua is the first known interstellar object passing through the solar system, which means \"distant messenger(信使)\".\n\n#### Open Source Purpose\n\nThis open-source project is very suitable for beginners to learn or advance their skills. It covers most of the Angular technical knowledge points but is not limited to the following:\n\n- Server-Side Rendering (SSR)\n- Lazy Loading，Inject DI\n- Route Guards\n- Request Interception and Caching\n- Dynamic Components\n- Dynamic Forms\n- Dynamic Tables\n- Multiple Themes\n- Custom Directives\n- Custom Pipes\n- Custom Icons\n- Data Visualization and Charts\n- RxJS\n- Storybook\n- TypeScript\n- Provider\n- Map Applications\n- Analytics: Google Analytics\\Microsoft Clarity\n- Applications of Messenger UI in Drupal Headless\n\n## Technology Stack\n\n- Front-end: Angular + Material + Tailwind\n- Dynamic Forms: ngx-formly\n- Web Animation: gsap\n- Charts: Echarts\n- Video: Video.js\n- File Generation: jspdf for PDF generation, html2canvas for image generation, fileSaver and jszip for zip generation\n- Editors: quill, ang-jsoneditor\n- Slideshow: swiper\n- Icon Fonts: material design icons + custom SVG icons\n- Encryption: crypto-js\n- Utility Functions: lodash-es\n- Testing and Preview: Storybook\n- Web Server: Nginx\n- Back-end: Drupal (recommended), dynamic components and APIs can be flexibly configured through Drupal views\n\n## Development Guide\n\nFor more details, please refer to the[Development Guide](https://ui.builder.design/?path=/docs/guide--page)\n\n## Development Environment Setup\n\n```javascript\n// src/environments/environment.ts\nexport const environment: IEnvironment = {\n  apiUrl: \"http://localhost:4200\",\n  production: false,\n  site: \"dist\",\n  port: 4200,\n  cache: false,\n  drupalProxy: false,\n};\n```\n\n- apiUrl: Base API parameter for the entire application\n- production: When set to false, the content API of the page will call the local JSON file. When set to true, it will call the `${this.apiUrl}/api/v1/landingPage?content=${this.pageUrl}` interface.\n- site: The folder name generated when the project is built in production mode. This setting is for generating multiple site projects.\n- port: Custom application port.\n- cache: Whether to enable API request caching.\n- ssr: Whether to use SSR server-side rendering.\n- drupalProxy: Corresponds to Drupal as the back-end, and unified login/logout using Drupal.\n\n## Route Guard Configuration\n\nBy default, it will read the global configuration information from `/api/v1/`config. This is mainly to check whether the site is open or requires login. The file path is `src/app/core/guards/auth.guard.ts`. You can comment out line 35, return true;, during local development.\n\n## Proxy\n\nConfiguration file `config/proxy.config.js`. During local development, it will forward the request based on the corresponding API URL prefix. Configure it according to the actual situation.\n\n```javascript\nconst PROXY_CONFIG = [\n  {\n    context: ['/api', '/user', '/sites'],\n    target: 'https://yourdomain.com',\n    secure: false,\n    changeOrigin: true,\n  },\n];\n\nmodule.exports = PROXY_CONFIG;\n```\n\n## Run\n\n`npm start`\n\n## Route Pages\n\n- Default homepage:[http://localhost:4200/home](http://localhost:4200/home)\n- User login:[http://localhost:4200/me/login](http://localhost:4200/me/login)\n- Web builder: [http://localhost:4200/builder](http://localhost:4200/builder)\n- Drupal Media: [http://localhost:4200/media](http://localhost:4200/media)\n- Drupal Blocks:[http://localhost:4200/block](http://localhost:4200/block)\n\n## Other Pages\n\nIn addition to the above route pages, when accessing other pages, the url will be used to retrieve data from the API and render the page. Returns for local and production environments are handled for easy testing:\n\n```javascript\nloadPageContent(pageUrl = this.pageUrl): Observable\u003cIPage\u003e {\n    if (environment.production) {\n      const landingPath = '/api/v1/landingPage?content=';\n      const pageUrlParams = `${this.apiUrl}${landingPath}${pageUrl}`;\n\n      return this.http.get\u003cany\u003e(pageUrlParams).pipe(\n        tap((page) =\u003e {\n          this.updatePage(page);\n        }),\n        catchError(() =\u003e {\n          return this.http.get\u003cany\u003e(`${this.apiUrl}${landingPath}404`);\n        })\n      );\n    } else {\n      const sample = pageUrl.split('/')[1];\n      const samplePage = samples.elements.filter(\n        (item) =\u003e item.id === sample\n      )[0];\n      if (samplePage) {\n        this.updatePage(samplePage.page);\n        return of(samplePage.page);\n      } else {\n        return this.http.get\u003cany\u003e(`${this.apiUrl}/assets/app/404.json`);\n      }\n    }\n  }\n```\n\nFor base configuration, refer to [Xinshi Messenger Storybook Global Configuration](https://ui.builder.design/?path=/docs/base-config--page)\n\n## Build for Production\n\n`npm run build`\n\n## Run Storybook\n\n`npm run storybook`\n\nIf you encounter an out-of-memory error, execute the following command and then run it again:\n\n`export NODE_OPTIONS=\"--max-old-space-size=8192\"`\n\n## Preview\n\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-01.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-02.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-03.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-04.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-05.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-06.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-07.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-08.png\" alt=\"web builder\" /\u003e\n \u003cimg style=\"border-radius:10px\" src=\"src/assets/images/builder/builder-09.png\" alt=\"web builder\" /\u003e\n\n[![Star History Chart](https://api.star-history.com/svg?repos=biaogebusy/web-builder\u0026type=Date)](https://star-history.com/#biaogebusy/web-builder\u0026Date)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaogebusy%2Fweb-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiaogebusy%2Fweb-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiaogebusy%2Fweb-builder/lists"}