@agentunion/kite 1.5.0 → 1.6.1

package/extensions/services/evol/web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "evol-console",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:check": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.0",
+    "element-plus": "^2.5.0",
+    "pinia": "^2.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0",
+    "echarts": "^5.5.0",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vue-tsc": "^3.2.5"
+  }
+}

package/extensions/services/evol/web/src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+// Root App component - just renders router-view
+</script>

package/extensions/services/evol/web/src/components/layout/AppHeader.vue

@@ -0,0 +1,202 @@
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <img src="/logo.png" alt="Evol" class="header-logo" />
+      <h1 class="header-title">{{ t('header.title') }}</h1>
+    </div>
+
+    <div class="header-right">
+      <!-- 流量统计 -->
+      <span class="traffic-stats">
+        ↑{{ formatBytes(trafficStats.txRate) }}/s ↓{{ formatBytes(trafficStats.rxRate) }}/s
+      </span>
+
+      <!-- 重连次数 -->
+      <span v-if="reconnectCount > 0" class="reconnect-count">
+        {{ t('header.reconnectCount', { n: reconnectCount }) }}
+      </span>
+
+      <!-- 连接状态 -->
+      <span :style="{ color: statusColor }">
+        {{ statusText }}
+      </span>
+
+      <!-- 主题切换 -->
+      <button class="header-btn" @click="toggleTheme" :title="t('theme.' + theme)">
+        {{ isDark ? '🌙' : '☀️' }}
+      </button>
+
+      <!-- 语言切换 -->
+      <button class="header-btn" @click="toggleLocale">
+        {{ locale === 'zh' ? 'EN' : '中' }}
+      </button>
+
+      <!-- 用户信息 -->
+      <div v-if="authStore.isAuthenticated" class="user-info">
+        <span class="user-name">{{ authStore.displayName }}</span>
+        <span class="user-credits">{{ t('header.credits', { n: authStore.credits }) }}</span>
+        <span class="user-divider">|</span>
+        <a href="#" @click.prevent="handleLogout" class="logout-link">{{ t('common.logout') }}</a>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useConnectionStore } from '@/stores/connection'
+import { useFormatters } from '@/composables/useFormatters'
+import { useI18n } from '@/i18n'
+import { useTheme } from '@/composables/useTheme'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const connectionStore = useConnectionStore()
+const { formatBytes } = useFormatters()
+const { t, locale, setLocale } = useI18n()
+const { theme, isDark, toggleTheme } = useTheme()
+
+const trafficStats = computed(() => connectionStore.trafficStats)
+const reconnectCount = computed(() => connectionStore.reconnectCount)
+
+function toggleLocale() {
+  setLocale(locale.value === 'zh' ? 'en' : 'zh')
+}
+
+const statusColor = computed(() => {
+  switch (connectionStore.status) {
+    case 'connected': return '#22c55e'
+    case 'disconnected': return '#ef4444'
+    case 'reconnecting': return '#f39c12'
+    default: return '#999'
+  }
+})
+
+const statusText = computed(() => {
+  switch (connectionStore.status) {
+    case 'connected': return '● ' + t('header.connected')
+    case 'disconnected': return '○ ' + t('header.disconnected')
+    case 'reconnecting': return '⟳ ' + t('header.reconnecting')
+    default: return '○ ' + t('header.disconnected')
+  }
+})
+
+async function handleLogout() {
+  const client = connectionStore.getClient()
+  await authStore.logout(client)
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.app-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--header-height);
+  background: var(--header-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--header-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  z-index: 100;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-logo {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 14px;
+}
+
+.traffic-stats {
+  color: var(--text-muted);
+  font-family: 'Spline Sans Mono', monospace;
+  font-size: 13px;
+}
+
+.reconnect-count {
+  color: var(--text-secondary);
+}
+
+.header-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--border-color);
+  background: var(--btn-ghost-bg);
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.header-btn:hover {
+  background: var(--border-color);
+  transform: translateY(-1px);
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+}
+
+.user-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.user-credits {
+  color: var(--primary);
+  font-family: 'Spline Sans Mono', monospace;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.user-divider {
+  color: var(--border-color);
+}
+
+.logout-link {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.2s;
+  font-size: 13px;
+}
+
+.logout-link:hover {
+  color: var(--error);
+}
+</style>

package/extensions/services/evol/web/src/components/layout/AppLayout.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-layout">
+    <AppHeader />
+    <div class="app-body">
+      <AppSidebar />
+      <main class="app-content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import AppHeader from './AppHeader.vue'
+import AppSidebar from './AppSidebar.vue'
+import { useConnectionStore } from '@/stores/connection'
+import { useAuthStore } from '@/stores/auth'
+
+const connectionStore = useConnectionStore()
+const authStore = useAuthStore()
+
+onMounted(() => {
+  connectionStore.setOnAuthenticated(async (reconnected) => {
+    try {
+      const client = connectionStore.getClient()
+      if (client) {
+        await authStore.loadUserInfo(client)
+      }
+    } catch (e) {
+      console.error('Failed to load user info after auth:', e)
+    }
+  })
+
+  connectionStore.initKernelClient()
+})
+</script>
+
+<style scoped>
+.app-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  margin-top: var(--header-height);
+}
+
+.app-content {
+  flex: 1;
+  padding: 28px 32px 40px;
+  overflow-y: auto;
+  background: transparent;
+  margin-left: var(--sidebar-width);
+  transition: background-color 0.2s;
+}
+</style>

