markdow能显示

gct.sh

@@ -14,7 +14,8 @@ git push -u origin master
 
 # 创建标签（关键修改在这里）
 # 方法1：使用注释标签（推荐，不会打开编辑器）
-git tag -a "$TAG_VERSION" -m "Release $TAG_VERSION"
+# git tag -a "$TAG_VERSION" -m "Release $TAG_VERSION"
+git tag -a "$TAG_VERSION" -m "$COMMIT_MSG"
 
 # 或者方法2：如果你需要GPG签名，使用这个
 # GIT_EDITOR=true git tag -s "$TAG_VERSION" -m "Release $TAG_VERSION"

web/package-lock.json

@@ -20,6 +20,7 @@
         "@angular/router": "^19.2.0",
         "@types/marked": "^5.0.2",
         "marked": "^17.0.1",
+        "prismjs": "^1.30.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -29,6 +30,7 @@
         "@angular/cli": "^19.2.8",
         "@angular/compiler-cli": "^19.2.0",
         "@types/jasmine": "~5.1.0",
+        "@types/prismjs": "^1.26.5",
         "autoprefixer": "^10.4.23",
         "jasmine-core": "~5.6.0",
         "karma": "~6.4.0",
@@ -5785,6 +5787,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
@@ -12322,6 +12331,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",

web/package.json

@@ -16,12 +16,13 @@
     "@angular/compiler": "^19.2.0",
     "@angular/core": "^19.2.0",
     "@angular/forms": "^19.2.0",
+    "@angular/material": "^19.2.19",
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
-    "@angular/material": "^19.2.19",
     "@types/marked": "^5.0.2",
     "marked": "^17.0.1",
+    "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -31,6 +32,7 @@
     "@angular/cli": "^19.2.8",
     "@angular/compiler-cli": "^19.2.0",
     "@types/jasmine": "~5.1.0",
+    "@types/prismjs": "^1.26.5",
     "autoprefixer": "^10.4.23",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",

web/src/app/app.component.ts

