修改博客

notes/helloshop/drawio.md

@@ -1,34 +1,104 @@
-# 使用 Drawio 画架构图
+# 使用 Drawio 画架构
 
-## 在线画图（几个域名）
+## 微软 Visio 工具
 
-[Drawio](https://app.diagrams.net/)
+Visio 是微软的画图工具，非常强大，但是收费，而且只能在 Windows 系统上使用，不支持 Mac 和 Linux 系统，虽然微软推出了 Visio Online，但是功能还是比较弱，而且收费。
 
-https://www.drawio.com
+## 开源 Drawio 工具
 
-## 桌面应用
+Drawio 是一个开源的画图工具，支持在线和桌面两种方式，支持多种格式，支持多种平台，支持多种语言，支持多种图形，支持多种导出格式，支持多种插件，支持多种集成方式，也支持在 Visual Studio Code 中使用插件的方式画图。
 
-## Visual Studio Code 插件
+## 画图入口
 
-## 参考
+[Drawio 官网](https://www.drawio.com){:target="_blank"}
 
-## 图形容器（容器缩放）
+[在线画图](https://www.drawio.com)
+
+## 容器和容器大小缩放
+
+设置图形 Container 属性为 true，可以将多个图形组合成一个图形，然后可以对这个图形进行缩放，设置 Collapsed 属性为 true，可以将图形折叠起来，只显示标题。设置 Resizable 属性为 false，可以禁止容器子图形缩放。
 
 ## 浮动链接和固定链接
 
-## 文字位置和方向
+浮动链接是指链接的位置随着图形的移动而移动，固定链接是指链接的位置不随着图形的移动而移动，可以添加自定义连接点。
 
-## 流程动画
+## 拖动连接线文字
 
-## 对齐排版 
+设置连接线文字可以拖动，可以将连接线文字拖动到连接线的任意位置，可以自定难以连接点的位置。
 
-## 潜入图像和在线图像，嵌入 svg 修改样式
+## 连接线的样式和反转
 
-## 导出 svg 格式
+可以设置连接线的样式，可以设置连接线的反转，可以设置连接线的弯曲程度。
 
-## 自定义动画
+## 图形和连接线文字位置
+
+设置文字位置，可以将文字放在图形或连接线左上角，设置文字位置为中心，可以将文字放在图形的中心。
+
+## 连接线添加航点
+
+可以在连接线上添加航点，可以在连接线上添加箭头，可以在连接线上添加标签。
+
+## 任何目标可设置链接
+
+可以设置任何对象的超级链接，可以设置连接线的超级链接，可以设置图形的超级链接。
+
+## 替换图形
+
+可以将新图形拖动到现有图形上替换图形，替换后，图形的属性和连接线都会保留。
+
+## 对齐方式和分布方式
+
+可以设置图形的对齐方式，可以设置图形的分布方式。
+
+## 带着样式画图
+
+可以带着样式画图，可以将样式应用到图形上，也可以清除默认样式。
+
+## 嵌入图像和在线图像
+
+理解几何图形，图形库图形，嵌入图像，在线图像的区别。
+
+## 嵌入 SVG 图像修改样式
+
+使用阿里图标库 iconfont 找图，可以下载 SVG 图像，然后嵌入到 Drawio 中，可以修改 SVG 图像的样式，但需要配置规则，如下代码。
+
+```
+editableCssRules=.*;
+```
+
+## 导出 SVG 格式选项
+
+设置缩放系数，边框，设置背景颜色，图像副本，嵌入图像，链接打开方式。
+
+## 连接线流程动画
+
+设置 Flow Animation 属性为 true，可以设置连接线的流程动画。该功能基于 CSS 的动画能力实现，简单好用，基本满足需求。
+
+## 自定义 SVG 复杂动画
+
+可以使用 SVG 自定义动画，可以设置动画的开始时间，持续时间，重复次数，动画类型，动画属性，动画值，动画路径，动画方向，动画速度，动画延迟，动画填充，动画结束后的状态。
+
+[W3C 关于 SVG 的动画标准](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animate)
+
+定义一个简单的路径动画。
+
+```xml
+<circle r="3.5" fill="#00AA9E">
+    <animateMotion dur="5s" repeatCount="indefinite" path="points"/>
+</circle>
+```
+
+使用 XLINK 优雅的连接动画
+
+```xml
+<path id="stage1-1" d="points"/>
+
+<circle r="3" fill="red">
+    <animateMotion dur="5s" repeatCount="indefinite">
+        <mpath xlink:href="#stage1-1"/>
+    </animateMotion>
+</circle>
+```
 
 ## svgdata 插件
 
-
-

notes/helloshop/readme.md

@@ -0,0 +1,50 @@
+朋友们，零度新一代基架今日正式开始搭建。我们非常激动地宣布，新一代基架起名为 HelloShop 项目， 这个基架将演示新一代 .NET 技术栈开发架构，之所以起名为 HelloShop 是以为简单的商店应用能够演示出一个系统的所有技术，当然，这个商城系统也可以是其它系统，只要你能够理解这个基架的设计思想，你就能够快速搭建一个系统，以下文档由 AI 生成，可能会有一些语法错误，我们会在后期进行修正。
+
+### 业务场景
+
+本商店应用旨在演示一个系统的所有技术，帮助开发者以最小的依赖和代码搭建一个系统，将不同的技术置于微服务架构中。开发者可以根据自己的业务需求快速复用代码并搭建一个系统，而不是花费大量时间在一个通用的框架上。
+
+我们的目标是提供细粒度的微服务架构和最佳实践，让您可以自行组合各种技术。统一的身份认证和授权系统，服务发现，负载均衡，容错，分布式跟踪，分布式缓存，分布式事务，分布式消息，分布式日志，分布式配置，分布式定时任务等等。
+
+此外，我们还提供了界面，包括基于 Blazor 的 Web 应用和基于 MAUI 的混合应用，可以在不同的平台上运行，包括桌面应用，安卓应用和 IOS 应用。
+
+![技术架构](/images/helloshop/architecture.svg){class="img-responsive w-100"}
+
+### 所含技术
+
+Visual Studio 2022、 .NET 8、C# 12.0、Aspire、ASP.NET Core，EF Core、WebApi、gPRC、Blazor、MAUI、PostgreSQL、MonngDB、Redis、SignalR、Identity、Orleans、日志记录、密钥管理、后台定时任务、服务发现、发布订阅、分布式跟踪、健康检查、性能指标探测、配置管理、容器化技术、单元测试和集成测试、基于 Roslyn 的源代码自动生成器和增量生成器。
+
+### 仓库结构
+
+在仓库的结构上，我们跟随了微软惯用的风格，目录结构如下：
+
+`assets` 静态资源，包括图片，图标，视频，音频等。
+
+`build` 构建脚本，包括编译脚本，打包脚本，发布脚本等。
+
+`docs` 相关文档，包括设计文档，架构文档，开发文档，部署文档等。`
+
+`samples` 演示示例，包括代码示例，配置示例，数据示例，文档示例等。
+
+`src` 源代码，包括源代码，配置文件，资源文件，脚本文件等。
+
+`tests` 测试代码，包括单元测试，集成测试，端到端测试等。
+
+`tools` 项目所使用的一些工具。
+
+### 代码仓库
+
+国外仓库：[https://github.com/bit365/hello-shop](https://github.com/bit365/hello-shop){target="_blank"}
+
+国内仓库：[https://gitee.com/bit365/hello-shop](https://github.com/bit365/hello-shop){target="_blank"}
+
+### 后续计划
+
+我们刚刚还注册了 helloshopnet.com 和 helloshopnet.cn 两个域名用于后期的基架部署，也算是给 HelloShop 安一个家，目前还是正在备案。
+
+### 技术探讨
+
+本套基架会有一些配套视频在 [ www.xcode.me](https://www.xcode.me) 上发布。如果你想要获取最新的视频可以关注我们的微信订阅号 zerostack，我们会在公众号上发布最新的动态，如果你觉得这套基架对你有帮助，你可以给我们一个 Star，这是对我们最大的鼓励。
+
+
+最后我们希望这套基架能帮助到你，如果你有任何问题可以在 Github 上提出我们会尽快回复，坚持优雅的编码是我们一直所追求的，希望你也能够参与这种优雅。