feat:开始页面中新增必读栏目，对插件分类和依赖管理进行说明。

src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts

@@ -151,6 +151,7 @@ export class GettingStartedPage extends EditorPane {
 
 	private hasScrolledToFirstCategory = false;
 	private recentlyOpenedList?: GettingStartedIndexList<RecentEntry>;
+	private requiredList?: GettingStartedIndexList<RecentEntry>;
 	private startList?: GettingStartedIndexList<IWelcomePageStartEntry>;
 	private gettingStartedList?: GettingStartedIndexList<IResolvedWalkthrough>;
 	private featuredExtensionsList?: GettingStartedIndexList<IFeaturedExtension>;
@@ -372,6 +373,15 @@ export class GettingStartedPage extends EditorPane {
 				this.runSkip();
 				break;
 			}
+			case 'openDetails': {
+				this.makeCategoryVisibleWhenAvailable('requiredReading', 'getExtensions');
+				break;
+			}
+			case 'installDependency': {
+				// this.makeCategoryVisibleWhenAvailable('Setup', 'findLanguageExtensions');
+				this.commandService.executeCommand('workbench.action.openWalkthrough', { category: 'requiredReading', step: 'installDependency' }, true);
+				break;
+			}
 			case 'showMoreRecents': {
 				this.commandService.executeCommand(OpenRecentAction.ID);
 				break;
@@ -797,6 +807,7 @@ export class GettingStartedPage extends EditorPane {
 		const rightColumn = $('.categories-column.categories-column-right', {},);
 
 		const startList = this.buildStartList();
+		const requiredList = this.buildRequiredList();
 		const recentList = this.buildRecentlyOpenedList();
 		const featuredExtensionList = this.buildFeaturedExtensionsList();
 		const gettingStartedList = this.buildGettingStartedWalkthroughsList();
@@ -835,12 +846,15 @@ export class GettingStartedPage extends EditorPane {
 
 		const layoutRecentList = () => {
 			if (this.container.classList.contains('noWalkthroughs') && this.container.classList.contains('noExtensions')) {
-				recentList.setLimit(10);
-				reset(leftColumn, startList.getDomElement());
-				reset(rightColumn, recentList.getDomElement());
+				recentList.setLimit(5);
+				// reset(leftColumn, startList.getDomElement());
+				// reset(rightColumn, recentList.getDomElement());
+				reset(leftColumn, startList.getDomElement(), requiredList.getDomElement());
+				reset(rightColumn, recentList.getDomElement(), gettingStartedList.getDomElement());
 			} else {
 				recentList.setLimit(5);
-				reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
+				// reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
+				reset(leftColumn, startList.getDomElement(), recentList.getDomElement(), requiredList.getDomElement());
 			}
 		};
 
@@ -1004,6 +1018,46 @@ export class GettingStartedPage extends EditorPane {
 		return startList;
 	}
 
+	/**
+	*build Required List
+	*RecentEntry here is meaningless, just borrowed to display the contents of empty.
+	*If you really want to display the RequiredList as a list later, you need to create an entry to render the HTMLElement.
+	*/
+	private buildRequiredList(): GettingStartedIndexList<RecentEntry> {
+		//This code doesn't make sense
+		const renderTips = (entry: RecentEntry) => {
+			const li = $('li');
+			const span = $('span');
+			span.innerText = 'test';
+			span.title = 'test2';
+			li.appendChild(span);
+			return li;
+		};
+
+		if (this.requiredList) { this.requiredList.dispose(); }
+		const requiredList = this.requiredList = new GettingStartedIndexList(// fit GettingStartedIndexList class
+			{
+				title: localize('requiredTitle', "必读"),
+				klass: 'required-container',
+				limit: 10,//Meaningless code
+				empty: $('.empty-required', {},
+					$('p', {}, localize('tipsMsg1', "如何检索到KylinIDETeam开发适配的插件？Kylin-Code默认接入OpenVSX插件商店，在Kylin-Code中可以使用插件检索列表找到KylinIDETeam开发、适配、上传到openVSX中的插件；也可以在插件详情页面找到openKylin社区插件仓库的链接。"),
+						$('button.button-link', { 'x-dispatch': 'openDetails' }, localize('openDetails', "详情."))
+					),
+					$('p', {}, localize('tipsMsg2', "有些插件在安装后，还需要安装一些操作系统软件才能够正常使用。对于KylinIDETeam开发适配的插件，为简化此操作，请安装Kylin-Code插件依赖管理器,这个插件的使用方法见依赖管理器插件详情页。部分情况该插件依赖管理器无法处理，仍需要用户根据提示自行安装。"),
+						$('button.button-link', { 'x-dispatch': 'installDependency' }, localize('installDependency', "详情."))
+					)
+				),
+				renderElement: renderTips,//Meaningless code
+				contextService: this.contextService
+			});
+		//register button click event
+		requiredList.onDidChange(() => this.registerDispatchListeners());
+		//Parameter array is empty, only display empty content
+		requiredList.setEntries([]);
+		return requiredList;
+	}
+
 	private buildGettingStartedWalkthroughsList(): GettingStartedIndexList<IResolvedWalkthrough> {
 
 		const renderGetttingStaredWalkthrough = (category: IResolvedWalkthrough): HTMLElement => {
@@ -1069,7 +1123,7 @@ export class GettingStartedPage extends EditorPane {
 			{
 				title: localize('walkthroughs', "Walkthroughs"),
 				klass: 'getting-started',
-				limit: 5,
+				limit: 3,
 				footer: $('span.button-link.see-all-walkthroughs', { 'x-dispatch': 'seeAllWalkthroughs', 'tabindex': 0 }, localize('showAll', "More...")),
 				renderElement: renderGetttingStaredWalkthrough,
 				rankElement: rankWalkthrough,
@@ -1153,6 +1207,7 @@ export class GettingStartedPage extends EditorPane {
 		this.detailsPageScrollbar?.scanDomNode();
 
 		this.startList?.layout(size);
+		this.requiredList?.layout(size);
 		this.gettingStartedList?.layout(size);
 		this.featuredExtensionsList?.layout(size);
 		this.recentlyOpenedList?.layout(size);

src/vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent.ts

@@ -262,8 +262,8 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
 				// {
 				// 	id: 'videoTutorial',
 				// 	title: localize('gettingStarted.videoTutorial.title', "Watch video tutorials"),
-				// 	description: localize('gettingStarted.videoTutorial.description.interpolated', "Watch the first in a series of short & practical video tutorials for Kylin-IDE's key features.\n{0}", Button(localize('watch', "Watch Tutorial"), 'https://aka.ms/vscode-getting-started-video')),
-				// 	media: { type: 'svg', altText: 'Kylin-IDE Settings', path: 'learn.svg' },
+				// 	description: localize('gettingStarted.videoTutorial.description.interpolated', "Watch the first in a series of short & practical video tutorials for Kylin-Code's key features.\n{0}", Button(localize('watch', "Watch Tutorial"), 'https://aka.ms/vscode-getting-started-video')),
+				// 	media: { type: 'svg', altText: 'Kylin-Code Settings', path: 'learn.svg' },
 				// }
 			]
 		}
@@ -482,5 +482,44 @@ export const walkthroughs: GettingStartedWalkthroughContent = [
 				},
 			]
 		}
+	},
+	{
+		id: 'requiredReading',
+		title: localize('gettingStarted.requiredReading.title', "必读"),
+		description: localize('gettingStarted.requiredReading.description', "怎样获取KylinIDETeam开发的插件以及插件依赖管理的使用"),
+		icon: setupIcon,
+		isFeatured: false,
+		content: {
+			type: 'steps',
+			steps: [
+				{
+					id: 'getExtensions',
+					title: localize('gettingStarted.getExtensions.title', "如何检索到KylinIDETeam开发适配的插件？"),
+					description: localize('gettingStarted.getExtensions.description', "Kylin-Code默认接入OpenVSX插件商店，在Kylin-Code中可以使用插件检索列表找到KylinIDETeam开发、适配、上传到openVSX中的插件。"),
+
+					media: {
+						type: 'image', altText: '如何检索KylinIDETeam开发适配插件', path: 'ext-category.png'
+					}
+				},
+				{
+					id: 'extDownloadUrl',
+					title: localize('gettingStarted.extDownloadUrl.title', "KylinIDETeam开发适配的插件显示社区插件仓库链接"),
+					description: localize('gettingStarted.extDownloadUrl.description', "KylinIDETeam开发的插件详情页面找到openKylin社区插件仓库的链接。"),
+
+					media: {
+						type: 'image', altText: 'KylinIDETeam开发适配的插件显示社区插件仓库链接', path: 'downloadurl.png'
+					}
+				},
+				{
+					id: 'installDependency',
+					title: localize('gettingStarted.installDependency.title', "插件依赖管理的安装"),
+					description: localize('gettingStarted.installDependency.description', "有些插件在安装后，还需要安装一些操作系统软件才能够正常使用。对于KylinIDETeam开发适配的插件，为简化此操作，请安装Kylin-Code插件依赖管理器。\n{0}\n使用方法见Kylin-Code插件依赖管理器详情页。部分情况该插件依赖管理器无法处理，仍需要用户根据提示自行安装。", Button(localize('installDependencyBtn', "安装extension-dependency插件"), 'command:workbench.extensions.search?%22@id:KylinIDETeam.extension-dependency%22')),
+					completionEvents: ['onCommand:workbench.extensions.search'],
+					media: {
+						type: 'image', altText: '插件依赖管理的安装', path: 'ext-dep.png'
+					}
+				},
+			]
+		}
 	}
 ];