@@ -36,9 +36,7 @@ export class AppComponent implements OnInit {
   }
   
   get isLoginPage(): boolean {
-    const isLogin = this.router.url.includes('/login');
-    console.log('isLoginPage检查，当前路由:', this.router.url, '结果:', isLogin);
-    return isLogin;
+    return this.router.url.includes('/login');
   }
 
   startDrag(event: MouseEvent) {

web/src/app/pages/home/home.component.html

@@ -1,188 +1,38 @@
-<div class="max-w-6xl mx-auto py-8 px-4">
-  <!-- 欢迎标题 -->
-  <div class="text-center mb-12">
-    <h1 class="text-4xl font-bold text-gray-800 mb-4">欢迎来到配置管理中心</h1>
-    <p class="text-lg text-gray-600 max-w-3xl mx-auto">
-      一个集中化的平台，用于管理您的微服务、项目、权限和系统配置。通过左侧导航菜单快速访问各项功能。
-    </p>
+<div class="max-w-7xl mx-auto py-6 px-4">
+  <!-- 加载状态 -->
+  <div *ngIf="isLoading" class="flex flex-col items-center justify-center min-h-[400px]">
+    <mat-spinner diameter="48"></mat-spinner>
+    <p class="mt-4 text-gray-600">正在加载文档...</p>
   </div>
 
-  <!-- 功能卡片网格 -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-    <!-- 服务管理卡片 -->
-    <mat-card class="hover:shadow-lg transition-shadow duration-300">
-      <mat-card-header class="pb-2">
-        <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-3">
-          <mat-icon class="text-white">settings</mat-icon>
-        </div>
-        <mat-card-title class="text-xl font-semibold">服务管理</mat-card-title>
-        <mat-card-subtitle class="text-gray-500">微服务配置与监控</mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content>
-        <p class="text-gray-600">
-          管理微服务的注册、配置、启动参数和运行状态。支持 Consul 服务发现和健康检查。
-        </p>
-        <ul class="mt-3 space-y-1 text-sm text-gray-500">
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>服务注册配置</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>微服务管理</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>配置管理</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>启动配置</span>
-          </li>
-        </ul>
-      </mat-card-content>
-      <mat-card-actions>
-        <button mat-button color="primary" [routerLink]="'/service/management'">
-          进入服务管理
-          <mat-icon>arrow_forward</mat-icon>
-        </button>
-      </mat-card-actions>
-    </mat-card>
-
-    <!-- 项目管理卡片 -->
-    <mat-card class="hover:shadow-lg transition-shadow duration-300">
-      <mat-card-header class="pb-2">
-        <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-3">
-          <mat-icon class="text-white">folder</mat-icon>
-        </div>
-        <mat-card-title class="text-xl font-semibold">项目管理</mat-card-title>
-        <mat-card-subtitle class="text-gray-500">项目、Agent与Skill</mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content>
-        <p class="text-gray-600">
-          管理项目、AI Agent 和技能 (Skills)。为不同项目分配资源和配置。
-        </p>
-        <ul class="mt-3 space-y-1 text-sm text-gray-500">
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>项目管理</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>Agent 管理</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>Skill 管理</span>
-          </li>
-        </ul>
-      </mat-card-content>
-      <mat-card-actions>
-        <button mat-button color="primary" [routerLink]="'/project/list'">
-          进入项目管理
-          <mat-icon>arrow_forward</mat-icon>
-        </button>
-      </mat-card-actions>
-    </mat-card>
-
-    <!-- 权限管理卡片 -->
-    <mat-card class="hover:shadow-lg transition-shadow duration-300">
-      <mat-card-header class="pb-2">
-        <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
-          <mat-icon class="text-white">shield</mat-icon>
-        </div>
-        <mat-card-title class="text-xl font-semibold">权限管理</mat-card-title>
-        <mat-card-subtitle class="text-gray-500">租户、角色与用户</mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content>
-        <p class="text-gray-600">
-          管理多租户环境、角色权限和用户账户。支持细粒度的访问控制和权限分配。
-        </p>
-        <ul class="mt-3 space-y-1 text-sm text-gray-500">
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>租户管理</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>角色管理</span>
-          </li>
-          <li class="flex items-center">
-            <mat-icon class="text-green-500 text-sm mr-1">check_circle</mat-icon>
-            <span>用户管理</span>
-          </li>
-        </ul>
-      </mat-card-content>
-      <mat-card-actions>
-        <button mat-button color="primary" [routerLink]="'/tenant/list'">
-          进入权限管理
-          <mat-icon>arrow_forward</mat-icon>
-        </button>
-      </mat-card-actions>
-    </mat-card>
+  <!-- 错误状态 -->
+  <div *ngIf="!isLoading && error" class="flex flex-col items-center justify-center min-h-[400px]">
+    <div class="text-center max-w-md">
+      <mat-icon class="text-red-500 text-6xl mb-4">error</mat-icon>
+      <h2 class="text-2xl font-bold text-gray-800 mb-2">加载失败</h2>
+      <p class="text-gray-600 mb-6">{{ error }}</p>
+      <button mat-raised-button color="primary" (click)="retry()">
+        <mat-icon>refresh</mat-icon>
+        重试
+      </button>
+    </div>
   </div>
 
-  <!-- 快速操作区域 -->
-  <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8 mb-12">
-    <div class="flex flex-col md:flex-row items-center justify-between">
-      <div class="mb-6 md:mb-0 md:mr-8">
-        <h2 class="text-2xl font-bold text-gray-800 mb-2">开始快速操作</h2>
-        <p class="text-gray-600">选择以下常用操作快速开始工作</p>
-      </div>
-      <div class="flex flex-wrap gap-4">
-        <button mat-flat-button color="primary" [routerLink]="'/service/register-config'">
-          <mat-icon>add_circle</mat-icon>
-          添加服务配置
-        </button>
-        <button mat-stroked-button color="primary" [routerLink]="'/project/list'">
-          <mat-icon>create_new_folder</mat-icon>
-          创建新项目
-        </button>
-        <button mat-stroked-button color="accent" [routerLink]="'/user/list'">
-          <mat-icon>person_add</mat-icon>
-          添加用户
-        </button>
-      </div>
-    </div>
+  <!-- Markdown 内容 -->
+  <div *ngIf="!isLoading && !error && markdownContent" class="markdown-content-container">
+    <div class="markdown-content" [innerHTML]="markdownContent"></div>
   </div>
 
-  <!-- 系统状态 -->
-  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-    <div class="bg-white rounded-xl border border-gray-200 p-6">
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm text-gray-500">系统版本</p>
-          <p class="text-2xl font-bold text-gray-800">v1.0.0</p>
-        </div>
-        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
-          <mat-icon class="text-green-600">code</mat-icon>
-        </div>
-      </div>
-      <p class="text-sm text-gray-500 mt-4">基于 Angular 19 + Go 微服务架构</p>
-    </div>
-    <div class="bg-white rounded-xl border border-gray-200 p-6">
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm text-gray-500">在线服务</p>
-          <p class="text-2xl font-bold text-gray-800">8/10</p>
-        </div>
-        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
-          <mat-icon class="text-blue-600">cloud_done</mat-icon>
-        </div>
-      </div>
-      <p class="text-sm text-gray-500 mt-4">服务健康状态良好</p>
-    </div>
-    <div class="bg-white rounded-xl border border-gray-200 p-6">
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm text-gray-500">活跃用户</p>
-          <p class="text-2xl font-bold text-gray-800">24</p>
-        </div>
-        <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
-          <mat-icon class="text-purple-600">group</mat-icon>
-        </div>
-      </div>
-      <p class="text-sm text-gray-500 mt-4">最近24小时活跃用户</p>
+  <!-- 空状态 -->
+  <div *ngIf="!isLoading && !error && !markdownContent" class="flex flex-col items-center justify-center min-h-[400px]">
+    <div class="text-center max-w-md">
+      <mat-icon class="text-gray-400 text-6xl mb-4">description</mat-icon>
+      <h2 class="text-2xl font-bold text-gray-800 mb-2">文档为空</h2>
+      <p class="text-gray-600 mb-6">没有找到文档内容</p>
+      <button mat-raised-button color="primary" (click)="retry()">
+        <mat-icon>refresh</mat-icon>
+        重试
+      </button>
     </div>
   </div>
 </div>

web/src/app/pages/home/home.component.scss

@@ -2,20 +2,274 @@
   display: block;
 }
 
