init

2025-03-10 10:50:06 +08:00
commit 81c79275aa
65 changed files with 3648 additions and 0 deletions
--- a/router-app/static/download.ts
+++ b/router-app/static/download.ts
@@ -0,0 +1,18 @@
+import fs from 'fs';
+
+const apps = [
+  { user: 'root', key: 'enter', version: '1.0.0' }, //
+  { user: 'root', key: 'packages', version: '1.0.0' },
+];
+
+const baseURL = 'https://kevisual.silkyai.cn';
+
+const downloadApps = () => {
+  //
+};
+
+export const downloadLink = async (url: string, path: string) => {
+  const res = await fetch(url);
+  const blob = await res.blob();
+  fs.writeFileSync(path, Buffer.from(await blob.arrayBuffer()));
+};
--- a/router-app/static/enter/electron.js
+++ b/router-app/static/enter/electron.js
@@ -0,0 +1,23 @@
+export const checkIsElectron = () => {
+  return typeof window !== 'undefined' && typeof window.electron === 'object';
+};
+export const getElectron = () => {
+  return window.electron;
+};
+export const saveAppConfig = async (config) => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  const saveResult = await electron.ipcRenderer.invoke('save-app-config', config);
+  return saveResult;
+};
+export const relunch = async () => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+};
--- a/router-app/static/enter/index.html
+++ b/router-app/static/enter/index.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page Enter Configuration</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            min-height: 100vh;
+            background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            padding: 1.5rem;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 42rem;
+            margin: 0 auto;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+
+        .header svg {
+            width: 2rem;
+            height: 2rem;
+            color: #d97706;
+            animation: spin 8s linear infinite;
+        }
+
+        .header h1 {
+            font-size: 1.875rem;
+            font-weight: bold;
+            color: #92400e;
+        }
+
+        .form-container {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(8px);
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px rgba(217, 119, 6, 0.1);
+            padding: 2rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-container:hover {
+            box-shadow: 0 8px 12px rgba(217, 119, 6, 0.15);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #92400e;
+            margin-bottom: 0.25rem;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid #fbbf24;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #d97706;
+            box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
+        }
+
+        button {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            background-color: #d97706;
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        button:hover {
+            background-color: #b45309;
+        }
+
+        .particles {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
+        }
+
+        .particle {
+            position: absolute;
+            color: #fbbf24;
+            opacity: 0.3;
+            animation: float 5s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) rotate(0deg);
+            }
+            50% {
+                transform: translateY(-20px) rotate(10deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="particles" id="particles"></div>
+    
+    <div class="container">
+        <div class="header">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                <circle cx="12" cy="12" r="3"/>
+            </svg>
+            <h1>Page Enter Configuration</h1>
+        </div>
+
+        <div class="form-container">
+            <form id="configForm">
+                <div class="form-group">
+                    <label for="pageApi">Page Enter Api</label>
+                    <input type="text" id="pageApi" placeholder="Enter page api configuration">
+                </div>
+
+                <button type="submit" id="save-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    Save Configuration
+                </button>
+            </form>
+            <div id="save-result"></div>
+        </div>
+    </div>
+
+    <script>
+        // Create floating particles
+        function createParticles() {
+            const particles = document.getElementById('particles');
+            const particleCount = 20;
+
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
+                        <path d="M5 3v4"/>
+                        <path d="M19 17v4"/>
+                        <path d="M3 5h4"/>
+                        <path d="M17 19h4"/>
+                    </svg>
+                `;
+                
+                const size = 10 + Math.random() * 20;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                particle.style.animationDuration = `${5 + Math.random() * 5}s`;
+                particle.style.animationDelay = `${Math.random() * 5}s`;
+                
+                particles.appendChild(particle);
+            }
+        }
+
+        // Initialize particles
+        createParticles();
+
+        // Form handling
+  
+    </script>
+    <script src="./main.js" type="module"></script>
+</body>
+</html>
--- a/router-app/static/enter/main.js
+++ b/router-app/static/enter/main.js
@@ -0,0 +1,28 @@
+import { saveAppConfig } from './electron.js';
+
+window.onload = async () => {
+  const config = await saveAppConfig();
+  const pageApi = document.getElementById('pageApi');
+  const saveResult = document.getElementById('save-result');
+  pageApi.value = config?.pageApi || 'https://kevisual.silkyai.cn';
+  console.log('config', config);
+  const form = document.getElementById('configForm');
+
+  // Handle form submission
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const config = {
+      pageApi: pageApi.value,
+    };
+    const result = await saveAppConfig(config);
+
+    const newPageApi = result?.pageApi || '';
+    saveResult.innerHTML = `<h1>保存成功</h1>
+    <p>new pageApi: ${newPageApi}</p>
+    <button id="relunch">重启</button>`;
+    const relunchButton = document.getElementById('relunch');
+    relunchButton.addEventListener('click', () => {
+      window.electron.ipcRenderer.invoke('relunch');
+    });
+  });
+};
--- a/router-app/static/index.html
+++ b/router-app/static/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Config Page</title>
+</head>
+
+<body>
+  <h1>配置完成后重启</h1>
+  <button id="restart">重启</button>
+</body>
+
+<script>
+  const restart = document.getElementById('restart');
+  restart.addEventListener('click', () => {
+    window.electron.ipcRenderer.invoke('relunch');
+  });
+</script>
+
+</html>
--- a/router-app/static/packages/config.js
+++ b/router-app/static/packages/config.js
@@ -0,0 +1,3 @@
+export const config = {
+  appListUrl: 'http://localhost:4005/api/router?path=app&key=public-list',
+};
--- a/router-app/static/packages/electron.js
+++ b/router-app/static/packages/electron.js
@@ -0,0 +1,45 @@
+export const checkIsElectron = () => {
+  return typeof window !== 'undefined' && typeof window.electron === 'object';
+};
+export const getElectron = () => {
+  return window.electron;
+};
+export const getAppList = async () => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  console.log('electron', electron);
+  const appList = await electron.ipcRenderer.invoke('get-app-list');
+
+  console.log('appList', appList);
+  return appList;
+};
+
+export const installApp = async (app) => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  console.log('installApp', app);
+  const result = await electron.ipcRenderer.invoke('install-app', app);
+  console.log('installApp result', result);
+  return result;
+};
+
+export const uninstallApp = async (app) => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  console.log('uninstallApp', app);
+  const result = await electron.ipcRenderer.invoke('uninstall-app', app);
+  console.log('uninstallApp result', result);
+  return result;
+};
--- a/router-app/static/packages/index.html
+++ b/router-app/static/packages/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Package Manager</title>
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./electron.js"></script>
+</head>
+<body>
+    <div id="app">
+        <h1>Package Manager</h1>
+        <div id="package-list" class="package-list"></div>
+    </div>
+    <script type="module" src="./main.js"></script>
+</body>
+</html>
--- a/router-app/static/packages/main.js
+++ b/router-app/static/packages/main.js
@@ -0,0 +1,158 @@
+import { config } from './config.js';
+import { getAppList, installApp, uninstallApp } from './electron.js';
+let installedPackages = [];
+let allPackages = [];
+// Store for installed packages
+// const installedPackages = [
+//   { user: 'test', key: 'test-key', version: '1.0.0' },
+//   { user: 'demo', key: 'demo-package', version: '1.2.0' },
+// ];
+
+// Function to fetch packages from API
+async function fetchPackages() {
+  try {
+    // Currently using mock data
+    // TODO: Uncomment the following code when API is ready
+    const response = await fetch(config.appListUrl);
+    const result = await response.json();
+    if (result.code === 200) {
+      return result.data;
+    }
+    throw new Error('Failed to fetch packages');
+  } catch (error) {
+    console.error('Error fetching packages:', error);
+    return [];
+  }
+}
+
+// Mock data for testing
+const mockPackages = [
+  {
+    id: '1',
+    title: 'Demo Package 1',
+    description: 'A test package for demonstration',
+    version: '1.0.0',
+    user: 'test',
+    key: 'test-key',
+  },
+  {
+    id: '2',
+    title: 'Demo Package 2',
+    description: 'Another test package with updates',
+    version: '2.0.0',
+    user: 'demo',
+    key: 'demo-package',
+  },
+  {
+    id: '3',
+    title: 'New Package',
+    description: "A package that hasn't been installed yet",
+    version: '1.0.0',
+    user: 'demo',
+    key: 'new-package',
+  },
+];
+
+// Function to check if a package is installed
+async function getPackageStatus(pkg) {
+  const installed = installedPackages.find((p) => p.user === pkg.user && p.key === pkg.key);
+
+  if (!installed) return 'not-installed';
+  if (installed.version !== pkg.version) return 'update-available';
+  return 'installed';
+}
+
+// Function to create a package card
+async function createPackageCard(pkg) {
+  const status = await getPackageStatus(pkg);
+  const card = document.createElement('div');
+  card.className = 'package-card';
+
+  card.innerHTML = `
+      <h2>${pkg.title}</h2>
+      <p class="description">${pkg.description}</p>
+      <div class="package-info">
+          <span>Version: ${pkg.version}</span>
+          <span>User: ${pkg.user}</span>
+      </div>
+      <div class="actions">
+          ${getActionButton(status, pkg)}
+          ${status !== 'not-installed' ? `<button class="button button-uninstall" onclick="handleUninstall('${pkg.id}')">Uninstall</button>` : ''}
+      </div>
+  `;
+
+  return card;
+}
+
+// Function to get the appropriate action button based on status
+function getActionButton(status, pkg) {
+  switch (status) {
+    case 'not-installed':
+      return `<button class="button button-install" onclick="handleInstall('${pkg.id}')">Install</button>`;
+    case 'update-available':
+      return `<button class="button button-update" onclick="handleUpdate('${pkg.id}')">Update</button>`;
+    case 'installed':
+      return `<button class="button button-reinstall" onclick="handleReinstall('${pkg.id}')">Reinstall</button>`;
+  }
+}
+
+// Action handlers
+window.handleInstall = async (id) => {
+  console.log('Installing package:', id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    await installApp(pkg);
+    renderPackages();
+  }
+};
+
+window.handleUpdate = async (id) => {
+  console.log('Updating package:', id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    await installApp(pkg);
+    renderPackages();
+  }
+};
+
+window.handleReinstall = async (id) => {
+  console.log('Reinstalling package:', id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    await installApp(pkg);
+    renderPackages();
+  }
+};
+
+window.handleUninstall = async (id) => {
+  console.log('Uninstalling package:', id);
+  // const pkg = mockPackages.find((p) => p.id === id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    // TODO: Replace with actual API call
+    const index = installedPackages.findIndex((p) => p.user === pkg.user && p.key === pkg.key);
+    await uninstallApp(pkg);
+    if (index !== -1) {
+      installedPackages.splice(index, 1);
+      renderPackages();
+    }
+  }
+};
+
+// Render packages
+async function renderPackages() {
+  const packageList = document.getElementById('package-list');
+  packageList.innerHTML = '';
+  const installed = await getAppList();
+  installedPackages = installed;
+  for (const pkg of allPackages) {
+    packageList.appendChild(await createPackageCard(pkg));
+  }
+}
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', async () => {
+  const packages = await fetchPackages();
+  allPackages = packages;
+  renderPackages();
+});
--- a/router-app/static/packages/style.css
+++ b/router-app/static/packages/style.css
@@ -0,0 +1,115 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  background-color: #fff8e1;
+  color: #213547;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 {
+  text-align: center;
+  color: #ff8f00;
+}
+
+.package-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.package-card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(255, 143, 0, 0.1);
+  border: 1px solid #ffe0b2;
+}
+
+.package-card h2 {
+  margin: 0 0 0.5rem 0;
+  color: #f57c00;
+}
+
+.package-card .description {
+  color: #666;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+  max-height: 6em;
+}
+
+.package-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.button-install {
+  background-color: #ffa000;
+  color: white;
+}
+
+.button-update {
+  background-color: #ff8f00;
+  color: white;
+}
+
+.button-reinstall {
+  background-color: #ffb300;
+  color: white;
+}
+
+.button-uninstall {
+  background-color: #ff6f00;
+  color: white;
+}
+
+.button:hover {
+  opacity: 0.9;
+}
+
+.button:disabled {
+  background-color: #ffe0b2;
+  cursor: not-allowed;
+}
+
+.error-message {
+  text-align: center;
+  color: #ff6f00;
+  padding: 2rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(255, 143, 0, 0.1);
+  grid-column: 1 / -1;
+}