package/extensions/services/evol/web/src/components/layout/AppSidebar.vue

@@ -0,0 +1,115 @@
+<template>
+  <nav class="app-sidebar">
+    <ul class="nav-list">
+      <li v-for="item in menuItems" :key="item.path">
+        <router-link
+          :to="item.path"
+          :class="['nav-item', { active: isActive(item.path) }]"
+        >
+          <span class="nav-label">{{ item.label }}</span>
+          <span class="nav-sublabel">{{ item.sublabel }}</span>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from '@/i18n'
+import { usePagesStore } from '@/stores/pages'
+
+const route = useRoute()
+const { t, locale } = useI18n()
+const pagesStore = usePagesStore()
+
+const menuItems = computed(() => {
+  // 内置页面
+  const builtins = [
+    { path: '/account', label: t('sidebar.account'), sublabel: t('sidebar.accountSub'), order: 10 },
+    { path: '/ai-service', label: t('sidebar.aiService'), sublabel: t('sidebar.aiServiceSub'), order: 20 },
+    { path: '/credits', label: t('sidebar.records'), sublabel: t('sidebar.recordsSub'), order: 30 },
+    { path: '/team', label: t('sidebar.team'), sublabel: t('sidebar.teamSub'), order: 40 },
+    { path: '/commission', label: t('sidebar.commission'), sublabel: t('sidebar.commissionSub'), order: 50 },
+  ]
+
+  // 外部注册页面
+  const externals = pagesStore.sortedPages.map(p => ({
+    path: p.path,
+    label: locale.value === 'zh' ? p.label.zh : p.label.en,
+    sublabel: p.module_id,
+    order: p.order,
+    badge: p.badge,
+  }))
+
+  // 合并排序
+  return [...builtins, ...externals].sort((a, b) => a.order - b.order)
+})
+
+function isActive(path: string) {
+  return route.path === path
+}
+</script>
+
+<style scoped>
+.app-sidebar {
+  width: var(--sidebar-width);
+  background: var(--sidebar-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  padding-top: var(--header-height);
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  border-right: 1px solid var(--border-color);
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.nav-list {
+  list-style: none;
+  padding: 16px 12px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  color: var(--sidebar-text);
+  text-decoration: none;
+  transition: all 0.2s;
+  cursor: pointer;
+  border-radius: 12px;
+  border-left: none;
+}
+
+.nav-item:hover {
+  background: var(--sidebar-hover);
+}
+
+.nav-item.active {
+  background: var(--sidebar-active);
+  color: var(--sidebar-text-active);
+  border-left: none;
+}
+
+.nav-label {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.nav-sublabel {
+  font-size: 12px;
+  opacity: 0.6;
+  margin-top: 2px;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+</style>

package/extensions/services/evol/web/src/components/login/LoginPage.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="login-page">
+    <!-- 装饰光晕 -->
+    <div class="glow glow-1"></div>
+    <div class="glow glow-2"></div>
+
+    <!-- 主题切换按钮 -->
+    <div class="login-toolbar">
+      <button class="toolbar-btn" @click="toggleTheme" :title="themeLabel">
+        {{ isDark ? '🌙' : '☀️' }}
+      </button>
+      <button class="toolbar-btn" @click="toggleLocale">
+        {{ locale === 'zh' ? 'EN' : '中' }}
+      </button>
+    </div>
+
+    <div class="login-container">
+      <div class="login-box">
+        <!-- Logo -->
+        <div class="login-logo">
+          <img src="/logo.png" alt="Evol" class="logo-img" />
+        </div>
+
+        <h1 class="login-title">{{ t('login.title') }}</h1>
+
+        <el-form @submit.prevent="handleLogin">
+          <el-form-item :label="t('login.phone')">
+            <el-input
+              v-model="phone"
+              :placeholder="t('login.phonePlaceholder')"
+              maxlength="11"
+            />
+          </el-form-item>
+
+          <el-form-item :label="t('login.code')">
+            <div style="display: flex; gap: 10px;">
+              <el-input
+                v-model="code"
+                :placeholder="t('login.codePlaceholder')"
+                maxlength="6"
+                style="flex: 1"
+                @keyup.enter="handleLogin"
+              />
+              <el-button
+                :disabled="countdown > 0"
+                @click="handleSendCode"
+              >
+                {{ countdown > 0 ? t('login.sendCodeCountdown', { n: countdown }) : t('login.sendCode') }}
+              </el-button>
+            </div>
+          </el-form-item>
+
+          <el-button
+            type="primary"
+            style="width: 100%"
+            :loading="loading"
+            @click="handleLogin"
+          >
+            {{ t('login.loginBtn') }}
+          </el-button>
+        </el-form>
+
+        <div v-if="errorMsg" class="login-error">
+          {{ errorMsg }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useI18n } from '@/i18n'
+import { useTheme } from '@/composables/useTheme'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const { t, locale, setLocale } = useI18n()
+const { isDark, toggleTheme } = useTheme()
+
+const themeLabel = ref('')
+
+const phone = ref('')
+const code = ref('')
+const countdown = ref(0)
+const loading = ref(false)
+const errorMsg = ref('')
+
+let countdownTimer: number | null = null
+
+function toggleLocale() {
+  setLocale(locale.value === 'zh' ? 'en' : 'zh')
+}
+
+async function handleSendCode() {
+  if (!phone.value || phone.value.length !== 11) {
+    ElMessage.error(t('login.phoneInvalid'))
+    return
+  }
+
+  try {
+    const result = await authStore.sendSMS(phone.value)
+    if (result.success) {
+      ElMessage.success(t('login.codeSent'))
+      countdown.value = 60
+      startCountdown()
+    } else {
+      ElMessage.error(result.msg || t('login.codeSendFailed'))
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || t('login.codeSendFailed'))
+  }
+}
+
+function startCountdown() {
+  if (countdownTimer) clearInterval(countdownTimer)
+  countdownTimer = window.setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      clearInterval(countdownTimer!)
+      countdownTimer = null
+    }
+  }, 1000)
+}
+
+async function handleLogin() {
+  if (!phone.value || !code.value) {
+    errorMsg.value = t('login.phoneAndCodeRequired')
+    return
+  }
+
+  loading.value = true
+  errorMsg.value = ''
+
+  try {
+    const result = await authStore.login(phone.value, code.value)
+    if (result.success) {
+      ElMessage.success(t('login.loginSuccess'))
+      router.push('/')
+    } else {
+      errorMsg.value = result.msg || t('login.loginFailed')
+    }
+  } catch (e: any) {
+    errorMsg.value = e.message || t('login.loginFailed')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  background: var(--app-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 装饰光晕 */
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.4;
+  pointer-events: none;
+  animation: float 8s ease-in-out infinite;
+}
+
+.glow-1 {
+  width: 400px;
+  height: 400px;
+  background: #3b82f6;
+  top: -100px;
+  left: -100px;
+}
+
+.glow-2 {
+  width: 350px;
+  height: 350px;
+  background: #6366f1;
+  bottom: -80px;
+  right: -80px;
+  animation-delay: -4s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-30px); }
+}
+
+.login-toolbar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+}
+
+.toolbar-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--border-color);
+  background: var(--btn-ghost-bg);
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  backdrop-filter: blur(10px);
+}
+
+.toolbar-btn:hover {
+  background: var(--border-color);
+  transform: translateY(-1px);
+}
+
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+.login-box {
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  padding: 40px;
+  border-radius: 24px;
+  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.3);
+  border: 1px solid var(--border-color);
+  width: 100%;
+  max-width: 420px;
+}
+
+.login-logo {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.logo-img {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+}
+
+.login-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 32px;
+  color: var(--text-primary);
+  text-align: center;
+  letter-spacing: -0.02em;
+}
+
+.login-error {
+  color: var(--error);
+  margin-top: 16px;
+  text-align: center;
+  font-size: 14px;
+}
+</style>