![splay.png](/static/img/f2b57040804585f3defd325793e72da0.splay.webp)
五一开车带着家人去旅游🚗，打开手机听歌🎵

然后一言难尽，反正服务器闲着，自己部署一个，这里做个记录，避免后人的坑；

* **系统**：阿里云Centos7
* **环境**：[Doker](https://docs.docker.com/get-docker/) & [Docker compose](https://docs.docker.com/compose/install/)
* **项目**：[SPlayer](https://github.com/imsyy/SPlayer)
* **其他**：域名 && [nginx-proxy-manager-zh](https://github.com/xiaoxinpro/nginx-proxy-manager-zh) 



# 1. 准备工作📋
## 1.1 域名 🌐
我之前申请了域名，在腾讯申请的，服务器是阿里云，在阿里云备案，拿到备案号，这步没什么坑，按照表单填写就行了，阿里也挺负责提交后有人打电话告诉你怎么填写，然后就通过了；

如果没有域名也有免费的域名（没试过）B站有教程；

然后去腾讯云域名管理添加二级域名： 控制台-我的域名-解析-记录管理-添加记录

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

## 1.2 Doker & Docker compose 📦

1. 安装docker
```
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
```
```
sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```
```
 sudo systemctl start docker
```
2. 安装 docker-compose
```
sudo curl -L "https://github.com/docker/compose/releases/download/{VERSION}/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```
```
sudo chmod +x /usr/local/bin/docker-compose
```

3. 默认网段 
    
    可能会出现IP冲突的情况 占用 172 网段，需要配置默认的IP 
    ```
    vi /etc/docker/daemon.json
    ```
    ```
    {
    "bip":"169.254.0.1/24"
    }
    //也可能是这个生效
    {
    "bip":"169.254.0.1/24",
    "default-address-pools" : [
            {  "base" : "192.168.0.0/16",
               "size" : 24      }
     ]
    }
    ```
然后重启 docker `systemctl restart docker`

## 1.3 Nginx代理 🛡️
这里的选择也挺多，我选择了 [nginx-proxy-manager-zh](https://github.com/xiaoxinpro/nginx-proxy-manager-zh) 

这里有个教程 [彻底搞懂反向代理神器Nginx Proxy Manager的配置和使用](https://www.bilibili.com/video/BV1Ws4y1A7Lk/?spm_id_from=333.999.0.0) 尽量看一遍


```
mkdir -p /home/Nginx
vim docker-compose.yml 
```
```
version: '3'
services:
  app:
    image: 'chishin/nginx-proxy-manager-zh:release'
    restart: always
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
```
`这里注意 人家给的都是 docker-compose up -d 但我的服务器上是 docker compose 不知道为什么`
```
docker compose up -d
```

nginx-proxy占用了80端口和443 端口，因为需要他SSL证书和代理；

安装完后按照教程配置SSL证书，非常方便就不截图了


# 2. 音乐项目选择 💭

我要选择一个支持doker部署(因为centos7比较老，本地编译会出问题)，带收藏夹，手机端也可以用的

我分别部署测试了以下的项目,全部基于 [NeteaseCloudMusicApi](https://github.com/radishes-music/radishes/)（违规已经不让维护了，千万不要去doker上搜🔍）


项&nbsp;目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|啰嗦
-|-
[YesPlayMusic](https://github.com/qier222/YesPlayMusic) |手机浏览没有适配，doker上 oaklight/yesplaymusic 这个比较新，支持 Last.fm，但是我就没成功过![202110142354283.png](/static/img/fdba6eadbe5625ba8499c29ce884e739.202110142354283.webp)
[R3PLAYX](https://github.com/Sherlockouo/music)|手机端倒是可以看，登录WY后显示收藏，但是没有办法维护收藏，是YesPlayMusic的二开，颜值最高![202312251127644.png](/static/img/23cd3e88b2f03268480f7bdf897a556e.202312251127644.webp)
[Radishes](https://github.com/radishes-music/radishes/)|手机浏览没有适配![home.jpg](/static/img/d03174d48b9699cf07e77573f6231b22.home.webp)
[SPlayer](https://github.com/imsyy/SPlayer)|手机端适配，有收藏夹，可以操作收藏夹![SPlayer - 主页面.jpg](/static/img/f9be4df39a5b9cbb833c96112e6563e1.SPlayer%20-%20%C3%A4%C2%B8%C2%BB%C3%A9%C2%A1%C2%B5%C3%A9%C2%9D%C2%A2.webp)





然后发现这些项目docker内部的API都有问题，过期了，NeteaseCloudMusicApi 更新的比较快

最后选择了 SPlayer 手机适配完美，而且能操作收藏夹，有时候也会暂停，

# 3. 部署 ⚙️
## 3.1 SPlayer
还是 docker-compose.yml ，注意 7899是原始端口，2221 是暴漏端口

```
version: '3'
services:
  splayer:
    image: imsyy/splayer
    container_name: splayer
    ports:
      - 2221:7899
    restart: always
```
## 3.2 netease_cloud_music_api
```
docker pull binaryify/netease_cloud_music_api
docker run -d -p 3001:3000 --name netease-music-api binaryify/netease_cloud_music_api
```

这里自己拉了一个netease_cloud_music_api，注意将服务器的3001端口开开，因为SPlayer接口基本都过期了，所有代理到 3001，



## 3.3 配置代理

域名代理
![图片.png](/static/img/73b7eda67ccf305bfc5575968ea56d6a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

因为 SPlayer 的内置API过期，这里需要转一下

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

这里说下代理配置
```
    #将当前代理/api/下的连接(就是 [:2221/api/...])转到 :3001
    #如果 返回 404 就是 :3001/... 没通，就转到 @fallback（这里@fallback是一个配置块）
    location /api/ {
        proxy_pass http://XXX:3001/;
        proxy_intercept_errors on;
        error_page 404 = @fallback;
    }
    #@fallback配置块 转到这里说明没成功，就用原始的连接 即[:2221/api/...]，:2221被域名代理了
    location @fallback {
        proxy_pass https://XXX.top$request_uri;
    }
```

项目|代理地址
-|-
YesPlayMusic|/api/
R3PLAYX|/netease/
SPlayer|/api/

---

到这就结束了，手机扫码登录后，1分钟的歌就变成3分钟了，终于可以享受🥰持久带来的快乐了(实名羡慕)！


---
参考

[彻底搞懂反向代理神器Nginx Proxy Manager的配置和使用](https://www.bilibili.com/video/BV1Ws4y1A7Lk/?spm_id_from=333.999.0.0)

[老苏的blog](https://laosu.cf/2024/01/10/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BD%91%E6%98%93%E4%BA%91%E6%92%AD%E6%94%BE%E5%99%A8Radishes/?highlight=%E9%9F%B3%E4%B9%90)

Doker部署一个SPlayer听歌

![](/static/img/f2f6d37cb67424810faf269c876df080.FineUIGridçªåºè¡.webp)

🌟分享个样式的代码，Grid列表突出某行🔍，

![选择行.gif](/static/img/bb2bb75587907e939044edb7c0813874.%C3%A9%C2%80%C2%89%C3%A6%C2%8B%C2%A9%C3%A8%C2%A1%C2%8C.gif)



## js ⌨️
``` js
//...事件
let id = 'xxx';//行ID
F.ui.Grid1.selectRow(id, { scrollTo: true });//选择行，并滚动到
F.ui.Grid1.getRowEl(id).addClass(`blink`);//新增样式 
$(`.f-grid-bodyct`).css(`overflowX`, 'hidden');//隐藏横向滚动条
//延迟删除样式 恢复 
setTimeout(() => {
    F.ui.Grid1.getRowEl(id).removeClass(`blink`);
    $(`.f-grid-bodyct`)[0].style.removeProperty('overflow-x');
}, 800);
```

## css 🎨
``` css
@@keyframes glow {
    0% {
        transform: scale(1);
        background-position: 1% 0;
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
        background-position: 110% 0;
    }
}

.blink {
    animation: glow .8s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    background-image: linear-gradient(to right, transparent, white, transparent);
    background-size: 200px 100%;
    background-repeat: no-repeat;
}
```

---
![](https://blog.shizhuoran.top/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUIGrid突出行

![文章2.png](/static/img/6408dc362890eb384cb9edafcfb985e0.%C3%A6%C2%96%C2%87%C3%A7%C2%AB%C2%A02.webp)

没事写点文章📝总结下代码，插入一些Emoji表情显得没那么无聊😏，

但是随手插入还是不方便🙅‍♂️，微软自带的检索很难匹配到🔍，gpt倒是能给我推荐一些，但是每次都要打开网页问，

我一直装着[Pot翻译](https://gitee.com/mirrors/Pot?_from=gitee_search#/mirrors/Pot/blob/master/README_EN.md)，

类似的有好多，这样的，选中文字，快捷键就可以出来



![34440c6051ad6f3bdec2d1fb52a487965d00e530.webp](/static/img/2a81e8bc9cbbb269d3cd6a08d01c2532.34440c6051ad6f3bdec2d1fb52a487965d00e530.webp)

而且还支持 openai自定义，所以就写了一个Emoji表情助手📚

这样配置

![4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp](/static/img/e2b81dd0da4a8309872025769af4e1be.4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp)
图片
图片800×600 41.9 KB

密钥自己写

图片

![5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp](/static/img/11c50c111a5f94e48cde0fe34ecbb2a7.5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp)
效果如下
图片

![c7386e73f153d77b8765216741f48d034734e0f1.png](/static/img/7c2f6a09372527e6d6cb4f8e96ab462d.c7386e73f153d77b8765216741f48d034734e0f1.webp)

写可以加上 “只输出一个最匹配的Emoji表情即可，不要输出其他内容” 的字样，这样就可以直接复制📋了

Pot翻译增加Emoji表情”翻译” 

![我的画板 by fabritor.png](/static/img/71cda4c275ee1308bd02b3721a04a374.%C3%A6%C2%88%C2%91%C3%A7%C2%9A%C2%84%C3%A7%C2%94%C2%BB%C3%A6%C2%9D%C2%BF%20by%20fabritor.webp)
# 1. 引出问题🤔

在写一个父子页面交互的事件时遇到了一个问题，环境是`FineUICore`，子页面用`window`的`IFrame`，在window执行保存后，需要执行父页面的赋值方法；

比如 `F.ui.tbxProvince.setValue('结果');`,这里直接写的js，其实在后台是 `UIHelper.TextBox("tbxProvince").Text(province);` 这两个效果是一样的

但是在子页面直接执行 `F.ui.tbxProvince` 是找不到😕的，子页面没这个控件，所以要在父页面调用，可以这样写



``` javascript
F.getActiveWindow().window.F.ui.tbxProvince.setValue('结果');
```

`F.getActiveWindow().window`就是激活这个窗口的window对象，

在后台我将 `F.ui.tbxProvince.setValue('结果');` 封装为一个方法，比如 `SetText`

``` c#
public async Task SetText(string value)
{
    var script = $"F.ui['tbxProvince'].setText('{value}');";
    PageContext.RegisterStartupScript(script);
}
```

如果加上 `F.getActiveWindow().window`  就要重写📝 ，或给 `SetText`增加参数，比如👇
``` c#
public async Task WindowSetText(string value)
{
    var script = $"F.getActiveWindow().window.F.ui['tbxProvince'].setText('{value}');";
    PageContext.RegisterStartupScript(script);
}
```

在调用时，
``` c#
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Window1_Close()
{
    await WindowSetText('结果');
    return UIHelper.Result();
}
```

这里我认为 `SetText` 和 `WindowSetText` 是干的一件事：`setText`，只不过作用域（作用域这个词可能不准确）不一样，同一件事写两个地方，维护是不方便的；同样如果给 `SetText`增加一个参数来定义作用域也不好，这个样`SetText`对外也是破坏性的

# 2. 另一种思路💡

既然作用域不一样，那我就声明一个`作用域`，让`SetText`判断当前在哪个`作用域`下，从而执行不一样的行为；

比如我想写成这样👇

``` c#
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Window1_Close()
{
    //告诉内部的代码生成js时应该加上 F.getActiveWindow().window.
    await ActiveWindow(async () =>
    {
        SetText(province);
    });
    return UIHelper.Result();
}
```

`SetText` 中如何得到 `ActiveWindow` 从而判断呢，这个我倒是经常用✅ 直接让GPT优化了下
``` c#
public bool IsMethodActiveWindowCalledInCallStack()
{
    StackTrace stackTrace = new StackTrace();
    StackFrame[] stackFrames = stackTrace.GetFrames();
    
    //这里要遍历向上找，因为异步
    return stackFrames?.Any(frame => frame.GetMethod()?.Name.Contains("ActiveWindow") ?? false) ?? false;
}
```
`SetText`写成这样
``` c#
 public async Task SetText(string value)
 {
     var top = IsMethodActiveWindowCalledInCallStack() ? "F.getActiveWindow().window." : "";
     var script = $"{top}F.ui['tbxProvince'].setText('{value}');";
     PageContext.RegisterStartupScript(script);
 }
```

# 3. 思考💭
这里是一个例子，实际上不是为了写个简单的✨`SetText`，而是为了写方法提供的一个思路🧠，

简单的`GetFrames`也会消耗性能，在FineUI中父子页面交互 通过 `ActiveWindow.GetWriteBackValueReference` 和 `PageContext.RegisterStartupScript` 配合使用，

像输出的js增加一个头 `F.getActiveWindow().window.` 的这种例子 应该写到` PageContext.RegisterStartupScript`中 或更底层🔨，

C#方法判断调用对象

好久没有做内容了，手痒痒，找个控件说说，放点代码

# 1. 简介
昨天开发用到了步骤条 Step，长这样：

![图片.png](/static/img/f59c753e0081b11bfc8b32ab71f3fada.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
时使用时代码
![图片.png](/static/img/bf4f8d9f93d5add78f6864903c0f9100.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)


# 2. 扩展控件
这里的 `F.Step` 是改造的 Panel 控件，Panel就当是个div，修改了渲染 `OnFirstPreRender`，抛出了自定义的html和js，就成步骤条了， 那么如何像 `F.Panel` 那样 写一个前台的控件呢

## 2.1 继承 Panel
第一步就是继承 `FineUICore.Panel `，重写 `OnFirstPreRender` ，首先看一下 FineUICore 自己的 Panel怎么写的 
```
namespace FineUICore;

//
// 摘要:
//     面板控件
public class Panel : CollapsablePanel
{
    //
    // 摘要:
    //     渲染 HTML 之前调用（页面第一次加载或者普通回发）
    protected override void OnFirstPreRender()
    {
        base.OnFirstPreRender();
        string scriptContent = $"var {A()}=new F.Panel({d().ToString()});{GlobalConfig.B()}";
        AddStartupScript(scriptContent);
    }
}
``` 
这是反编译后的结果，代码很简单，就是 输出了一段js `new F.Panel` ，所以写的类 Step 只要重写 `OnFirstPreRender` 就行了

```
/// <summary>
///
/// </summary>
public class Step : Panel
{
	/// <summary>
	/// 第一次绘制
	/// </summary>
	protected override void OnFirstPreRender()
	{
		base.OnFirstPreRender();
	}
}
```
还需要一个类 继承 `CollapsablePanelExtension`，前台的 `F.Panel` 就是一个 `PanelExtension` 实例，继承的`CollapsablePanelExtension`，写法如下
```
/// <summary>
/// 步骤条控件
/// </summary>
public class StepExtension : CollapsablePanelExtension<Step, StepExtension>
{
	/// <summary>
	/// 步骤条控件
	/// </summary>
	private Step _source = null;
	
	/// <summary>
	/// 步骤条控件
	/// </summary>
	/// <param name="source"></param>
	public StepExtension(Step source) : base(source)
	{
		_source = source;
	}
}
```
## 2.2 扩展 UIExtension
现在 `StepExtension` 还不能用，我们要再包一下，在cshtml能点出来，需要给 `FineUICore.UIExtension` 扩展，这里也可以查看 F.Panel 不贴出来了，其实它是一个 `IHtmlHelper`，像这样
```
/// <summary>
///
/// </summary>
/// <param name="helperr"></param>
/// <returns></returns>
public static StepExtension Step(this UIExtension<dynamic, dynamic> helperr)
{
	StepExtension r = new StepExtension(new FineUICore.Step());
	return r;
}
```

## 2.3 增加方法和属性
到这里 cshtml 就可以点出来了，`F.Step()` 它继承了Panel的所有属性和方法；
现在可以添加自己的属性了，这里来梳理下，
① 比如我要加一个 StepActive 方法，前端想这么写 `F.Setp().StepActive(1)`，那其实就是 `StepExtension` ，给它加个方法就行了 StepActive()，
② `StepExtension`  中有个实例 `_source` ，将`StepActive`的参数值，赋值到实例 `_source` 中，
③ 最后在`OnFirstPreRender`进行前台的响应，

<div class="mermaid">
sequenceDiagram
    participant 前台
    participant StepExtension
    participant Step
    前台->>StepExtension: F.Setp().StepActive(1)
    StepExtension->>StepExtension: StepActive(index)
    StepExtension->>Step: _source.index = index
    Step->>前台: OnFirstPreRender(_source.index)

</div>

```
/// <summary>
/// 步骤条控件
/// </summary>
public class StepExtension : CollapsablePanelExtension<Step, StepExtension>
{
	/// <summary>
	/// 步骤条控件
	/// </summary>
	private Step _source = null;
	
	/// <summary>
	/// 步骤条控件
	/// </summary>
	/// <param name="source"></param>
	public StepExtension(Step source) : base(source)
	{
		_source = source;
	}
	
	/// <summary>
	/// 步骤
	/// </summary>
	/// <param name="index"></param>
	/// <returns></returns>
	public StepExtension StepActive(int index)
	{
		_source.stepActive = index;
		return this;
	}
}
```
```
/// <summary>
///
/// </summary>
public class Step : Panel
{

	/// <summary>
	/// 当前激活的序号
	/// </summary>
	private int _stepActive = 0;

	/// <summary>
	/// 当前激活的序号
	/// </summary>
	public int stepActive
	{
		get { return _stepActive; }
		set
		{
			_stepActive = value;
		}
	}

	/// <summary>
	/// 第一次绘制
	/// </summary>
	protected override void OnFirstPreRender()
	{
        StringBuilder sb = new StringBuilder();
        sb.Append($"this.stepActive = {stepActive};");
		this.Listeners.Add(new FineUICore.Listener("render", sb.ToString()));
		base.OnFirstPreRender();
	}
}
```
> 注意这里的`OnFirstPreRender` 将输出的内容写在了render事件中，因为本身这里的this就是一个panel实例，所以可以这么写，这里还可以设置panel的默认参数

# 3. 完整代码
剩下就是前端的事了，这里放出完整的代码，
## c#部分
```

	#region Step步骤控件 基于Grid 卡片

	/// <summary>
	/// 步骤条控件
	/// </summary>
	public class StepExtension : CollapsablePanelExtension<Step, StepExtension>
	{
		/// <summary>
		/// 步骤条控件
		/// </summary>
		private Step _source = null;

		/// <summary>
		/// 步骤条控件
		/// </summary>
		/// <param name="source"></param>
		public StepExtension(Step source) : base(source)
		{
			_source = source;

			//默认值
			_source.ShowBorder = false;
			_source.ShowHeader = false;

			//_source.CssClass = "f-step";

			_source.stepActive = 0;
		}

		/// <summary>
		/// 数据源
		/// </summary>
		/// <param name="data"></param>
		/// <returns></returns>
		public StepExtension DataSource(IEnumerable<StepItem> data)
		{
			_source.DataSource = data;
			return this;
		}

		/// <summary>
		/// 步骤
		/// </summary>
		/// <param name="index"></param>
		/// <returns></returns>
		public StepExtension StepActive(int index)
		{
			_source.stepActive = index;
			return this;
		}

		/// <summary>
		/// 是否显示说明
		/// </summary>
		/// <param name="b"></param>
		/// <returns></returns>
		public StepExtension ShowBody(bool b)
		{
			_source.showBody = b;
			return this;
		}
	}

	/// <summary>
	///
	/// </summary>
	public class Step : Panel
	{
		/// <summary>
		/// 当前激活的序号
		/// </summary>
		private int _stepActive = 0;

		/// <summary>
		/// 当前激活的序号
		/// </summary>
		public int stepActive
		{
			get { return _stepActive; }
			set
			{
				_stepActive = value;
			}
		}

		/// <summary>
		/// 数据源
		/// </summary>
		public IEnumerable<StepItem> DataSource { get; set; } = new List<StepItem>();

		/// <summary>
		/// 是否显示明细
		/// </summary>
		public bool showBody { get; set; } = true;

		/// <summary>
		/// 第一次绘制
		/// <para>不能变更的属性在这里</para>
		/// </summary>
		protected override void OnFirstPreRender()
		{
			this.CssClass += " f-step";

			StringBuilder sbel = new StringBuilder();
			sbel.Append($"<ul>");
			for (int i = 0; i < DataSource.Count(); i++)
			{
				var item = DataSource.ToList()[i];
				sbel.Append($"<li class='f-grid-card-row' data-stepId='{item.Id}'>");
				sbel.Append($"<div class='f-step-card' data-step='{i}'>");

				sbel.Append($"<div class='f-step-head'>");
				sbel.Append($" <div class='f-step-icon'>");
				sbel.Append($" <div class='f-step-num'>");
				sbel.Append($"{i + 1}");
				sbel.Append($" </div>");
				sbel.Append($" <div class='f-step-icon-finish f-iconfont-correct'>");
				sbel.Append($" </div>");
				sbel.Append($" </div>");
				sbel.Append($" <div class='f-step-line'>");
				sbel.Append($" </div>");
				sbel.Append($"</div>");

				sbel.Append($"<div class='f-step-main'>");
				sbel.Append($" <div class='f-step-title'>");
				sbel.Append($" {item.Title}");
				sbel.Append($" </div>");
				sbel.Append($" <div class='f-step-des'>");
				sbel.Append($" {item.TextBody}");
				sbel.Append($" </div>");
				sbel.Append($"</div>");

				sbel.Append($"</div>");
				sbel.Append($"</li>");
			}
			sbel.Append($"</ul>");

			this.Content = sbel.ToString();

			StringBuilder sb = new StringBuilder();
			sb.Append($"this.stepActive = {stepActive};");
			sb.Append($"this.showBody = {showBody.ToString().ToLower()};");
			sb.Append($"this.data = {JArray.FromObject(DataSource).ToString()};");
			this.Listeners.Add(new FineUICore.Listener("render", sb.ToString()));
			base.OnFirstPreRender();
		}
	}

	/// <summary>
	/// 项 ID可忽略
	/// </summary>
	public class StepItem
	{
		/// <summary>
		/// ID
		/// </summary>
		public string Id { get; set; }

		/// <summary>
		/// 标题
		/// </summary>
		public string Title { get; set; }

		/// <summary>
		/// 内容
		/// </summary>
		public string TextBody { get; set; }
	}

	#endregion Step步骤控件 基于Grid 卡片

```

## js部分
```
//Panel控件
if (F.Panel) {
	//步骤条订制
	F.Panel.prototype.__stepActive = -1;
	Object.defineProperty(F.Panel.prototype, "stepActive", {
		/**
		 * 从0开始
		 * @@param {number} val
		 */
		set(val) {
			//设置当前激活的 序号
			//无效的样式是 f-state-disabled
			//完成的样式是 f-step-finish
			//后面的 f-step-card 无效
			//当前的 f-step-line 无效
			//前面的 f-step-card 完成
			const t = this;
			let el = t.el.find(`.f-step-card[data-step="${val}"]`);
			//一共几步
			let count = t.el.find(`.f-step-card`).length;
			if (val < 0 || this.__stepActive == val) return;
			while (val > count) {
				val = val - count - 1;
			}
			//重置
			t.el.find(`.f-step-finish`).removeClass("f-step-finish");
			t.el.find(`.f-state-disabled`).removeClass("f-state-disabled");
			for (let i = val + 1; i < count; i++) {
				let nextel = t.el.find(`.f-step-card[data-step="${i}"]`);
				nextel.addClass("f-state-disabled");
			}
			for (let i = 0; i < val; i++) {
				t.el.find(`.f-step-card[data-step="${i}"]`).addClass("f-step-finish");
			}
			el.find(".f-step-line").addClass("f-state-disabled");
			this.__stepActive = val;
			this.trigger("stepChange", []);
		},
		get() {
			return this.__stepActive;
		}
	});
	//监听 showBody 控制是否显示明细
	F.Panel.prototype.__showBody = true;
	Object.defineProperty(F.Panel.prototype, "showBody", {
		/**
		 * @@param {boolean} val
		 */
		set(val) {
			const t = this;
			let el = t.el.find(`.f-step-card .f-step-des`);
			if (!val) {
				el.addClass("f-hidden");
			} else {
				el.removeClass("f-hidden");
			}
			this.__showBody = val;
		},
		get() {
			return this.__showBody;
		}
	});
}
```
## css部分
```
/*步骤条样式*/
.f-step ul {
	display: flex;
	counter-reset: index;
	padding: 20px;
}

.f-step li.f-grid-card-row {
	transition: all .3s;
	border: none;
	border-bottom: 0px solid;
	border-left: 0px solid;
	border-radius: 0px;
	margin: 0px;
	padding: 0px;
	flex: 1;
	min-width: unset;
	display: inline-block;
	position: relative;
}

.f-step li.f-grid-card-row.f-state-active,
.f-step li.f-grid-card-row.f-grid-row-selected,
.f-step li.f-grid-card-row.f-state-hover {
	background: unset;
	color: unset;
}

.f-step .f-step-card {
	transition: all .3s;
}

.f-step .f-step-head {
	display: flex;
}

/*编号*/
.f-step .f-step-head .f-step-num {
	font-size: 16px;
	line-height: 18px;
	text-align: center;
	height: 20px;
	width: 20px;
	border: 1px solid;
	border-radius: 50%;
}

.f-step .f-step-head .f-step-icon {
	height: 20px;
	width: 20px;
	margin: 0px 10px;
}

/*线*/
.f-step .f-step-line {
	border-top: 2px solid;
	margin: 0px;
	flex: 1;
	margin-top: 8px;
	transition: all .3s;
}

/*最后一个横线不显示*/
.f-step li:last-of-type .f-step-line {
	display: none;
}

/*身子*/
.f-step .f-step-main {
	margin-top: 8px;
	padding: 2px;
}

.f-step .f-step-main .f-step-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
}

/*完成*/
.f-step .f-step-icon-finish {
	opacity: 0;
	position: absolute;
	transition: opacity .3s;
	display: inline-block;
	font: normal normal normal 16px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-indent: 0;
	min-width: 16px;
	overflow: hidden;
	background-repeat: no-repeat;
	line-height: 20px;
	font-family: "iconfont";
}

.f-step .f-step-num {
	opacity: 1;
	top: 0px;
	position: absolute;
	transition: all .3s;
}

.f-step .f-step-finish .f-step-num {
	opacity: 0;
	top: -10px;
}

.f-step .f-step-finish .f-step-icon-finish {
	opacity: 1;
}

/*步骤条样式 结束*/
```