rainAgain / xinshi-ui

丰富的组件库，完整的前端解决方案，通过Web Builder 拖拽快速构建响应式、多主题的网站。 Rich component library, complete front-end solution, through Web Builder drag and drop quickly building responsive and multi themed websites.

信使 UI 低代码前端框架

信使 UI 是基于 Material 的 Angular 低代码前端框架，丰富的组件库可提供优秀的数字创新体验，
使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。

https://www.zhaobg.com

Web Builder · UI Storybook · 知乎 · English

观看演示视频

奥陌陌是已知的第一颗经过太阳系的星际天体，意为"远方信使"。

开源目的

项目非常适合初学者学习或者进阶，它涵盖了绝大部分 Angular 技术知识点，但并不仅限于以下内容。

• 服务端渲染（SSR）
• 懒加载，Inject 依赖注入
• 路由守卫
• 请求拦截缓存
• 动态组件
• 动态表单
• 动态表格
• 多主题
• 自定义指令
• 自定义管道 pipe
• 自定义 icon
• 数据图表
• Rxjs
• flex layout
• Storybook
• Typescript
• Provider
• 地图应用
• 分析：谷歌分析、微软 Clarity
• 信使 UI 在 Drupal 前后端分离中的应用

技术选型

• 前端：Angular + Material + FlexLayout
• 动态表单：ngx-formly
• web 动画：gsap
• 图表：Echarts
• 视频：Video.js
• 文件生成：jspdf 生成 pdf，html2canvas 生成图像
• 编辑器：quill, ang-jsoneditor
• 幻灯片：swiper
• 字体图标：material design icons + 自定义 svg icon
• 加密：crypto-js
• 工具函数：lodash-es
• 测试预览：storybook
• web 服务：Nginx
• 后端：Drupal(推荐)，通过 Drupal 的 views 视图可灵活配置动态组件、动态 api；

开发指南

详情可查阅开发指南

开发环境设置

// src/environments/environment.ts
export const environment: IEnvironment = {
  apiUrl: "http://localhost:4200",
  production: false,
  site: "dist",
  port: 4200,
  cache: false,
  ssr: false,
  drupalProxy: false,
};

• apiUrl: 是整个应用的 Base api 参数；
• production: 为 false 时，页面的内容 api 将调用本地 json 文件，true 时将会调用${this.apiUrl}/api/v1/landingPage?content=${this.pageUrl}接口；
• site: prod 打包时生成的文件夹名称，此设置是为了生存多个站点项目；
• port: 自定义应用端口；
• cache: 是否开启 api 请求缓存；
• ssr: 是否使用 SSR 服务端渲染方式；
• drupalProxy: 对应后端为 drupal，统一使用 Drupal 来登录登出；

路由守卫配置

默认会读取 /api/v1/config 的全局配置信息，这里主要是查看该站点是否是开放还是需要登录的，文件路径src/app/core/guards/auth.guard.ts，本地开发时可注释掉大概 35 行reture true；；

代理

配置文件config/proxy.config.js，本地开发时，会根据对应的 api url 前缀进行代理转发，根据实际情况进行配置；

const PROXY_CONFIG = [
  {
    context: ["/api", "/user", "/sites"],
    target: "https://yourdomain.com",
    secure: false,
    changeOrigin: true,
  },
];

module.exports = PROXY_CONFIG;

运行

npm start

路由页面

• 默认首页：http://localhost:4200/home
• 用户登录：http://localhost:4200/me/login
• Web builder: http://localhost:4200/builder
• Drupal 媒体：http://localhost:4200/media
• Drupal 区块：http://localhost:4200/block

其他页面

除了以上路由页面，其他页面在访问时，会获取url进行接口的数据读取，进而渲染页面，本地环境和生产环境返回会了方便测试做了判断：

loadPageContent(pageUrl = this.pageUrl): Observable<IPage> {
    if (environment.production) {
      const landingPath = '/api/v1/landingPage?content=';
      const pageUrlParams = `${this.apiUrl}${landingPath}${pageUrl}`;

      return this.http.get<any>(pageUrlParams).pipe(
        tap((page) => {
          this.updatePage(page);
        }),
        catchError(() => {
          return this.http.get<any>(`${this.apiUrl}${landingPath}404`);
        })
      );
    } else {
      const sample = pageUrl.split('/')[1];
      const samplePage = samples.elements.filter(
        (item) => item.id === sample
      )[0];
      if (samplePage) {
        this.updatePage(samplePage.page);
        return of(samplePage.page);
      } else {
        return this.http.get<any>(`${this.apiUrl}/assets/app/404.json`);
      }
    }
  }

Base 的基础配置可查阅信使 storybook 全局配置

为生产环境打包

npm run build:ssr

运行 Storybook

npm run storybook

如果有提示内存不足的报错，执行以下命令，然后重新运行:

export NODE_OPTIONS="--max-old-space-size=8192"

交流学习

联系	二维码
公众号：Drupal 自习室
交流加微信：biaogebusy