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

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

@@ -143,6 +143,7 @@ export class GettingStartedPage extends EditorPane {
 	private recentlyOpened: Promise<IRecentlyOpened>;
 	private hasScrolledToFirstCategory = false;
 	private recentlyOpenedList?: GettingStartedIndexList<RecentEntry>;
+	private requiredList?: GettingStartedIndexList<RecentEntry>;
 	private startList?: GettingStartedIndexList<IWelcomePageStartEntry>;
 	private gettingStartedList?: GettingStartedIndexList<IResolvedWalkthrough>;
 
@@ -357,6 +358,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;
@@ -753,6 +763,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 gettingStartedList = this.buildGettingStartedWalkthroughsList();
 
@@ -765,13 +776,15 @@ export class GettingStartedPage extends EditorPane {
 		const layoutLists = () => {
 			if (gettingStartedList.itemCount) {
 				this.container.classList.remove('noWalkthroughs');
-				reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
+				// reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
-				reset(rightColumn, gettingStartedList.getDomElement());
+				reset(leftColumn, startList.getDomElement(), requiredList.getDomElement());
+				reset(rightColumn, recentList.getDomElement(), gettingStartedList.getDomElement());
 				recentList.setLimit(5);
 			}
 			else {
 				this.container.classList.add('noWalkthroughs');
-				reset(leftColumn, startList.getDomElement());
+				// reset(leftColumn, startList.getDomElement());
+				reset(leftColumn, startList.getDomElement(), requiredList.getDomElement());
 				reset(rightColumn, recentList.getDomElement());
 				recentList.setLimit(10);
 			}
@@ -946,6 +959,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-IDE默认接入OpenVSX插件商店，在Kylin-IDE中可以使用插件检索列表找到KylinIDETeam开发、适配、上传到openVSX中的插件；也可以在插件详情页面找到openKylin社区插件仓库的链接。"),
+						$('button.button-link', { 'x-dispatch': 'openDetails' }, localize('openDetails', "详情."))
+					),
+					$('p', {}, localize('tipsMsg2', "有些插件在安装后，还需要安装一些操作系统软件才能够正常使用。对于KylinIDETeam开发适配的插件，为简化此操作，请安装Kylin-IDE插件依赖管理器,这个插件的使用方法见依赖管理器插件详情页。部分情况该插件依赖管理器无法处理，仍需要用户根据提示自行安装。"),
+						$('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 => {
@@ -1006,7 +1059,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,
@@ -1036,6 +1089,7 @@ export class GettingStartedPage extends EditorPane {
 		this.detailsPageScrollbar?.scanDomNode();
 
 		this.startList?.layout(size);
+		this.requiredList?.layout(size);
 		this.gettingStartedList?.layout(size);
 		this.recentlyOpenedList?.layout(size);
 

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

@@ -5,6 +5,9 @@
 
 import 'vs/workbench/contrib/welcomeGettingStarted/common/media/theme_picker';
 import 'vs/workbench/contrib/welcomeGettingStarted/common/media/notebookProfile';
+import 'vs/workbench/contrib/welcomeGettingStarted/common/media/ext_category';
+import 'vs/workbench/contrib/welcomeGettingStarted/common/media/downloadurl';
+import 'vs/workbench/contrib/welcomeGettingStarted/common/media/ext_dep';
 import { localize } from 'vs/nls';
 import { Codicon } from 'vs/base/common/codicons';
 import { ThemeIcon } from 'vs/platform/theme/common/themeService';
@@ -521,5 +524,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-IDE默认接入OpenVSX插件商店，在Kylin-IDE中可以使用插件检索列表找到KylinIDETeam开发、适配、上传到openVSX中的插件。"),
+
+					media: {
+						type: 'markdown', path: 'ext_category'
+					}
+				},
+				{
+					id: 'extDownloadUrl',
+					title: localize('gettingStarted.extDownloadUrl.title', "KylinIDETeam开发适配的插件显示社区插件仓库链接"),
+					description: localize('gettingStarted.extDownloadUrl.description', "KylinIDETeam开发的插件详情页面找到openKylin社区插件仓库的链接。"),
+
+					media: {
+						type: 'markdown', path: 'downloadurl'
+					}
+				},
+				{
+					id: 'installDependency',
+					title: localize('gettingStarted.installDependency.title', "插件依赖管理的安装"),
+					description: localize('gettingStarted.installDependency.description', "有些插件在安装后，还需要安装一些操作系统软件才能够正常使用。对于KylinIDETeam开发适配的插件，为简化此操作，请安装Kylin-IDE插件依赖管理器。\n{0}\n使用方法见Kylin-IDE插件依赖管理器详情页。部分情况该插件依赖管理器无法处理，仍需要用户根据提示自行安装。", Button(localize('installDependencyBtn', "安装extension-dependency插件"), 'command:workbench.extensions.search?%22@id:KylinIDETeam.extension-dependency%22')),
+					completionEvents: ['onCommand:workbench.extensions.search'],
+					media: {
+						type: 'markdown', path: 'ext_dep'
+					}
+				},
+			]
+		}
 	}
 ];

src/vs/workbench/contrib/welcomeGettingStarted/common/media/downloadurl.ts

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const imageSize = 500;
+
+export default () => `
+<vertically-centered>
+
+		<img width="${imageSize}" src="./downloadurl.png"/>
+
+</vertically-centered>
+`;

src/vs/workbench/contrib/welcomeGettingStarted/common/media/ext_category.ts

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const imageSize = 500;
+
+export default () => `
+<vertically-centered>
+
+		<img width="${imageSize}" src="./ext-category.png"/>
+
+</vertically-centered>
+`;

src/vs/workbench/contrib/welcomeGettingStarted/common/media/ext_dep.ts

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const imageSize = 600;
+
+export default () => `
+<vertically-centered>
+
+		<img width="${imageSize}" src="./ext-dep.png"/>
+
+</vertically-centered>
+`;