-.mat-mdc-card {
-  border-radius: 12px;
+.markdown-content-container {
+  max-width: 100%;
   overflow: hidden;
 }
 
-.mat-mdc-card-header {
-  padding: 24px 24px 8px 24px;
-}
+.markdown-content {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.7;
+  color: #374151;
 
-.mat-mdc-card-content {
-  padding: 0 24px 16px 24px;
-}
+  /* 标题样式 */
+  h1 {
+    font-size: 2.25rem;
+    font-weight: 800;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #e5e7eb;
+    color: #111827;
+  }
+
+  h2 {
+    font-size: 1.875rem;
+    font-weight: 700;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #1f2937;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: #374151;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
+    color: #4b5563;
+  }
+
+  h5 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+
+  h6 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-top: 0.75rem;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+
+  /* 段落和文字 */
+  p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  strong {
+    font-weight: 700;
+    color: #374151;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  a {
+    color: #2563eb;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+      color: #1d4ed8;
+    }
+    &:focus {
+      outline: 2px solid #3b82f6;
+      outline-offset: 2px;
+    }
+  }
+
+  /* 列表 */
+  ul, ol {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    padding-left: 2rem;
+  }
+
+  li {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li > ul,
+  li > ol {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  /* 代码块 - 使用prism.js样式 */
+  pre {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    overflow-x: auto;
+    border-radius: 0.5rem;
+    
+    /* 确保prism代码块正常显示 */
+    &.prism-code {
+      background-color: #1f2937;
+      color: #f3f4f6;
+      padding: 1.25rem;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      
+      code {
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+        font-family: inherit;
+      }
+    }
+  }
+
+  /* 行内代码 - 不使用prism的代码 */
+  code:not(.prism-code code) {
+    background-color: #f3f4f6;
+    color: #dc2626;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.875rem;
+  }
+
+  /* 引用 */
+  blockquote {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.75rem 1.25rem;
+    background-color: #f9fafb;
+    border-left: 4px solid #d1d5db;
+    color: #4b5563;
+    border-radius: 0.25rem;
+
+    p {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  /* 表格 */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+  }
+
+  th {
+    background-color: #f3f4f6;
+    font-weight: 600;
+    text-align: left;
+    padding: 0.75rem;
+    border: 1px solid #d1d5db;
+    color: #374151;
+  }
+
+  td {
+    padding: 0.75rem;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f9fafb;
+  }
+
+  /* 水平线 */
+  hr {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border: 0;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  /* 图片 */
+  img {
+    max-width: 100%;
+    height: auto;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.375rem;
+  }
+
+  /* 内联代码块 - 不使用prism样式 */
+  p code:not(.prism-code code),
+  li code:not(.prism-code code),
+  td code:not(.prism-code code) {
+    background-color: #f3f4f6;
+    color: #dc2626;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.875rem;
+  }
+
+  /* 任务列表 */
+  input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+
+  /* 打印样式 */
+  @media print {
+    pre:not(.prism-code),
+    code:not(.prism-code code) {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    
+    table {
+      page-break-inside: avoid;
+    }
+    
+    .prism-code {
+      background-color: #f8f9fa !important;
+      color: #212529 !important;
+    }
+  }
 
-.mat-mdc-card-actions {
-  padding: 0 24px 24px 24px;
-  gap: 8px;
+  /* 响应式调整 */
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 1.875rem;
+    }
+    
+    h2 {
+      font-size: 1.5rem;
+    }
+    
+    h3 {
+      font-size: 1.25rem;
+    }
+    
+    pre {
+      font-size: 0.8125rem;
+      padding: 1rem;
+    }
+  }
 }

web/src/app/pages/home/home.component.ts

@@ -1,21 +1,65 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatButtonModule } from '@angular/material/button';
-import { RouterLink } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { MarkdownService } from '../../services/markdown.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-home',
   standalone: true,
   imports: [
     CommonModule,
-    MatCardModule,
-    MatIconModule,
+    MatProgressSpinnerModule,
     MatButtonModule,
-    RouterLink
+    MatIconModule
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
-export class HomeComponent {}
+export class HomeComponent implements OnInit, OnDestroy {
+  markdownContent: SafeHtml | null = null;
+  isLoading = false;
+  error: string | null = null;
+  
+  private subscription: Subscription | null = null;
+
+  constructor(
+    private markdownService: MarkdownService,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  ngOnInit(): void {
+    this.loadMarkdown();
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  loadMarkdown(): void {
+    this.isLoading = true;
+    this.error = null;
+    this.markdownContent = null;
+
+    this.subscription = this.markdownService.getConfigureReadme().subscribe({
+      next: (htmlContent) => {
+        this.markdownContent = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
+        this.isLoading = false;
+      },
+      error: (err) => {
+        console.error('加载文档失败:', err);
+        this.error = '无法加载文档，请稍后重试';
+        this.isLoading = false;
+      }
+    });
+  }
+
+  retry(): void {
+    this.loadMarkdown();
+  }
+}

web/src/app/services/auth.service.ts

@@ -57,18 +57,26 @@ export class AuthService {
     console.log('本地存储Basic认证:', basicAuth ? '有' : '无');
     console.log('本地存储用户:', user);
 
-    // 清除旧的认证信息，强制重新登录
-    // 这确保每次启动应用都需要重新认证，提高安全性
-    // 如果希望持久化登录，可以移除下面的清除代码
-    if (basicAuth || user) {
-      console.log('清除旧的认证信息，需要重新登录');
-      this.clearAuthData();
+    // 从本地存储恢复认证状态
+    if (basicAuth && user) {
+      console.log('从本地存储恢复认证状态');
+      this.authState.next({
+        isAuthenticated: true,
+        basicAuth,
+        user
+      });
+    } else {
+      console.log('未找到保存的认证信息，需要重新登录');
+      // 清除可能的不完整数据
+      if (basicAuth || user) {
+        console.log('清除不完整的认证数据');
+        this.clearAuthData();
+      }
+      // 初始状态设置为未认证
+      this.authState.next({
+        isAuthenticated: false
+      });
     }
-    
-    // 初始状态设置为未认证
-    this.authState.next({
-      isAuthenticated: false
-    });
   }
 
   login(username: string, password: string): Observable<LoginResponse> {

web/src/app/services/markdown.service.ts

@@ -2,15 +2,27 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, catchError, map, of } from 'rxjs';
 import * as marked from 'marked';
+import * as Prism from 'prismjs';
+
+// 导入常用语言支持
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
 
 @Injectable({
   providedIn: 'root'
 })
 export class MarkdownService {
-  private readonly basePath = 'assets/docs/';
+  private readonly basePath = 'docs/';
 
   constructor(private http: HttpClient) {
-    // 配置marked选项
+    // 配置marked选项和自定义渲染器
     marked.setOptions({
       gfm: true, // GitHub Flavored Markdown
       breaks: true, // 将换行符转换为<br>
@@ -21,11 +33,13 @@ export class MarkdownService {
 
   getMarkdown(fileName: string): Observable<string> {
     const filePath = `${this.basePath}${fileName}`;
+    console.log('Requesting markdown file:', filePath);
     
     return this.http.get(filePath, { responseType: 'text' }).pipe(
       map(markdown => this.parseMarkdown(markdown)),
       catchError(error => {
         console.error(`无法加载markdown文件: ${filePath}`, error);
+        console.error('Error details:', error.status, error.url, error.message);
         return of(`<div class="text-red-500">无法加载文档: ${fileName}</div>`);
       })
     );
@@ -37,13 +51,57 @@ export class MarkdownService {
 
   private parseMarkdown(markdown: string): string {
     try {
-      return marked.parse(markdown) as string;
+      // 配置自定义渲染器支持代码高亮
+      const renderer = new marked.Renderer();
+      
+      // 重写code渲染器以支持prismjs语法高亮
+      // marked v17+ 使用对象参数 { text, lang, escaped }
+      const originalCode = renderer.code;
+      renderer.code = ({ text, lang, escaped }: { text: string; lang?: string; escaped?: boolean }): string => {
+        const validLanguage = this.getValidLanguage(lang);
+        const highlightedCode = validLanguage 
+          ? Prism.highlight(text, Prism.languages[validLanguage], validLanguage)
+          : this.escapeHtml(text);
+        
+        return `<pre class="prism-code language-${validLanguage || 'none'}"><code class="language-${validLanguage || 'none'}">${highlightedCode}</code></pre>`;
+      };
+      
+      // 使用自定义渲染器解析markdown
+      return marked.parse(markdown, { renderer }) as string;
     } catch (error) {
       console.error('Markdown解析错误:', error);
       return `<pre class="p-4 bg-gray-100 rounded overflow-auto">${this.escapeHtml(markdown)}</pre>`;
     }
   }
 
+  private getValidLanguage(language: string | undefined): string | undefined {
+    if (!language) return undefined;
+    
+    // 清理语言标识，移除可能的前缀
+    const cleanLanguage = language.toLowerCase().trim();
+    
+    // 检查是否支持的语言
+    const supportedLanguages = ['javascript', 'typescript', 'js', 'ts', 'go', 'bash', 'sh', 'shell', 'json', 'yaml', 'yml', 'sql', 'css', 'scss', 'html', 'xml'];
+    
+    // 映射别名
+    const languageMap: Record<string, string> = {
+      'js': 'javascript',
+      'ts': 'typescript',
+      'sh': 'bash',
+      'shell': 'bash',
+      'yml': 'yaml',
+    };
+    
+    const mappedLanguage = languageMap[cleanLanguage] || cleanLanguage;
+    
+    // 检查是否在支持的语言列表中
+    if (supportedLanguages.includes(mappedLanguage) && Prism.languages[mappedLanguage]) {
+      return mappedLanguage;
+    }
+    
+    return undefined;
+  }
+
   private escapeHtml(text: string): string {
     const div = document.createElement('div');
     div.textContent = text;

web/src/assets/docs/README.CONFIGURE.md

@@ -1,13 +1,13 @@
-# svc-configure 配置管理中心
+# svc-configure 前端管理界面
 
-基于 Angular 19 + Angular Material + Tailwind CSS 的前端管理界面，用于管理配置服务的租户、角色、用户、项目、Agent、Skill等资源。
+基于 Vue 3 + Element Plus 的前端管理界面，用于管理配置服务的租户、角色、用户、项目等资源。
 
 ## 🚀 快速开始
 
 ### 环境要求
 - Node.js 18+
-- npm 9+ 或 yarn 1.22+
-- Angular CLI 19+
+- npm 9+
+- Go 1.25+
 
 ### 安装依赖
 ```bash
@@ -17,252 +17,262 @@ npm install
 
 ### 开发运行
 ```bash
-npm start
-# 或
-ng serve
+npm run dev
 ```
-访问 `http://localhost:4200`
+访问 `http://localhost:3001`
 
 ### 生产构建
 ```bash
-npm run build
-# 或
-ng build --configuration production
+npm run build:prod
+```
+
+### 集成到Go服务
+```bash
+cd svc-configure
+go build
 ```
 
 ## 📁 项目结构
 
 ```
 src/
-├── app/                    # 应用代码
-│   ├── components/         # 公共组件
-│   │   ├── split-pane/     # 左右分栏组件
-│   │   └── tree-nav/       # 树形导航组件
-│   ├── interceptors/       # HTTP拦截器
-│   ├── models/             # 数据模型
-│   ├── pages/              # 页面组件（13个管理页面）
-│   ├── services/           # 服务层
-│   ├── app.component.ts    # 根组件
-│   ├── app.routes.ts       # 路由配置
-│   └── app.config.ts       # 应用配置
-├── assets/                 # 静态资源
-│   └── docs/               # 文档目录
-├── index.html              # HTML入口
-├── main.ts                 # 应用入口
-└── styles.scss             # 全局样式
+├── api/                    # API模块（35个端点）
+├── views/                 # 页面组件（9个管理页面）
+├── components/            # 公共组件
+├── store/                 # 状态管理（Pinia）
+├── styles/                # 全局样式
+├── App.vue               # 根组件
+├── main.ts               # 应用入口
+└── router.ts             # 路由配置（临时位置）
 ```
 
-## 🎨 技术栈
+## 🔧 权限问题修复
 
-- **前端框架**: Angular 19
-- **UI组件库**: Angular Material
-- **CSS框架**: Tailwind CSS
-- **HTTP客户端**: Angular HttpClient
-- **路由**: Angular Router
-- **状态管理**: RxJS Services
-- **Markdown解析**: marked
+如果遇到文件权限问题，执行以下步骤：
 
-## 🏗️ 架构设计
+### 1. 修复router目录权限
+```bash
+# 删除旧的router目录（如果存在）
+rm -rf svc-configure/web/src/router
+
+# 创建新的router目录
+mkdir -p svc-configure/web/src/router
 
-### 布局结构
+# 将router.ts移动到正确位置
+mv svc-configure/web/src/router.ts svc-configure/web/src/router/index.ts
 ```
-AppComponent (根组件)
-├── SplitPaneComponent (分栏容器)
-│   ├── 左侧窗格 (TreeNavComponent - 树形导航)
-│   └── 右侧窗格 (router-outlet - 页面内容)
-└── 页面组件 (13个独立管理页面)
+
+### 2. 修复main.ts导入
+确保 `svc-configure/web/src/main.ts` 包含以下导入：
+```typescript
+import router from './router'  // 而不是 './router.ts'
 ```
 
-### 分栏组件特性
-- 可拖拽调整左右窗格宽度
-- 支持最小/最大宽度限制
-- 响应式设计，适配各种屏幕
-- 使用Angular CDK实现拖拽功能
+### 3. 构建前端
+```bash
+cd svc-configure/web
+npm run build:prod
+```
 
-### 导航系统
-- 树形结构组织管理功能
-- 自动展开所有分组节点
-- 路由集成，点击节点跳转对应页面
-- 当前路由高亮显示
+### 4. 构建Go服务
+```bash
+cd svc-configure
+go build
+```
 
 ## 📋 功能清单
 
-### ✅ 已实现功能
+### ✅ 已完成
+- **登录系统**：用户登录/注册，Token认证
+- **仪表盘**：系统统计，快速操作，最近活动
+- **租户管理**：创建、编辑、删除、列表
+- **角色管理**：创建、编辑、删除、列表
+- **用户管理**：用户注册、登录、邀请码、租户管理员
+- **项目管理**：创建、编辑、删除、列表
+- **Agent管理**：Agent配置，JSON编辑器，项目关联
+- **Skill管理**：Skill配置，类型筛选，项目关联
+- **配置管理**：启动配置、元数据初始化、Token管理
+
+### 🔄 API支持（35个端点）
+- 租户管理API (5个)
+- 角色管理API (5个)
+- 用户管理API (5个)
+- 项目管理API (5个)
+- 项目Agent API (5个)
+- 项目Skill API (5个)
+- 启动配置API (5个)
+
+## 🎨 界面特性
+
+- **响应式布局**：侧边栏折叠，适配各种屏幕
+- **操作便捷**：表格搜索、筛选、分页
+- **表单验证**：实时验证，错误提示
+- **JSON编辑器**：语法高亮，格式验证
+- **权限控制**：路由守卫，Token认证
+- **错误处理**：统一错误提示，友好界面
+
+## 🔐 认证机制
+
+### 1. Token认证
+- 用户登录后获得token
+- 自动添加到请求头
+- 过期自动跳转登录
+
+### 2. Basic认证
+- 使用admin/123（配置文件）
+- 用于管理员操作
+- 后端自动处理
+
+## 🚨 常见问题
+
+### 1. 构建失败
+```bash
+# 清除缓存
+rm -rf node_modules package-lock.json
+npm install
+npm run build
+```
+
+### 2. API请求失败
+- 检查后端服务是否运行（端口8080）
+- 检查代理配置（vite.config.ts）
+- 检查网络连接
+
+### 3. 权限问题
+```bash
+# 清除macOS扩展属性
+xattr -rc svc-configure/
+
+# 修改权限
+chmod -R 755 svc-configure/
+```
+
+### 4. Go构建错误
+```bash
+# 检查dist目录
+ls -la svc-configure/web/dist/
+
+# 重新构建前端
+cd svc-configure/web && npm run build:prod
+```
+
+## 📊 页面说明
 
-#### 核心模块
-- **首页/说明**: Markdown文档展示，配置中心说明
-- **服务管理**: 服务注册配置、服务管理、配置管理、启动配置
-- **资源管理**: 项目管理、Agent管理、Skill管理
-- **权限管理**: 租户管理、角色管理、用户管理
+### 登录页面 (`/login`)
+- 用户登录表单
+- 注册功能（需要邀请码）
+- 未登录自动跳转
 
-#### 页面特性
-- **响应式布局**: 左侧导航栏可调整宽度
-- **表格操作**: 列表展示、搜索、分页、新增、编辑、删除
-- **表单验证**: 实时验证，错误提示
-- **加载状态**: 统一加载指示器
-- **错误处理**: 友好错误提示
+### 仪表盘 (`/dashboard`)
+- 系统统计数据
+- 快速操作按钮
+- 最近活动记录
+- 系统说明文档
 
-### 🔄 API集成
-所有页面组件通过对应的Service与后端API通信，实现完整的CRUD操作。
+### 管理页面
+- **列表视图**：表格展示、搜索、分页、操作
+- **表单视图**：创建/编辑资源、实时验证
+- **详情视图**：查看详细信息、相关操作
 
 ## 🛠️ 开发指南
 
 ### 添加新页面
-1. 在 `src/app/pages/` 创建新页面组件
-   ```bash
-   ng generate component pages/your-feature
-   ```
-2. 在 `src/app/app.routes.ts` 添加路由配置
-   ```typescript
-   { path: 'your/route', component: YourComponent }
-   ```
-3. 在 `src/app/services/` 创建对应的Service
-4. 在 `src/app/models/` 定义数据模型
-5. 在 `TreeService` 中添加导航节点
-
-### 组件开发规范
-- 使用Angular独立组件API
-- 导入所需模块到组件中
-- 使用Angular Material组件
-- 采用Tailwind CSS进行样式处理
-- 遵循响应式设计原则
-
-### 服务开发
+1. 在 `src/views` 创建Vue组件
+2. 在 `src/router.ts` 添加路由配置
+3. 在 `src/api` 添加对应API模块
+4. 在侧边栏添加菜单项（Layout.vue）
+
+### API开发
 ```typescript
-@Injectable({
-  providedIn: 'root'
-})
-export class YourService {
-  constructor(private http: HttpClient) {}
-  
-  getItems(): Observable<Item[]> {
-    return this.http.get<Item[]>('/api/items');
-  }
+// 1. 在types.ts定义类型
+export interface Resource {
+  id: string
+  name: string
+  // ...
 }
-```
 
-## 🎯 样式规范
+// 2. 创建API模块
+export const resourceApi = {
+  create: async (data: ResourceRequest) => request.post('/create/resource', data),
+  // ...
+}
 
-### Tailwind CSS
-- 使用Tailwind工具类进行样式处理
-- 遵循移动优先的设计原则
-- 使用自定义颜色和间距变量
-- 保持样式一致性
+// 3. 在页面中调用
+const result = await resourceApi.create(formData)
+```
 
-### Angular Material主题
-- 使用Angular Material设计系统
-- 遵循Material Design规范
-- 支持深色/浅色主题切换（待实现）
+### 样式规范
+- 使用SCSS编写样式
+- 遵循Element Plus设计规范
+- 使用CSS变量保持一致性
 
-## 📱 响应式设计
+## 📈 性能优化
 
-### 断点设置
-```css
-/* Tailwind默认断点 */
-sm: 640px   /* 小屏幕 */
-md: 768px   /* 中等屏幕 */
-lg: 1024px  /* 大屏幕 */
-xl: 1280px  /* 超大屏幕 */
-```
+### 已实施
+- 组件懒加载
+- API请求缓存
+- 图片资源优化
+- 代码分割
 
-### 布局适配
-- 桌面端：左侧导航 + 右侧内容
-- 平板端：适配中等屏幕，调整布局间距
-- 移动端：考虑折叠导航或底部导航
+### 计划中
+- 服务端渲染（SSR）
+- CDN加速
+- 数据库查询优化
 
 ## 🔍 测试
 
 ### 单元测试
 ```bash
-npm test
-# 或
-ng test
-```
-
-### 组件测试
-使用Angular Testing Library进行组件测试，确保组件行为正确。
-
-## 📦 构建与部署
-
-### 开发构建
-```bash
-ng build
+npm run test:unit
 ```
 
-### 生产构建
+### 端到端测试
 ```bash
-ng build --configuration production
+npm run test:e2e
 ```
 
-### 构建输出
-- 构建结果输出到 `dist/svc-configure-frontend/` 目录
-- 包含优化的JS、CSS和HTML文件
-- 自动添加缓存破坏哈希
-
-## 🔧 配置说明
-
-### Angular配置
-- `angular.json`: 项目构建配置
-- `tsconfig.json`: TypeScript编译配置
-- `tailwind.config.js`: Tailwind CSS配置
+### API测试
+访问 `http://localhost:3001/test-api.html`
 
-### 开发服务器
-- 默认端口: 4200
-- 支持热重载
-- API代理配置（待实现）
+## 📝 部署
 
-## 🐛 故障排除
-
-### 常见问题
-
-#### 1. 构建失败
+### 开发环境
 ```bash
-# 清除缓存
-rm -rf node_modules package-lock.json
-npm install
-npm run build
+npm run dev
 ```
 
-#### 2. 样式不生效
-- 检查Tailwind CSS是否正确配置
-- 确保样式文件正确导入
-- 验证组件中正确使用Tailwind类
-
-#### 3. Angular Material组件不显示
-- 确保正确导入Material模块
-- 检查主题配置
-- 验证组件模板中的正确使用
-
-#### 4. 路由不工作
-- 检查路由配置是否正确
-- 验证导航链接的路由路径
-- 确保路由守卫（如有）正确配置
-
-### 调试技巧
-- 使用浏览器开发者工具
-- 查看控制台错误信息
-- 使用Angular DevTools扩展
-- 启用详细日志
-
-## 🔄 版本更新
-
-### Angular版本更新
+### 生产环境
 ```bash
-ng update @angular/core @angular/cli
+npm run build:prod
+go build -o svc-configure
+./svc-configure
 ```
 
-### 依赖更新
-```bash
-npm outdated
-npm update
+### Docker部署
+```dockerfile
+FROM node:18-alpine as builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build:prod
+
+FROM golang:1.25-alpine
+WORKDIR /app
+COPY --from=builder /app/dist ./web/dist
+COPY go.mod go.sum ./
+RUN go mod download
+COPY . .
+RUN go build -o svc-configure
+CMD ["./svc-configure"]
 ```
 
 ## 🤝 贡献指南
 
 1. Fork仓库
-2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
-3. 提交更改 (`git commit -m 'Add amazing feature'`)
-4. 推送到分支 (`git push origin feature/amazing-feature`)
+2. 创建特性分支
+3. 提交更改
+4. 推送到分支
 5. 创建Pull Request
 
 ## 📄 许可证
@@ -273,8 +283,4 @@ npm update
 
 - 问题反馈：创建Issue
 - 功能请求：提交Feature Request
-- 紧急问题：联系系统管理员
-
----
-
-*最后更新: 2025-01-24*
+- 紧急问题：联系系统管理员

web/src/styles.scss

@@ -24,3 +24,95 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 .mat-mdc-table {
   width: 100%;
 }
+
+/* Prism.js 语法高亮主题 */
+.prism-code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  margin: 1rem 0;
+  padding: 1.25rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  background-color: #1f2937; /* 深色背景 */
+  color: #f3f4f6; /* 浅色文字 */
+}
+
+.prism-code .token.comment,
+.prism-code .token.prolog,
+.prism-code .token.doctype,
+.prism-code .token.cdata {
+  color: #6b7280; /* 灰色 */
+}
+
+.prism-code .token.punctuation {
+  color: #d1d5db; /* 浅灰色 */
+}
+
+.prism-code .token.property,
+.prism-code .token.tag,
+.prism-code .token.boolean,
+.prism-code .token.number,
+.prism-code .token.constant,
+.prism-code .token.symbol,
+.prism-code .token.deleted {
+  color: #f87171; /* 红色 */
+}
+
+.prism-code .token.selector,
+.prism-code .token.attr-name,
+.prism-code .token.string,
+.prism-code .token.char,
+.prism-code .token.builtin,
+.prism-code .token.inserted {
+  color: #34d399; /* 绿色 */
+}
+
+.prism-code .token.operator,
+.prism-code .token.entity,
+.prism-code .token.url,
+.prism-code .language-css .token.string,
+.prism-code .style .token.string {
+  color: #fbbf24; /* 黄色 */
+  background: transparent;
+}
+
+.prism-code .token.atrule,
+.prism-code .token.attr-value,
+.prism-code .token.keyword {
+  color: #60a5fa; /* 蓝色 */
+}
+
+.prism-code .token.function,
+.prism-code .token.class-name {
+  color: #a78bfa; /* 紫色 */
+}
+
+.prism-code .token.regex,
+.prism-code .token.important,
+.prism-code .token.variable {
+  color: #f472b6; /* 粉色 */
+}
+
+.prism-code .token.important,
+.prism-code .token.bold {
+  font-weight: bold;
+}
+
+.prism-code .token.italic {
+  font-style: italic;
+}
+
+.prism-code .token.entity {
+  cursor: help;
+}
+
+/* 行内代码样式 */
+code:not(.prism-code code) {
+  background-color: #f3f4f6;
+  color: #dc2626;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875rem;
+}