1. TS简介

1.1. typescript是什么?

以javascript为基础构建的语言
可以在任何支持javascript的平台中执行
一个javascript的超集
typescript扩展了javascript，并添加了类型
TS不能被JS解析器直接执行，需要经过编译成javascript后被JS解析器执行。

• 1. 前言
• 2. 安装gitlab-ee企业版
• 3. 环境说明
• 4. 安装必要软件
  • 4.1. 安装ruby
  • 4.2. 安装gitlab-license
• 5. 破解方法
• 6. 关联阅读
• 7. 参考文档

1. 前言

在破解之前, 我们要确保我们安装了合适版本的gitlab, 本文适用于gitlab 13, 14, 15等多个版本, 因为我是一路从gitlab13升级到15的, 对这些版本我都有亲自测试过, 此方法有效. 对于gitlab 16由于没有亲测过, 适用性未知, 希望试验过的朋友留言告知我, 在此提前表示感谢.

使用此教程的前提:

• 需要安装gitlab-ee 企业版
• 需要安装Ruby环境

2. 安装gitlab-ee企业版

关于如何安装配置gitlab-ee可以参考我的文章 鹏叔的技术博客 - gitlab安装升级及迁移

3. 环境说明

当前我的gitlab版本及环境如下:

• 操作系统版本: Centos 7.9

• gitlab-ee版本为: 15.8.1-ee

1. 前言

网站设计师应将每一位访问我们网站的用户视为潜在的新用户，为他们提供足够的指导和指南，以完成他们的任务并熟悉网站。几乎所有类型的网站都必须帮助用户，但方式不同。网站的类型将决定您应该提供的帮助系统的类型。
此外，帮助系统的有效性直接关系到网站设计的质量。一个设计不好的帮助系统——无论其内容多么好——都会带来劣质的用户体验。在本文中，我们将通过示例研究设计有效帮助页面的一些方法，这些方法可能会启发您的工作。

1. 前言

项目中需要一个输入提示框, 之前是使用ng-bootstrap实现的. 但是由于系统框架完全迁移到了material design. 所以所有bootstrap的依赖项都要迁移到angular material design.

如果您的web表单有一个包含许多选项的下拉列表，那么您可能希望通过提前键入来简化用户的生活。幸运的是，Angular Material组件可以让你很容易地做到这一点。在本指南中，我将向您展示如何实现这一点。

顺便说一句：如果你不熟悉typeahead(提前输入)，这是一种在下拉列表中过滤结果的方法。用户刚开始在字段中键入字符，列表将缩小为仅以用户键入的字符开头的选项。
typeahead是一种用户友好的输入方式，因为用户不必在看似无穷无尽的列表中滚动才能找到他们想要的内容。

1. 文字系统 （The type system）

使用排版尽可能清晰有效地呈现您的设计和内容。

值得观看的电影

《白日梦想家》

《辩护人》

《勇敢的心》

《阿甘正传》

1. 前言

1.1. update on 5th/Apr/2023

根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.

具体原因参考官方的 anoucement - Medium post
和 github 上的讨论

建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.

迁移工具:

migrate-angular-flex-to-tailwind

[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)

1.2. update on 25th/June/2023

目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.

所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout

新家现在位于

@ngbracket/ngx-layout。

2. 安装

要在 Angular CLI 项目中使用@angular/flex-layout 相当简单，只需要两个步骤：

1. 安装组件指令

   1	npm install @angular/flex-layout --save

2. 将 Angular Flex Layout 导入到 app.module 中

   1 2 3 4 5 6 7 8 9

   // src/app/app.module.ts import {NgModule} from '@angular/core'; import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ imports: [FlexLayoutModule], ... }) export class AppModule {}

1. 前言

• 为什么选择 angular material design?

