galaxy-opc-plugin 0.2.2 → 0.2.3

package/src/web/dashboard-ui.ts

@@ -0,0 +1,582 @@
+/**
+ * 星环OPC中心 — Dashboard 监控中心 UI
+ *
+ * 生成 Dashboard 页面的 HTML/CSS，包含：
+ * - 4个关键指标卡片（本月收入、本月利润、现金余额、应收账款）
+ * - 风险预警列表
+ * - 今日待办列表
+ * - AI 建议区域
+ */
+
+export interface DashboardMetrics {
+  monthlyIncome: number;
+  monthlyIncomeChange: number; // 同比变化百分比
+  monthlyProfit: number;
+  monthlyProfitChange: number;
+  cashBalance: number;
+  monthsOfRunway: number; // 可撑月数
+  receivables: number;
+  overdueReceivables: number;
+}
+
+export interface DashboardAlert {
+  id: string;
+  title: string;
+  severity: 'critical' | 'warning' | 'info';
+  category: string;
+  message: string;
+  created_at: string;
+}
+
+export interface DashboardTodo {
+  id: string;
+  title: string;
+  priority: 'urgent' | 'high' | 'normal';
+  category: string;
+  due_date?: string;
+  description?: string;
+}
+
+export interface DashboardSuggestion {
+  id: string;
+  title: string;
+  description: string;
+  action?: {
+    label: string;
+    url?: string;
+    onclick?: string;
+  };
+}
+
+export interface DashboardData {
+  metrics: DashboardMetrics;
+  alerts: DashboardAlert[];
+  todos: DashboardTodo[];
+  suggestions: DashboardSuggestion[];
+}
+
+/**
+ * 生成 Dashboard HTML
+ */
+export function generateDashboardHtml(data: DashboardData): string {
+  return `
+    <div class="dashboard-container">
+      ${generateMetricsSection(data.metrics)}
+      <div class="dashboard-two-column">
+        <div class="dashboard-left-column">
+          ${generateAlertsSection(data.alerts)}
+          ${generateTodosSection(data.todos)}
+        </div>
+        <div class="dashboard-right-column">
+          ${generateSuggestionsSection(data.suggestions)}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 生成关键指标卡片区域
+ */
+function generateMetricsSection(metrics: DashboardMetrics): string {
+  const formatMoney = (amount: number) => {
+    if (amount >= 10000) {
+      return (amount / 10000).toFixed(1) + '万';
+    }
+    return amount.toFixed(0);
+  };
+
+  const formatChange = (change: number) => {
+    const sign = change >= 0 ? '+' : '';
+    const className = change >= 0 ? 'trend-up' : 'trend-down';
+    const arrow = change >= 0 ? '↑' : '↓';
+    return `<span class="${className}">${arrow} ${sign}${change.toFixed(1)}%</span>`;
+  };
+
+  return `
+    <div class="stats-grid dashboard-metrics">
+      <div class="stat-card">
+        <div class="label">
+          <span>本月收入</span>
+          ${formatChange(metrics.monthlyIncomeChange)}
+        </div>
+        <div class="value">
+          ¥${formatMoney(metrics.monthlyIncome)}
+          <span class="unit">元</span>
+        </div>
+      </div>
+
+      <div class="stat-card">
+        <div class="label">
+          <span>本月利润</span>
+          ${formatChange(metrics.monthlyProfitChange)}
+        </div>
+        <div class="value">
+          ¥${formatMoney(metrics.monthlyProfit)}
+          <span class="unit">元</span>
+        </div>
+      </div>
+
+      <div class="stat-card ${metrics.monthsOfRunway < 2 ? 'stat-card-warning' : ''}">
+        <div class="label">
+          <span>现金余额</span>
+          ${metrics.monthsOfRunway < 2 ? '<span class="badge badge-critical">预警</span>' : ''}
+        </div>
+        <div class="value">
+          ¥${formatMoney(metrics.cashBalance)}
+          <span class="unit">元</span>
+        </div>
+        <div class="stat-card-footer">
+          可撑 ${metrics.monthsOfRunway.toFixed(1)} 个月
+        </div>
+      </div>
+
+      <div class="stat-card ${metrics.overdueReceivables > 0 ? 'stat-card-warning' : ''}">
+        <div class="label">
+          <span>应收账款</span>
+          ${metrics.overdueReceivables > 0 ? '<span class="badge badge-warning">逾期</span>' : ''}
+        </div>
+        <div class="value">
+          ¥${formatMoney(metrics.receivables)}
+          <span class="unit">元</span>
+        </div>
+        ${metrics.overdueReceivables > 0 ? `
+          <div class="stat-card-footer stat-card-footer-warning">
+            逾期金额: ¥${formatMoney(metrics.overdueReceivables)}
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 生成风险预警列表
+ */
+function generateAlertsSection(alerts: DashboardAlert[]): string {
+  if (alerts.length === 0) {
+    return `
+      <div class="card dashboard-section">
+        <h2>风险预警</h2>
+        <div class="dashboard-empty-state">
+          <div class="dashboard-empty-icon">✓</div>
+          <p>暂无风险预警</p>
+        </div>
+      </div>
+    `;
+  }
+
+  const alertItems = alerts.map(alert => {
+    const severityClass = `alert-${alert.severity}`;
+    const severityIcon = alert.severity === 'critical' ? '⚠️' :
+                         alert.severity === 'warning' ? '⚡' : 'ℹ️';
+
+    return `
+      <div class="alert-banner ${severityClass}" data-alert-id="${alert.id}">
+        <span class="alert-icon">${severityIcon}</span>
+        <div class="alert-content">
+          <div class="alert-title">${alert.title}</div>
+          <div class="alert-message">${alert.message}</div>
+        </div>
+        <button class="alert-dismiss" onclick="dismissAlert('${alert.id}')" title="忽略">×</button>
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="card dashboard-section">
+      <h2>风险预警 <span class="badge badge-warning">${alerts.length}</span></h2>
+      <div class="dashboard-alerts">
+        ${alertItems}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 生成今日待办列表
+ */
+function generateTodosSection(todos: DashboardTodo[]): string {
+  if (todos.length === 0) {
+    return `
+      <div class="card dashboard-section">
+        <h2>今日待办</h2>
+        <div class="dashboard-empty-state">
+          <div class="dashboard-empty-icon">✓</div>
+          <p>太棒了！今天没有待办事项</p>
+        </div>
+      </div>
+    `;
+  }
+
+  // 按优先级排序
+  const sortedTodos = [...todos].sort((a, b) => {
+    const priorityOrder = { urgent: 0, high: 1, normal: 2 };
+    return priorityOrder[a.priority] - priorityOrder[b.priority];
+  });
+
+  const todoItems = sortedTodos.map(todo => {
+    const priorityBadge = todo.priority === 'urgent' ? 'badge-critical' :
+                          todo.priority === 'high' ? 'badge-warning' : 'badge-info';
+    const priorityLabel = todo.priority === 'urgent' ? '紧急' :
+                          todo.priority === 'high' ? '重要' : '一般';
+
+    return `
+      <div class="dashboard-todo-item">
+        <div class="dashboard-todo-header">
+          <span class="badge ${priorityBadge}">${priorityLabel}</span>
+          <span class="dashboard-todo-category">${todo.category}</span>
+        </div>
+        <div class="dashboard-todo-title">${todo.title}</div>
+        ${todo.description ? `<div class="dashboard-todo-desc">${todo.description}</div>` : ''}
+        ${todo.due_date ? `<div class="dashboard-todo-due">截止: ${todo.due_date}</div>` : ''}
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="card dashboard-section">
+      <h2>今日待办 <span class="badge badge-info">${todos.length}</span></h2>
+      <div class="dashboard-todos">
+        ${todoItems}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 生成 AI 建议区域
+ */
+function generateSuggestionsSection(suggestions: DashboardSuggestion[]): string {
+  if (suggestions.length === 0) {
+    return `
+      <div class="card dashboard-section">
+        <h2>AI 建议</h2>
+        <div class="dashboard-empty-state">
+          <div class="dashboard-empty-icon">💡</div>
+          <p>暂无建议</p>
+        </div>
+      </div>
+    `;
+  }
+
+  const suggestionItems = suggestions.map(suggestion => {
+    const actionButton = suggestion.action ? `
+      <button
+        class="dashboard-suggestion-action"
+        ${suggestion.action.onclick ? `onclick="${suggestion.action.onclick}"` : ''}
+        ${suggestion.action.url ? `onclick="window.location.href='${suggestion.action.url}'"` : ''}
+      >
+        ${suggestion.action.label}
+      </button>
+    ` : '';
+
+    return `
+      <div class="dashboard-suggestion-item">
+        <div class="dashboard-suggestion-title">${suggestion.title}</div>
+        <div class="dashboard-suggestion-desc">${suggestion.description}</div>
+        ${actionButton}
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="card dashboard-section">
+      <h2>💡 AI 建议</h2>
+      <div class="dashboard-suggestions">
+        ${suggestionItems}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Dashboard 专用 CSS
+ */
+export function getDashboardCss(): string {
+  return `
+/* Dashboard Container */
+.dashboard-container {
+  animation: fadeIn 0.3s ease;
+}
+
+.dashboard-two-column {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+@media (max-width: 1200px) {
+  .dashboard-two-column {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Metrics Cards */
+.dashboard-metrics {
+  margin-bottom: 28px;
+}
+
+.stat-card-warning {
+  border-color: #fde68a;
+  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
+}
+
+.stat-card-footer {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--tx3);
+}
+
+.stat-card-footer-warning {
+  color: #92400e;
+  font-weight: 500;
+}
+
+/* Dashboard Sections */
+.dashboard-section {
+  margin-bottom: 20px;
+}
+
+/* Empty State */
+.dashboard-empty-state {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.dashboard-empty-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  opacity: 0.3;
+}
+
+.dashboard-empty-state p {
+  color: var(--tx3);
+  font-size: 14px;
+}
+
+/* Alerts */
+.dashboard-alerts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.alert-banner {
+  position: relative;
+  padding-right: 40px;
+}
+
+.alert-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.alert-content {
+  flex: 1;
+}
+
+.alert-title {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.alert-message {
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+.alert-dismiss {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  color: currentColor;
+  opacity: 0.5;
+  transition: all 0.15s;
+}
+
+.alert-dismiss:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* Todos */
+.dashboard-todos {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dashboard-todo-item {
+  padding: 14px;
+  background: #f9fafb;
+  border-radius: 6px;
+  border-left: 3px solid var(--bd);
+  transition: all 0.15s;
+}
+
+.dashboard-todo-item:hover {
+  background: #f3f4f6;
+  border-left-color: var(--tx);
+}
+
+.dashboard-todo-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.dashboard-todo-category {
+  font-size: 11px;
+  color: var(--tx3);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dashboard-todo-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--tx);
+  margin-bottom: 4px;
+}
+
+.dashboard-todo-desc {
+  font-size: 12px;
+  color: var(--tx2);
+  margin-bottom: 6px;
+}
+
+.dashboard-todo-due {
+  font-size: 11px;
+  color: var(--tx3);
+}
+
+/* Suggestions */
+.dashboard-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dashboard-suggestion-item {
+  padding: 16px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
+  border-radius: 8px;
+  border: 1px solid #bae6fd;
+}
+
+.dashboard-suggestion-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--tx);
+  margin-bottom: 6px;
+}
+
+.dashboard-suggestion-desc {
+  font-size: 13px;
+  color: var(--tx2);
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.dashboard-suggestion-action {
+  padding: 8px 16px;
+  background: var(--tx);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font);
+}
+
+.dashboard-suggestion-action:hover {
+  background: var(--pri-l);
+  transform: translateY(-1px);
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-two-column {
+    grid-template-columns: 1fr;
+  }
+
+  .main {
+    padding: 20px 16px;
+  }
+}
+`;
+}
+
+/**
+ * Dashboard 专用 JavaScript
+ */
+export function getDashboardJs(): string {
+  return `
+// 忽略预警
+async function dismissAlert(alertId) {
+  if (!confirm('确定忽略此预警？')) return;
+
+  try {
+    const res = await fetch('/opc/admin/api/alerts/' + alertId + '/dismiss', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    });
+
+    if (res.ok) {
+      showToast('预警已忽略', 'ok');
+      // 移除元素
+      const alertEl = document.querySelector('[data-alert-id="' + alertId + '"]');
+      if (alertEl) {
+        alertEl.style.opacity = '0';
+        setTimeout(() => alertEl.remove(), 200);
+      }
+    } else {
+      showToast('操作失败', 'err');
+    }
+  } catch (err) {
+    showToast('网络错误', 'err');
+  }
+}
+
+// 加载 Dashboard 数据
+async function loadDashboard() {
+  showLoading();
+
+  try {
+    const res = await fetch('/opc/admin/api/dashboard');
+    if (!res.ok) throw new Error('加载失败');
+
+    const data = await res.json();
+    renderDashboard(data);
+  } catch (err) {
+    document.getElementById('app').innerHTML =
+      '<div class="card"><p style="color:var(--err);">加载失败: ' + err.message + '</p></div>';
+  } finally {
+    hideLoading();
+  }
+}
+
+// 渲染 Dashboard
+function renderDashboard(data) {
+  // Dashboard HTML 已在服务端生成，这里只需要绑定事件
+  // 实际渲染逻辑在 config-ui.ts 的 renderDashboard 函数中
+}
+`;
+}

package/src/web/landing-page.ts

@@ -1,13 +1,19 @@
 /**
  * 星环OPC中心 — 产品官网/文档页
  *
- * 路由: /opc/home/*
+ * 路由: / (根路径)
  * 纯静态 HTML 单页，展示产品功能和安装指南
  */
 
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import type { ServerResponse } from "node:http";
 import type { OpenClawPluginApi } from "openclaw/plugin-sdk";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 function sendHtml(res: ServerResponse, html: string): void {
   res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
   res.end(html);
@@ -208,7 +214,7 @@ function buildLandingHtml(): string {
 http://localhost:18789/opc/admin
 
 # 访问产品官网
-http://localhost:18789/opc/home</pre>
+http://localhost:18789/</pre>
     </div>
   </div>
 </section>
@@ -252,18 +258,62 @@ http://localhost:18789/opc/home</pre>
 }
 
 export function registerLandingPage(api: OpenClawPluginApi): void {
+  // opc-homepage 前端页面路径（项目根目录下）
+  const homepageDir = path.resolve(__dirname, "../../../../opc-homepage");
+  const homepageIndexPath = path.join(homepageDir, "index.html");
+
   api.registerHttpHandler(async (req, res) => {
     const rawUrl = req.url ?? "";
     const urlObj = new URL(rawUrl, "http://localhost");
     const pathname = urlObj.pathname;
 
-    if (!pathname.startsWith("/opc/home")) {
+    // 1. 根路径 `/` → 返回 opc-homepage/index.html
+    if (pathname === "/" || pathname === "") {
+      try {
+        if (fs.existsSync(homepageIndexPath)) {
+          const html = fs.readFileSync(homepageIndexPath, "utf-8");
+          sendHtml(res, html);
+          return true;
+        }
+      } catch (err) {
+        api.logger.warn(`opc: 无法读取主页文件: ${err instanceof Error ? err.message : String(err)}`);
+      }
+      // 降级到内置页面
+      sendHtml(res, buildLandingHtml());
+      return true;
+    }
+
+    // 2. 静态资源 `/galaxy.png` 等 → 返回 opc-homepage/ 下的文件
+    if (pathname.match(/^\/(galaxy.*\.png|.*\.jpg|.*\.svg|.*\.css|.*\.js)$/)) {
+      try {
+        const filename = path.basename(pathname);
+        const filePath = path.join(homepageDir, filename);
+
+        if (fs.existsSync(filePath)) {
+          const ext = path.extname(filename).toLowerCase();
+          const mimeTypes: Record<string, string> = {
+            ".png": "image/png",
+            ".jpg": "image/jpeg",
+            ".jpeg": "image/jpeg",
+            ".svg": "image/svg+xml",
+            ".css": "text/css",
+            ".js": "application/javascript",
+          };
+          const contentType = mimeTypes[ext] || "application/octet-stream";
+
+          const fileContent = fs.readFileSync(filePath);
+          res.writeHead(200, { "Content-Type": contentType });
+          res.end(fileContent);
+          return true;
+        }
+      } catch (err) {
+        api.logger.warn(`opc: 无法读取静态资源: ${err instanceof Error ? err.message : String(err)}`);
+      }
       return false;
     }
 
-    sendHtml(res, buildLandingHtml());
-    return true;
+    return false;
   });
 
-  api.logger.info("opc: 已注册产品官网 (/opc/home)");
+  api.logger.info("opc: 已注册产品官网 (/)");
 }