add websphere application server tutorial

Author: luoyan35714

src/app/components/tutorials/paper-tutorial.css

@@ -237,6 +237,18 @@
   border-bottom: 2px solid rgba(13, 148, 136, 0.15);
 }
 
+.paper-topic-thumb--cover {
+  padding: 0;
+  overflow: hidden;
+}
+
+.paper-topic-thumb--cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .paper-topic-body {
   padding: 20px;
 }

src/app/components/tutorials/video-tutorial-detail/video-tutorial-detail.component.css

@@ -5,3 +5,53 @@
   color: #475569;
   line-height: 1.65;
 }
+
+.paper-external-cta {
+  max-width: 560px;
+  margin: 28px auto 0;
+  padding: 24px;
+  text-align: center;
+  background: var(--paper-card);
+  border: 1px solid rgba(13, 148, 136, 0.2);
+  border-radius: 6px;
+  box-shadow: 0 1px 1px var(--paper-shadow);
+}
+
+.paper-external-cover {
+  aspect-ratio: 16 / 9;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 16px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+}
+
+.paper-external-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.paper-external-hint {
+  margin: 0 0 16px;
+  font-size: 15px;
+  color: var(--paper-muted);
+  line-height: 1.55;
+}
+
+.paper-external-btn {
+  display: inline-block;
+  padding: 10px 22px;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  color: #fff;
+  background: var(--paper-accent);
+  border-radius: 6px;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.paper-external-btn:hover {
+  background: var(--paper-accent-dark);
+  transform: translateY(-1px);
+}

src/app/components/tutorials/video-tutorial-detail/video-tutorial-detail.component.html

@@ -7,6 +7,20 @@ <h1 class="paper-title">{{ titleOf(tut) }}</h1>
       <p class="paper-summary">{{ summaryOf(tut) }}</p>
     </header>
 
+    <section *ngIf="tut.externalUrl" class="paper-external-cta">
+      <div *ngIf="tut.coverImage" class="paper-external-cover">
+        <img [src]="tut.coverImage" [alt]="titleOf(tut)" />
+      </div>
+      <p class="paper-external-hint">{{ t('tutorials.external.hint') }}</p>
+      <a
+        [href]="tut.externalUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="paper-external-btn"
+        >{{ t('tutorials.external.open') }}</a
+      >
+    </section>
+
     <div class="paper-video-grid" *ngIf="tut.episodes.length > 0; else emptyEpisodes">
       <article *ngFor="let ep of tut.episodes; let i = index" class="paper-video-card" [style.--paper-delay.ms]="70 * i">
         <a

src/app/components/tutorials/video-tutorials-list/video-tutorials-list.component.html

@@ -10,19 +10,44 @@ <h1 class="page-title">{{ t('nav.tutorials') }}</h1>
     <div class="paper-inner">
       <p class="tutorials-list-hint">{{ t('tutorials.list.lead') }}</p>
       <div class="paper-topic-grid">
-        <a
-          *ngFor="let item of tutorials; let i = index"
-          [routerLink]="['/tutorials', item.id]"
-          class="paper-topic-card"
-          [style.--paper-delay.ms]="50 * i"
-        >
-          <div class="paper-topic-thumb" aria-hidden="true">▶</div>
-          <div class="paper-topic-body">
-            <h2 class="paper-topic-title">{{ titleOf(item) }}</h2>
-            <p class="paper-topic-summary">{{ summaryOf(item) }}</p>
-          </div>
-        </a>
+        <ng-container *ngFor="let item of tutorials; let i = index">
+          <a
+            *ngIf="item.externalUrl"
+            [href]="item.externalUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="paper-topic-card"
+            [style.--paper-delay.ms]="50 * i"
+            [attr.aria-label]="cardAriaLabel(item)"
+          >
+            <ng-container *ngTemplateOutlet="topicCardInner; context: { $implicit: item }"></ng-container>
+          </a>
+          <a
+            *ngIf="!item.externalUrl"
+            [routerLink]="['/tutorials', item.id]"
+            class="paper-topic-card"
+            [style.--paper-delay.ms]="50 * i"
+            [attr.aria-label]="cardAriaLabel(item)"
+          >
+            <ng-container *ngTemplateOutlet="topicCardInner; context: { $implicit: item }"></ng-container>
+          </a>
+        </ng-container>
       </div>
+
+      <ng-template #topicCardInner let-item>
+        <div
+          class="paper-topic-thumb"
+          [class.paper-topic-thumb--cover]="!!item.coverImage"
+          aria-hidden="true"
+        >
+          <img *ngIf="item.coverImage" [src]="item.coverImage" alt="" />
+          <span *ngIf="!item.coverImage">▶</span>
+        </div>
+        <div class="paper-topic-body">
+          <h2 class="paper-topic-title">{{ titleOf(item) }}</h2>
+          <p class="paper-topic-summary">{{ summaryOf(item) }}</p>
+        </div>
+      </ng-template>
     </div>
   </div>
 </div>

src/app/components/tutorials/video-tutorials-list/video-tutorials-list.component.ts

@@ -4,7 +4,7 @@ import { RouterLink } from '@angular/router';
 import { LanguageService } from '../../../services/language.service';
 import { SEOService } from '../../../services/seo.service';
 import { Subscription } from 'rxjs';
-import { VIDEO_TUTORIALS } from '../../../data/video-tutorials.data';
+import { VideoTutorial, VIDEO_TUTORIALS } from '../../../data/video-tutorials.data';
 import { VIDEO_TUTORIALS_LIST_SEO } from '../../../config/seo.config';
 
 @Component({
@@ -49,4 +49,12 @@ export class VideoTutorialsListComponent implements OnInit, OnDestroy {
   summaryOf(t: (typeof VIDEO_TUTORIALS)[0]): string {
     return this.isEn() ? t.summaryEn : t.summaryZh;
   }
+
+  cardAriaLabel(t: VideoTutorial): string {
+    const title = this.titleOf(t);
+    if (t.externalUrl) {
+      return this.isEn() ? `${title} (opens in new tab)` : `${title}（新窗口打开）`;
+    }
+    return title;
+  }
 }

src/app/data/video-tutorials.data.ts

@@ -21,6 +21,10 @@ export interface VideoTutorial {
   summaryZh: string;
   summaryEn: string;
   episodes: VideoEpisode[];
+  /** 站外课程页；列表点击直接打开新窗口 */
+  externalUrl?: string;
+  /** 列表/详情封面，如 /assets/tutorials/.../overview.png */
+  coverImage?: string;
 }
 
 export const VIDEO_TUTORIALS: VideoTutorial[] = [
@@ -30,7 +34,9 @@ export const VIDEO_TUTORIALS: VideoTutorial[] = [
     titleEn: 'WebSphere Application Server',
     summaryZh: 'WAS 安装、配置、部署与运维要点。',
     summaryEn: 'Installation, configuration, deployment, and operations for WAS.',
-    episodes: []
+    episodes: [],
+    externalUrl: 'https://edu.51cto.com/course/38177.html',
+    coverImage: '/assets/tutorials/01-websphere-application-server/overview.png'
   },
   {
     id: 'vault',

src/app/services/language.service.ts

@@ -20,7 +20,12 @@ export class LanguageService {
       zh: '技术专题视频讲解，涵盖中间件、协议、AI 与工程实践。',
       en: 'Topic-based video tutorials: middleware, protocols, AI, and hands-on engineering.'
     },
-    'tutorials.list.lead': { zh: '点击下方卡片进入对应专题。', en: 'Open a topic below to view its videos.' },
+    'tutorials.list.lead': { zh: '点击下方卡片进入对应专题；已上线的站外课程会在新窗口打开。', en: 'Open a topic below; courses hosted elsewhere open in a new tab.' },
+    'tutorials.external.hint': {
+      zh: '本课程在合作平台提供完整视频，请在新窗口中打开观看。',
+      en: 'Full videos are on a partner site—open the link in a new tab.'
+    },
+    'tutorials.external.open': { zh: '前往课程', en: 'Open course' },
     'tutorials.back': { zh: '← 返回教程列表', en: '← Back to tutorials' },
     'tutorials.empty': { zh: '该专题的剧集链接将陆续补充，敬请关注。', en: 'Video links for this topic will be added soon.' },
     'tutorials.platform.bilibili': { zh: '哔哩哔哩', en: 'Bilibili' },