实际上如果想在自己的 web 项目中使用 material design 这套设计理念, 有多种选择, 一个是使用 bootstrap + mdbootstrap 这套架构和组件, 或者使用 bootstrap+materialize-css 这套解决方案. 其核心思想就是使用 bootstrap 去处理响应式 web ux 的问题以及跨浏览器, 跨各种大小屏幕兼容性问题, 而使用 mdbootstrap 或 materialize 去实现一套 material design 风格的组件库. 实际上这是一套很好的思路, 各方案专注自己的擅长的领域, 保持小而美的设计. 但是现实问题是 mdbootstrap 并不是免费的, 其 prime 版本是收费的, 而且对初创公司来说其收费还不便宜. materialize-css 是开源免费的, 但是截至 2022-05-29, 该项目已经 6 年没有更新了, 最近的一个版本是 6 年前发布的一个 1.0.0 版本.

1. 前言

1.1. 网络存储技术

网络存储技术大概可以分为3种：

• DAS：直连式存储（Direct Attached Storage），直接与主机相连的存储设备。它依赖于服务器，本身是硬件的堆叠，不带有任何存储操作系统。现在常见的DAS设备：硬盘座带上 N个硬盘。

• NAS：网络连接式存储（Network Attached Storage），存储设备直连网络，NAS设备和DAS设备不同在于，NAS设备一般带有存储操作系统。

• SAN：存储网络（Storage Area Network），可以说是一种网络基础设施。SAN和NAS的区别主要在于：SAN针对海量、面向数据块的数据传输，而NAS则提供文件级的数据访问功能。

1. 前言

构建软件和运行项目的方法有很多种。当我们开始在 GitLab 中构建产品组合和项目管理工具时，我们问自己，“您如何构建工具来支持各种工作流程，而不会因为工具本身的复杂性而陷入瘫痪？我们的结论是什么？构建更少但更灵活的工具。GitLab 的内置issue board是一个很好的例子，说明选择构建单个多功能工具可以显著降低工具维护的复杂性，同时不会限制其功能。

管理项目和软件本质上是复杂的，但项目管理工具本身不一定如此复杂。无论您管理多少个项目、人员或产品，获得保持平稳运行所需的可见性应该是一件容易的事。

GitLab issue board是一个使用简化方法解决复杂问题的很好的例子。我们建立在 GitLab 现有的问题跟踪功能之上，并利用 GitLab 问题标签的强大功能，将它们用作看板上的列表。您可以构建不同的问题板视图，同时保持您在问题跟踪器中看到的相同过滤和排序功能。您可以创建多个板来捕获所需可见性，并按里程碑、标签、责任人和权重定义板的范围。

issue board基于其项目的标签结构，因此，它应用相同的描述性标签来定位在板上的位置，从而在整个开发生命周期中保持一致性。而且，您可以直接从开发板中单击某个问题以开始您的工作。

issue board显示您的团队正在处理哪些问题，分配给每个问题的人员以及这些问题在工作流中的哪个位置

1. 前言

Material设计为提高密度改善用户体验的用例提供高密度间距指导。

1. 颜色系统

Material设计颜色系统可以帮助您创建反映您的品牌或风格的颜色主题。

1.1. 颜色用法和调色板

Material设计颜色系统可帮助您以有意义的方式将颜色应用于 UI。在此系统中，您可以选择主要颜色和次要颜色来代表您的品牌。然后，每种颜色的深色和浅色变体可以以不同的方式应用于 UI。

1. 说明

导航允许用户在应用程序中移动。

1.1. 导航类型

导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的：专用导航组件、将导航行为嵌入内容以及平台功能。

1. Gitlab CI/CD 基础

课程主要内容

• 为什么要做CI/CD?
• GitLab CI/CD
• GitLabCI vs JenkinsCI

1. 前言

本页描述组件在布局中的行为，包括与网格以及断点的关系。

2. Position术语

UI元素在每个分界点范围内的行为方式不同。UI元素、组件和表面在网格中的位置用以下术语描述。