| | |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8" /> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|---|
| | | <title>WCS AI 诊断</title> |
|---|
| | | <title>WCS AI 助手</title> |
|---|
| | | <link rel="stylesheet" href="../../static/vue/element/element.css" /> |
|---|
| | | <style> |
|---|
| | | body { background: #f5f7fa; } |
|---|
| | |
|---|
| | | .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 8px; } |
|---|
| | | .markdown-body pre { background: #f6f8fa; padding: 12px; border-radius: 6px; overflow: auto; } |
|---|
| | | .status { color: #909399; } |
|---|
| | | |
|---|
| | | /* 整个图标旋转动画 */ |
|---|
| | | .spinner { |
|---|
| | | animation: spin 2.8s linear infinite; |
|---|
| | | transform-origin: 50% 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes spin { |
|---|
| | | from { transform: rotate(0deg); } |
|---|
| | | to { transform: rotate(360deg); } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app" class="container"> |
|---|
| | | <el-card shadow="hover"> |
|---|
| | | <div slot="header" class="clearfix" style="display: flex; align-items: center;"> |
|---|
| | | <svg |
|---|
| | | width="32" |
|---|
| | | height="32" |
|---|
| | | viewBox="0 0 64 64" |
|---|
| | | style="margin-right: 10px;" |
|---|
| | | xmlns="http://www.w3.org/2000/svg"> |
|---|
| | | |
|---|
| | | <!-- 透明背景：不画任何底色即可 --> |
|---|
| | | |
|---|
| | | <!-- 一点柔和发光效果 --> |
|---|
| | | <defs> |
|---|
| | | <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> |
|---|
| | | <feGaussianBlur stdDeviation="2.5" result="blur"/> |
|---|
| | | <feMerge> |
|---|
| | | <feMergeNode in="blur"/> |
|---|
| | | <feMergeNode in="SourceGraphic"/> |
|---|
| | | </feMerge> |
|---|
| | | </filter> |
|---|
| | | </defs> |
|---|
| | | |
|---|
| | | <!-- 旋转组 --> |
|---|
| | | <g class="spinner" filter="url(#glow)"> |
|---|
| | | <!-- 每一条彩色「小弯条」 --> |
|---|
| | | <!-- 可以通过调整 rx/ry、width/height 来改粗细和弯度 --> |
|---|
| | | <!-- 1. 紫色 --> |
|---|
| | | <rect x="30" y="10" width="6" height="14" rx="3" ry="3" fill="#8b5cf6" /> |
|---|
| | | |
|---|
| | | <!-- 2. 粉色（顺时针旋转60°） --> |
|---|
| | | <g transform="rotate(60 32 32)"> |
|---|
| | | <rect x="30" y="10" width="6" height="14" rx="3" ry="3" fill="#f472b6" /> |
|---|
| | | </g> |
|---|
| | | |
|---|
| | | <!-- 3. 橙色 --> |
|---|
| | | <g transform="rotate(120 32 32)"> |
|---|
| | | <rect x="30" y="10" width="6" height="14" rx="3" ry="3" fill="#fb923c" /> |
|---|
| | | </g> |
|---|
| | | |
|---|
| | | <!-- 4. 金黄 --> |
|---|
| | | <g transform="rotate(180 32 32)"> |
|---|
| | | <rect x="30" y="10" width="6" height="14" rx="3" ry="3" fill="#fbbf24" /> |
|---|
| | | </g> |
|---|
| | | |
|---|
| | | <!-- 5. 青色 --> |
|---|
| | | <g transform="rotate(240 32 32)"> |
|---|
| | | <rect x="30" y="10" width="6" height="14" rx="3" ry="3" fill="#22d3ee" /> |
|---|
| | | </g> |
|---|
| | | |
|---|
| | | <!-- 6. 蓝色 --> |
|---|
| | | <g transform="rotate(300 32 32)"> |
|---|
| | | <rect x="30" y="10" width="6" height="14" rx="3" ry="3" fill="#3b82f6" /> |
|---|
| | | </g> |
|---|
| | | </g> |
|---|
| | | </svg> |
|---|
| | | <span>WCS AI 诊断</span> |
|---|
| | | <div v-html="headerIcon" style="margin-right: 10px; display: flex;"></div> |
|---|
| | | <span>WCS AI 助手</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="actions"> |
|---|
| | | <el-button type="primary" :loading="loading" :disabled="streaming" @click="start">开始诊断</el-button> |
|---|
| | | <el-button type="primary" :loading="loading" :disabled="streaming" @click="start">一键诊断系统</el-button> |
|---|
| | | <el-button type="warning" :disabled="!streaming" @click="stop">停止</el-button> |
|---|
| | | <el-button @click="clear">清空</el-button> |
|---|
| | | <span class="status">{{ statusText }}</span> |
|---|
| | |
|---|
| | | el: '#app', |
|---|
| | | data: function() { |
|---|
| | | return { |
|---|
| | | headerIcon: getAiIconHtml(50, 50), |
|---|
| | | loading: false, |
|---|
| | | streaming: false, |
|---|
| | | source: null, |
|---|
