![LibGit2Sharp.png](/static/img/9581db7a896d63fd70fef2a7b5caaedd.LibGit2Sharp.webp)

这不是要写年中报告📊么，昨天晚上哄小孩睡觉😴想到可以分析下项目在Git上的提交文件次数📁，分下前台和后天的修改，为系统的升级和后续设计提供数据支撑📈；看似无聊其实没什么用；




`代码肯定不会自己写的`

:::note{title="gtp-4o"}
## 我:
我的.net项目是 git 管理的，我现在想分析下建项以来所有的改动，哪些是前端修改，哪些是后端修改，我应该怎么做

## ChatGPT:
要分析你的 .NET 项目自创建以来的所有改动，并区分哪些是前端修改，哪些是后端修改，你可以遵循以下步骤：

1. 获取所有的提交记录：

你可以使用 Git 命令来获取所有的提交记录。以下是一个基本命令来获取所有提交的列表：
```
git log --pretty=format:"%H"
```

这个命令会输出所有提交的哈希值。

2. 分析每个提交的改动：

对于每个提交，你需要分析修改了哪些文件。你可以使用以下命令来获取某个提交的文件改动列表：
```
git diff-tree --no-commit-id --name-only -r <commit-hash>
```
这个命令会列出指定提交中所有被修改的文件。

3. 区分前端和后端文件：

根据文件路径和文件类型，你可以区分哪些文件是前端文件，哪些是后端文件。通常，前端文件包括 HTML、CSS、JavaScript、TypeScript 文件等，而后端文件包括 C# 文件（.cs）、配置文件等。

例如，假设你的项目结构如下：
```
/frontend
    /src
        /components
            App.js
            ...
/backend
    /Controllers
        HomeController.cs
        ...
```
你可以根据文件路径来判断。
编写脚本自动化分析：
你可以编写一个脚本来自动化上述步骤。

5. 进一步分析：

你可以根据需要进一步分析每个提交的具体改动内容，或者生成更详细的报告。

希望这些步骤能够帮助你分析项目中的改动情况。如果你有任何其他问题，欢迎随时提问！

## 我:
写个.net控制台程序吧

## ChatGPT:
好的，我们可以使用 .NET 来编写一个控制台程序，来分析 Git 提交记录并区分前端和后端的修改。你可以使用 LibGit2Sharp 这个库来操作 Git 仓库。

首先，你需要在你的项目中安装 LibGit2Sharp 包。你可以使用 NuGet 包管理器来安装它：
```
dotnet add package LibGit2Sharp
```

然后，你可以编写以下 C# 控制台程序：
```
using System;
using System.Collections.Generic;
using System.Linq;
using LibGit2Sharp;

namespace GitChangeAnalyzer
{
    class Program
    {
        static void Main(string[] args)
        {
            // 仓库路径
            string repoPath = @"path\to\your\repository";

            using (var repo = new Repository(repoPath))
            {
                // 获取所有提交
                var commits = repo.Commits;

                int frontendChanges = 0;
                int backendChanges = 0;

                foreach (var commit in commits)
                {
                    var changes = repo.Diff.Compare<TreeChanges>(commit.Parents.First().Tree, commit.Tree);

                    bool hasFrontendChange = false;
                    bool hasBackendChange = false;

                    foreach (var change in changes)
                    {
                        if (IsFrontendFile(change.Path))
                        {
                            hasFrontendChange = true;
                        }
                        else if (IsBackendFile(change.Path))
                        {
                            hasBackendChange = true;
                        }
                    }

                    if (hasFrontendChange)
                    {
                        frontendChanges++;
                    }

                    if (hasBackendChange)
                    {
                        backendChanges++;
                    }
                }

                Console.WriteLine($"Total frontend changes: {frontendChanges}");
                Console.WriteLine($"Total backend changes: {backendChanges}");
            }
        }

        static bool IsFrontendFile(string filePath)
        {
            // 根据文件路径和扩展名判断是否是前端文件
            return filePath.StartsWith("frontend/") ||
                   filePath.EndsWith(".html") ||
                   filePath.EndsWith(".css") ||
                   filePath.EndsWith(".js") ||
                   filePath.EndsWith(".ts");
        }

        static bool IsBackendFile(string filePath)
        {
            // 根据文件路径和扩展名判断是否是后端文件
            return filePath.StartsWith("backend/") ||
                   filePath.EndsWith(".cs") ||
                   filePath.EndsWith(".config") ||
                   filePath.EndsWith(".xml");
        }
    }
}
```
请注意以下几点：
1. 设置仓库路径：你需要将 repoPath 设置为你的 Git 仓库的路径。
2. 判断文件类型：IsFrontendFile 和 IsBackendFile 方法用于判断文件是前端文件还是后端文件。你可以根据你的项目结构和文件类型进行调整。

