import win.ui;
import dotNet.AntdUI;
import dotNet;
/*DSG{{*/
var winform = win.form(text="AntdUI Steps / Timeline";right=1120;bottom=680;border="thin")
winform.add(
custom_base={cls="custom";left=0;top=0;right=1122;bottom=680;ah=1;aw=1;db=1;disabled=1;dl=1;dr=1;dt=1;hide=1;z=1};
custom_btn_error={cls="custom";left=875;top=172;right=995;bottom=212;dr=1;dt=1;z=6};
custom_btn_milestone={cls="custom";left=875;top=222;right=1055;bottom=262;dr=1;dt=1;z=7};
custom_btn_next={cls="custom";left=875;top=122;right=995;bottom=162;dr=1;dt=1;z=5};
custom_btn_prev={cls="custom";left=875;top=72;right=995;bottom=112;dr=1;dt=1;z=4};
custom_lbl_steps_status={cls="custom";left=28;top=168;right=835;bottom=205;dl=1;dr=1;dt=1;z=8};
custom_steps={cls="custom";left=28;top=70;right=835;bottom=155;dl=1;dr=1;dt=1;z=3};
custom_timeline={cls="custom";left=28;top=295;right=835;bottom=630;db=1;dl=1;dr=1;dt=1;z=10};
custom_title_steps={cls="custom";left=28;top=20;right=340;bottom=55;dl=1;dt=1;z=2};
custom_title_timeline={cls="custom";left=28;top=245;right=360;bottom=280;dl=1;dt=1;z=9}
)
/*}}*/
// Message.success 需要一个 AntdUI 窗体或控件作为归属对象。
var baseForm = AntdUI.BaseForm();
baseForm.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
baseForm.Dock = System.Windows.Forms.DockStyle.Fill;
dotNet.setParent(baseForm, winform.custom_base);
// ---------- 公共字体 ----------
var fontTitle = System.Drawing.Font("Microsoft YaHei", 14, System.Drawing.FontStyle.Bold);
var fontNormal = System.Drawing.Font("Microsoft YaHei", 10);
var fontTip = System.Drawing.Font("Microsoft YaHei", 9);
// ---------- 工具函数 ----------
var showSuccess = function(text){
AntdUI.Message.success(baseForm, text);
}
var addHostLabel = function(host,text,font){
var label = AntdUI.Label(host);
label.Text = text;
label.Font = font || fontNormal;
label.Dock = System.Windows.Forms.DockStyle.Fill;
return label;
}
var setStepsStatusText;
// ---------- 标题 ----------
addHostLabel(winform.custom_title_steps,"Steps",fontTitle);
addHostLabel(winform.custom_title_timeline,"Timeline",fontTitle);
// ---------- Steps 步骤条 ----------
var steps = AntdUI.Steps(winform.custom_steps);
steps.Dock = System.Windows.Forms.DockStyle.Fill;
steps.Font = fontNormal;
steps.Vertical = false;
steps.Current = 1;
steps.Status = AntdUI.TStepState.Process;
steps.Gap = 6;
steps.MilestoneMode = false;
steps.MilestoneCurrentCompleted = false;
// 只设置 Title,不设置 SubTitle / Description。
// 描述文字放到下方 lblStepsStatus 里展示。
var stepAccount = AntdUI.StepsItem("Account ");
var stepVerify = AntdUI.StepsItem("Verify ");
var stepPay = AntdUI.StepsItem("Payment ");
var stepDone = AntdUI.StepsItem("Done ");
stepAccount.Name = "account";
stepVerify.Name = "verify";
stepPay.Name = "payment";
stepDone.Name = "done";
steps.Items.Add(stepAccount);
steps.Items.Add(stepVerify);
steps.Items.Add(stepPay);
steps.Items.Add(stepDone);
// 单独维护步骤说明,避免占用 Steps 内部连接线布局。
var stepDescriptions = [
"Create account",
"Verify identity information",
"Complete payment",
"Order finished"
];
var lblStepsStatus = AntdUI.Label(winform.custom_lbl_steps_status);
lblStepsStatus.Font = fontTip;
lblStepsStatus.ForeColor = 0xFF666666;
lblStepsStatus.Dock = System.Windows.Forms.DockStyle.Fill;
setStepsStatusText = function(){
var statusName = tostring(steps.Status);
var modeText = steps.MilestoneMode ? "Milestone" : "Normal";
var currentTitle = steps.Items.get_Item(steps.Current).Title;
var desc = stepDescriptions[steps.Current + 1] || "";
lblStepsStatus.Text = "Current: " + tostring(steps.Current + 1)
+ " / " + tostring(steps.Items.Count)
+ " Step: " + currentTitle
+ " Status: " + statusName
+ " Mode: " + modeText
+ " Description: " + desc;
}
setStepsStatusText();
steps.ItemClick = function(sender,e){
var item = e.get_Item();
if(!item) return;
// 不要用 sender.Items[i] 遍历 .NET 集合,容易索引混淆。
// 这里使用 .NET 集合自身的 IndexOf。
var index = sender.Items.IndexOf(item);
if(index >= 0){
sender.Current = index;
}
sender.Status = AntdUI.TStepState.Process;
setStepsStatusText();
showSuccess("Step clicked: " + item.Title);
}
// ---------- Steps 控制按钮 ----------
var btnPrev = AntdUI.Button(winform.custom_btn_prev);
btnPrev.Text = "Previous";
btnPrev.Font = fontNormal;
btnPrev.Dock = System.Windows.Forms.DockStyle.Fill;
btnPrev.Click = function(sender,e){
if(steps.Current > 0){
steps.Current--;
steps.Status = AntdUI.TStepState.Process;
setStepsStatusText();
showSuccess("Previous step");
}
}
var btnNext = AntdUI.Button(winform.custom_btn_next);
btnNext.Text = "Next";
btnNext.Font = fontNormal;
btnNext.Type = AntdUI.TTypeMini.Primary;
btnNext.Dock = System.Windows.Forms.DockStyle.Fill;
btnNext.Click = function(sender,e){
if(steps.Current < steps.Items.Count - 1){
steps.Current++;
steps.Status = AntdUI.TStepState.Process;
setStepsStatusText();
showSuccess("Next step");
}
else {
steps.Status = AntdUI.TStepState.Finish;
setStepsStatusText();
showSuccess("All steps finished");
}
}
var btnError = AntdUI.Button(winform.custom_btn_error);
btnError.Text = "Set Error";
btnError.Font = fontNormal;
btnError.Type = AntdUI.TTypeMini.Error;
btnError.Dock = System.Windows.Forms.DockStyle.Fill;
btnError.Click = function(sender,e){
steps.Status = AntdUI.TStepState.Error;
setStepsStatusText();
showSuccess("Current step status changed to Error");
}
var btnMilestone = AntdUI.Button(winform.custom_btn_milestone);
btnMilestone.Text = "Toggle Milestone";
btnMilestone.Font = fontNormal;
btnMilestone.Dock = System.Windows.Forms.DockStyle.Fill;
btnMilestone.Click = function(sender,e){
steps.MilestoneMode = !steps.MilestoneMode;
steps.MilestoneCurrentCompleted = steps.MilestoneMode;
setStepsStatusText();
showSuccess(steps.MilestoneMode ? "Milestone mode enabled" : "Normal steps mode");
}
// ---------- Timeline 时间轴 ----------
var timeline = AntdUI.Timeline(winform.custom_timeline);
timeline.Dock = System.Windows.Forms.DockStyle.Fill;
timeline.Font = fontNormal;
timeline.FontDescription = fontTip;
timeline.Gap = 18;
// 添加时间轴项目:TimelineItem(text, description)
var timeCreated = AntdUI.TimelineItem(
"Project created",
"2026-06-03 09:00 Create project and initialize repository"
);
timeCreated.Type = AntdUI.TTypeMini.Success;
var timeCommit = AntdUI.TimelineItem(
"First commit",
"2026-06-03 09:30 Add basic UI layout"
);
timeCommit.Type = AntdUI.TTypeMini.Primary;
var timeBuild = AntdUI.TimelineItem(
"Build warning",
"2026-06-03 10:00 Some optional resources are missing"
);
timeBuild.Type = AntdUI.TTypeMini.Warn;
var timeDeploy = AntdUI.TimelineItem(
"Deploy failed",
"2026-06-03 10:30 Remote server returned an error"
);
timeDeploy.Type = AntdUI.TTypeMini.Error;
var timeDone = AntdUI.TimelineItem(
"Fixed and deployed",
"2026-06-03 11:20 Fix configuration and deploy successfully"
);
timeDone.Type = AntdUI.TTypeMini.Success;
timeDone.Fill = 0xFF52C41A;
timeline.Items.Add(timeCreated);
timeline.Items.Add(timeCommit);
timeline.Items.Add(timeBuild);
timeline.Items.Add(timeDeploy);
timeline.Items.Add(timeDone);
timeline.ItemClick = function(sender,e){
var item = e.get_Item();
if(item){
showSuccess("Timeline clicked: " + item.Text);
}
}
winform.show();
win.loopMessage();
下期预告:DatePicker日期选择器控件的创建