这个程序会遍历所有的提交，分析每个提交中的文件改动，并统计前端和后端的改动次数。运行程序后，你会在控制台中看到前端和后端的改动次数。

如果你有任何问题或需要进一步的帮助，请告诉我！
:::

这里唯一的坑是提示 `LibGit2Sharp.LibGit2SharpException:“repository path 'E:/华电众信/HD_MES/' is not owned by current user”`

在[这里](https://blog.csdn.net/witton/article/details/129734545?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-129734545-blog-94206450.235%5Ev43%5Epc_blog_bottom_relevance_base4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-129734545-blog-94206450.235%5Ev43%5Epc_blog_bottom_relevance_base4&utm_relevant_index=21)解决



:::note{title="gpt-4o"}
## 我:
我已经得到结果 
前端文件修改总数: 9848
后端文件修改总数: 12609
其他文件修改总数: 47917
总提交数: 1235
总修改数: 145399


## ChatGPT:
好的，我们可以根据你提供的最新数据进行分析：

- 前端文件修改总数: 9848
- 后端文件修改总数: 12609
- 其他文件修改总数: 47917
- 总提交数: 1235
- 总修改数: 145399

我们可以从这些数据中得出以下信息和结论：

### 1. 修改类型分布
- 前端文件修改占总修改数的比例：
  \[
  \frac{9848}{145399} \approx 6.77\%
  \]
- 后端文件修改占总修改数的比例：
  \[
  \frac{12609}{145399} \approx 8.67\%
  \]
- 其他文件修改占总修改数的比例：
  \[
  \frac{47917}{145399} \approx 32.95\%
  \]

### 2. 每次提交的平均修改数
- 平均每次提交的修改数：
  \[
  \frac{145399}{1235} \approx 117.72
  \]

### 3. 前端和后端修改的相对比例
- 前端文件修改与后端文件修改的比例：
  \[
  \frac{9848}{12609} \approx 0.78
  \]

### 4. 前端和后端修改的绝对数量
- 前端文件修改总数：9848
- 后端文件修改总数：12609

### 5. 其他文件的修改情况
- 其他文件的修改总数：47917

### 结论
1. **修改类型分布**：
   - 前端文件修改占总修改数的6.77%，后端文件修改占总修改数的8.67%，其他文件修改占总修改数的32.95%。
   - 其他文件的修改次数虽然仍然占据较大比例，但相比之前的数据，比例有所下降。

2. **每次提交的平均修改数**：
   - 每次提交平均有约118个文件被修改，这与之前的数据一致。

3. **前端和后端修改的相对比例**：
   - 前端文件修改与后端文件修改的比例为0.78，这表明后端文件的修改次数仍然多于前端文件，但比例略低于之前的数据。

4. **前端和后端修改的绝对数量**：
   - 后端文件的修改总数比前端文件多2761次。

5. **其他文件的修改情况**：
   - 其他文件的修改次数显著减少，这可能表明项目中配置文件、文档或其他非代码文件的变更次数减少。

### 总结
1. **修改类型的分布有所变化**，前端和后端文件的修改比例相对增加，其他文件的修改比例减少。
2. **每次提交的平均修改数保持不变**，每次提交平均修改118个文件。
3. **后端文件的修改次数仍然多于前端文件**，但比例有所下降，表明前后端开发的工作量仍然比较均衡。
4. **其他文件的修改次数显著减少**，可能意味着项目的配置、文档或其他非代码文件的变更减少。

如果你有任何特定的方面需要进一步分析或有更多数据提供，我可以帮助你进行更详细的分析。
:::

使用LibGit2Sharp分析项目提交

![MermaidHelp2.png](/static/img/c747025b20c3baaf42871cc9e04ce125.MermaidHelp2.webp)

没想到还能出第二期，这几天增加了功能，还是有坑，这里说下

# 1. FineUI11

既然是FineUI11用例项目，`FineUI11`的改造是永久话题，

## 1.1 `f:Tool`图标在右边
对于`f:ContentPanel`我使用了`<Tools>`放按钮，因为`f:Toolbar`会错位，`Tools`里的控件`f:Tool`是图标和文字，但是这个没有图片再右边的属性`IconAlign` ，`f:Button`是有的；我想要这样的

![图片.png](/static/img/862a35c67352e0eb888171ed0fe278c2.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



好吧，只能改，首先新建 `ToolEx`
``` c#
 [HtmlTargetElement("f:Tool")]
 [RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
 public class ToolEx : ToolTagHelperEx
 {
 }
```

然后告诉前台 Tool 被接管了 
```  _ViewImports.cshtml
@removeTagHelper FineUICoreEx.ToolTagHelperEx, FineUICoreEx
```

最后增加属性，核心就是`i`和`span`换个位置；

```
[HtmlTargetElement("f:Tool")]
[RestrictChildren("Menu", new string[] { "Listeners", "Attributes" })]
public class ToolEx : ToolTagHelperEx
{
    /// <summary>
    /// 图标位置， 只支持右侧 或 左侧
    /// </summary>
    [HtmlAttributeName("IconAlign")]
    public IconAlign IconAlign { get; set; }

    protected override void PreProcess(TagHelperContext context, TagHelperOutput output)
    {
        StringBuilder sb = new();
        if (IconAlign == IconAlign.Right)
        {
            sb.Append($"$('#{this.Source.ID} i').before($('#{this.Source.ID} span'));");
        }
        PageContext.RegisterStartupScript(sb.ToString());
        base.PreProcess(context, output);
    }
}
```

## 1.2 分割线
`Tools`里 `f:ToolbarSeparator` 也没有，干脆造一个，这里的思路是先 `new Tool()`，然后直接绘制一个`ToolbarSeparator` 替换；

首先要告诉 `Tools` 可以有 `f:ToolbarSeparator`，和上面的思路一样 

``` c#
[HtmlTargetElement("Tools")]
[RestrictChildren("f:Tool", new string[] { "f:ToolbarSeparator" })]
public class ToolsEx : ToolsTagHelperEx
{
}
```

然后修改 `ToolbarSeparatorTagHelperEx` 的默认绘制，如果是包在 `<Tools>` 里的，就改变行为
``` c#
public class ToolbarSeparatorEx : ITagHelperEx<ToolbarSeparatorTagHelperEx>
{
    public void BeforProcess(ToolbarSeparatorTagHelperEx tagHelper, TagHelperContext context, TagHelperOutput output, TagHelperExFun method)
    {
        var currentPath = method.GetCurrentPath();
        var reverse = currentPath.AsEnumerable().Reverse();
        //判断是不是在 ToolsEx 里
        if (currentPath.Any(m => m.GetType() == typeof(ToolsEx)))
        {
            var nextItem = reverse.SkipWhile(m => m.GetType() == typeof(ToolsEx)).First();
            var item = nextItem as PanelBaseTagHelper;
            var newtool = new Tool();
            item.Source.Tools.Add(newtool);
            StringBuilder sb = new();
            sb.Append($"$('#{newtool.ID}').replaceWith('<div class=\"f-toolbar-separator f-toolbar-item f-cmp f-widget\" style=\"display: initial;\"></div>');F.ui.{tagHelper.ID}.remove();$('#{tagHelper.Source.WrapperID}').remove();");
            PageContext.RegisterStartupScript(sb.ToString());
        }
    }
}
```

然后就可以了
 
![图片.png](/static/img/647b7f4a95ab63682d47598cc982ea68.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. mermaid 
## 2.1 拦截语法错误

`mermaid.js` 提供了语法验证和错误的事件

``` js
//验证 注意是异步方法
F.ui.rightPanel.parse = await mermaid.parse(code);
```

``` js
//注册语法错误
mermaid.setParseErrorHandler((e) => {
    //错误信息
    console.log('e>', e);
})
```

## 2.2 导出放大
`mermaid.ink` 的放大只有 1-3倍，可以通过调节`width`来直接放大，因为有的图像确实很模糊

``` js
let width = $('#mermaidSvg').width();
let scale = F.ui.btnscale.scale || 2;
width = width * scale;
const dataURL = `https://mermaid.ink/img/pako:${F.ui.codePanel.mermaidPako}?type=${type}&width=${width}`;
```

---
至此 该项目告一段落


![](/static/img/508af01e03614acbe3667ba38cdd4698.gongneng2.gif)

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

MermaidHelp开发日志（二）

![MermaidHelp1.png](/static/img/927d29ed10b20c0f1994ade54049129a.MermaidHelp1.webp)

FineUI11出来，想上手开发试一试，正好手头有个需求，就做了个工具；

公司运维的项目越来越多，环境端口啥的容易忘，所以要记录下，上个K8S吧又太大了，所以只能自己记录，画图吧，我就让AI给我输出 `mermaid` ,然后去编辑，导出流程图，这是个完整的工作流，我用FineUI和GPT接口组合到一个页面了；

项目已经开源了 https://gitee.com/shixixiyue/mermaid-help  这里主要说开发过程遇见的坑；




# 1. FineUI控件

## 1.1 HtmlTarget
`HtmlTarget` 还是用着别扭，想写个自定义属性怪难受，这里使用了新的写法，

在 `_ViewImports.cshtml` 可以屏蔽标签

```
@removeTagHelper FineUICore.PanelTagHelper, FineUICore
@removeTagHelper FineUICore.TextAreaTagHelper, FineUICore
```

这样这两个标签就不生效了，`FineUICoreEx.PanelEx` 就生效了，默认 `<f:Panel>` 会指向新的，就可以配置新的属性了也会自动提示

## 1.2 层级

还有个问题就是层级，这个层级有点多，基本外边都是架子，功能的按钮再最里面，藏起来很难找到，看着别扭，函数式 可以把外层直接封装为方法调用和主要功能分离开，标签的写法只能一层一层套，除非用`分部视图`，这样直接就多出页面，这个还没有找到好的办法解决


![图片.png](/static/img/f0b6aeea4d455f623340a81de1f010dd.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

## 1.3 割裂

有的需求只能用js写，这样就割裂了，前后台混着，前台处理一点，后台处理一点，但是后台看着好看，直接写属性多好看`txtInput.Text = inpput;`，但是有些属性不是`Ajax响应` 没办法还得写 `RegisterStartupScript` 加一大串字符串，不然就加扩展方法 `txtInput.SetInput();` 这么写和属性长的也不一样，还是别扭。

.net9好像可以直接给类扩展属性了，期待啊，早点出，能解决不少问题；

## 1.4 Session丢了

可能是配置不对，和FineUI没关系，总之 `FineUICore.PageContext.Current.Session` 一直是`null`，需要这样写

```
services.AddSession(options =>
{
    // Optionally configure session options here
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true; // Required for GDPR compliance
});
```
```
app.UseSession();
```
```

        /// <summary>
        /// 得到Session
        /// </summary>
        /// <param name="key">键</param>
        public T GetSession<T>(string key)
        {
            var value = FineUICore.PageContext.Current.Session.GetString(key);
            if (string.IsNullOrEmpty(value))
            {
                value = string.Empty;
                return default(T);
            }
            JObject _value = JObject.Parse(value);
            T ms = (T)_value.ToObject(typeof(T));
            return ms;
        }

        /// <summary>
        /// 设置Session
        /// </summary>
        /// <param name="key">键</param>
        /// <param name="value">值</param>
        protected void SetSession(string key, string value)
        {
            if (string.IsNullOrEmpty(value))
            {
                value = "";
            }
            //IHttpContextAccessor PageContext = PageContext.
            var httpContextAccessor = FineUICore.PageContext.GetService<IHttpContextAccessor>();
            FineUICore.PageContext.Current.Session.SetString(key, value);
            //HttpContext.Session.SetString(key, value);
        }

        /// <summary>
        /// 设置Session
        /// </summary>
        /// <param name="key">键</param>
        /// <param name="value">值</param>
        protected void SetSession(string key, object value)
        {
            string _value = JObject.FromObject(value).ToString(Newtonsoft.Json.Formatting.None);
            SetSession(key, _value);
        }

```
# 2. Marked显示Markdown

基本网上能看见的`Marked.js`例子都是老的版本，我重新阅读了`Marked`开发文档，如果结合 `highlight` 并且显示行号，需要这么写，


:::info{title="原创首发，全网唯一"}


```
<script src="~/js/marked.min.js"></script>
<script src="~/js/highlight.min.js"></script>
<script src="~/js/highlightjs-line-numbers.min.js"></script>
```

```
const htmlContent = markedAPI('`markdown格式`', mermaidAPI);
document.getElementById('codePanel_Content').innerHTML = htmlContent;
hljs.initLineNumbersOnLoad({ singleLine: true });

/**(markdown格式,代码部分的回调)*/
const markedAPI = (msg, mermaidfun) => {
    return marked.use({
        renderer: {
            code(code, type) {
                if (type === "mermaid") mermaidfun(code);
                return `<pre><code class="hljs language-${type}">${code}</code></pre>`;
            }
        }
    })(msg);
};
```

:::
这里主要是回调`mermaidfun`，如果不加回调，直接使用`marked-highlight.js`插件即可

# 3. mermaid导出图片

`mermaid`生成的svg，要导出图片，这个功能也是做了一天，网上拷贝的例子没一个成功的，AI提供的方法，全部试了一遍，都不能用；
`html2canvas.min.js` `svg2png.js` 都试过了也不行 报错 ；C# `SkiaSharp` `Magick.NET-Q8-AnyCPU` 也不行，黑，字体丢失； 最后看`mermaid`怎么导出的，把`mermaid.live`下载下来看源码，一点点跟踪终于成功了，有个服务 `mermaid.ink`，这个好像也是开源的


![图片.png](/static/img/ed83931cf1049c4f19776aec111db76e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

:::info{title="原创首发，全网唯一"}

```
<script src="~/js/mermaid.min.js"></script>
<script src="~/js/pako.min.js"></script>
<script src="~/js/base64.min.js"></script>
```
```
// 导出图片
function btnSaveToImg_Click() {
    const mermaidPako = GetPako(`这里是mermaid语法的代码`);
    const dataURL = `https://mermaid.ink/img/pako:${mermaidPako}?type=png`;

    fetch(dataURL)
        .then(response => response.blob())
        .then(blob => {
            const link = document.createElement('a');
            link.download = '导出图片.png';
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(link.href);
        })
        .catch(error => console.error('下载图片时出错:', error));
}
//压缩
function GetPako(code) {
    return serialize(JSON.stringify({
        code,
        mermaid: { theme: "default" },
        autoSync: true,
        updateDiagram: true,
        editorMode: "code"
    }));
}
// 序列化和反序列化函数
function serialize(state) {
    const data = new TextEncoder().encode(state);
    const compressed = pako.deflate(data, { level: 9 });
    return Base64.fromUint8Array(compressed, true);
}

function deserialize(state) {
    const data = Base64.toUint8Array(state);
    return pako.inflate(data, { to: 'string' });
}
```


:::

---

:::info{title="相关连接"}
[MermaidHelp开发日志（一）](https://blog.shizhuoran.top/post/50)

[MermaidHelp开发日志（二）](https://blog.shizhuoran.top/post/51)

:::

MermaidHelp开发日志（一）

![chuxue2.png](/static/img/a7c6d8dbbd15ce9ec4a719e330aa88d7.chuxue2.webp)

正好要做个工具，用FineUI11，一步一步的搭建一个项目

# 1. 首先新建一个项目，


![图片.png](/static/img/fd9abfdb80df7270c51cccc62ddc0b59.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)



![图片.png](/static/img/e62a82f9cbe9db5a6246910bc3e78db0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/6bff77afa4aea5eb6b3c89d6f11876b3.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. 拷贝DLL文件

![图片.png](/static/img/67234484e2c3ccf5eb44a1b8f76d53d0.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

## 2.1 添加引用

双击项目
![图片.png](/static/img/53db70831fbcfb53f5651e37059fefea.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

![图片.png](/static/img/127a3681b60d643fd86c75f0b8bbb6f6.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
```
<ItemGroup>
	<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="8.0.4" />
	<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="8.0.4" />
</ItemGroup>
 <ItemGroup>
   <Reference Include="FineUICore">
     <HintPath>bin\FineUICore.dll</HintPath>
   </Reference>
 </ItemGroup>
```

# 3. 复制资源

![图片.png](/static/img/066b0463f705bad2633c9b7546a28ffe.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

还有这个自动程序

![图片.png](/static/img/192adf35a9fcb60f5564c9eff1880831.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


![图片.png](/static/img/af42a08064003b5ae96f0698da6620f5.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 4. 同步命名空间

![图片.png](/static/img/4ce70d6c59e975f602f2b48e0706bc02.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 5. 没用的可以删除

`Error.cshtml` 可以留着

![图片.png](/static/img/dd210104311787990f5ecef83728ab48.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

新建 `_GlobalUsing.cs`


![图片.png](/static/img/f48a8b2c606b7d037f067e6a6c418f61.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
```
global using FineUICore;
global using System;
global using System.Collections.Generic;
global using System.Linq;
global using System.Text;
global using System.Threading.Tasks;
```

# 6. 开启自动程序

![图片.png](/static/img/192adf35a9fcb60f5564c9eff1880831.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

更多信息

![图片.png](/static/img/dcbd859f21b6546b75a47abe1a0fa218.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

仍要运行

![图片.png](/static/img/e72f8d3632310834f455c6492a8b3660.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


# 7. 新建`Index.cshtml`

![图片.png](/static/img/0d96e5b661890621e28495fb0e16693e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
```
@page
@model MermaidHelp.Pages.IndexModel
@{
    ViewBag.Title = "起始页面";
    var F = Html.F();
}

@section body {
    <f:Panel ID="main" IsViewPort="true"></f:Panel>
}

@section script {
    <script>
    </script>
}
```
```
namespace MermaidHelp.Pages
{
    public partial class IndexModel : BaseModel
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

```


![图片.png](/static/img/d4b3a9564b02eab6fc2d4b06ac018f3a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


运行成功

![图片.png](/static/img/8345c59bf9f007f08f19550cb0b5b8ea.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

---

:::info{title="相关连接"}

[FineUI初学手册（一）](https://blog.shizhuoran.top/post/48)

:::

FineUI初学手册（二）

![](https://blog.shizhuoran.top/static/img/98b3759cad4ad799591ac10194292365.chuxue1.webp)
上一次的初学手册已经是2014年写的了，10年间FineUI产品发生了巨大的变化，最近FineUI11发布了，初学手册也跟着更新一下；



# 1. 版本选择

FineUI官网已经给了一个版本对比，
![](https://blog.shizhuoran.top/static/img/576249d852793e08e3e16861c351d0f5.Screenshot_2024-05-26-09-45-33-591_com.android.chrome.webp)

这里我展开一下，
* FineUI开源版前端基于ExtJS，已经是很老的版本了，已经停止维护了，基本可以不用考虑使用；
* 他的升级版是FineUIPro，前端基于JQuery，开发方式就是传统的ASP.Net WebForms，所以.net版本就到 .Net Framework 4.5，只能在Windows上运行发布；
* 随着.net升级到core，fineui又出来了FineUICore，适配.net 3.1以上，目前到.net8都可以运行，可以跨平台部署，core的开发模式多样，所以FineUICore有 `Core函数式` `CoreRazorPages` `CoreWebforms`对应的开发模式；

FineUI版本|.Net支持|部署环境|唠叨
-|-|-|-
[FineUIPro](https://pro.fineui.com/#/grid/grid.aspx)|最高支持到<br/>.NetFramework4.5|Windows|如果你没有跨平台部署（Linux Mac）的需求,或者不熟悉.NetCore，可以选择这个版本，Asp.net对我已经很有时代感了，现在确实有的学校还在教 还是有部分人上手会快一些；
[FineUICore](https://core.fineui.com/#/Grid/Grid)|.NetCore3.1+|Windows<br/>Linux<br/>Mac|这里的写法是Core的原始MVC写法，前台cshtml使用函数式的标签,比如`F.Grid().ID(...)`,这是我目前使用的版本，对自定义扩展友好，扩展的方法可以点出来
[FineUICoreRazorPages](https://pages.fineui.com/#/Grid/Grid)|.NetCore3.1+|Windows<br/>Linux<br/>Mac|这个兼容的是RazorPages开发模式，前台是标签式的控件，`<f:Grid ID='xxx' >`，后台是 `OnGet`
[FineUICoreWebForms](http://forms.fineui.com/)|.NetCore3.1+|Windows<br/>Linux<br/>Mac|这个是独创的`WebForms`写法，前台还是标签`<f:Grid ID='xxx' >`，但是后台和Asp.net一样，就是`FineUIPro`,如果你是从`FineUIPro`升级 或 会Asp.Net但是需要跨平台的支持，就可以无痛上手这个版本

# 2. 下载

通过以上的对比后，当你看见星球的置顶下载就不会蒙圈了，下载里包括 `后台API` `前台API` `空项目` `示例源码`;`示例源码`提供所有控件的属性示例，一定要过一眼，结合API一点点调试看，基本都过一遍就行了；`空项目`是为了教会搭建，如果要使用FineUI最精简的就是空项目的示例；

首先加入星球

![](https://blog.shizhuoran.top/static/img/914d3a587f65d22f62a0f85f76c9d21c.ZSXQ_20240526_103006452.webp)

找到精华置顶
![](https://blog.shizhuoran.top/static/img/bb605a7726735a1760b5e7eac7781c4f.Screenshot_2024-05-26-10-30-29-926_com.unnoo.quan.webp)

找到版本并下载
![](https://blog.shizhuoran.top/static/img/2ce0f597f2bc8cc29503ff04078997e4.Screenshot_2024-05-26-10-29-35-357_com.unnoo.quan.webp)


---
下一篇我会从新建解决方案开始使用FineUI11开发页面并发布

---

:::info{title="相关连接"}

[FineUI初学手册（二）](https://blog.shizhuoran.top/post/49)

:::

1. FineUI11

1.1 f:Tool图标在右边

1. 首先新建一个项目，

1.1 `f:Tool`图标在右边