koishi-plugin-media-luna 0.0.1

package/client/components/settings/PluginsPanel.vue

@@ -0,0 +1,493 @@
+<template>
+  <div class="plugins-panel">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <k-icon name="sync" class="spin" />
+      <span>加载中...</span>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else-if="plugins.length === 0" class="empty-state">
+      <k-icon name="apps" />
+      <p>暂无扩展插件</p>
+      <p class="hint">第三方扩展插件将在这里显示<br>内置功能请在"功能模块"中配置</p>
+    </div>
+
+    <!-- 插件列表 -->
+    <template v-else>
+      <div class="plugins-list">
+        <div
+          v-for="plugin in plugins"
+          :key="plugin.id"
+          class="plugin-card"
+          :class="{ active: selectedPlugin?.id === plugin.id, disabled: !plugin.enabled }"
+          @click="selectPlugin(plugin)"
+        >
+          <div class="plugin-info">
+            <div class="plugin-header">
+              <span class="plugin-name">{{ plugin.name }}</span>
+              <span v-if="plugin.version" class="plugin-version">v{{ plugin.version }}</span>
+            </div>
+            <p class="plugin-description">{{ plugin.description || '暂无描述' }}</p>
+          </div>
+          <div class="plugin-status">
+            <span v-if="plugin.connector" class="plugin-badge connector">连接器</span>
+            <span v-if="plugin.middlewares?.length" class="plugin-badge middleware">
+              {{ plugin.middlewares.length }} 个中间件
+            </span>
+            <k-icon
+              :name="plugin.enabled ? 'check-circle' : 'close-circle'"
+              :class="plugin.enabled ? 'enabled' : 'disabled'"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 插件详情 -->
+      <div v-if="selectedPlugin" class="plugin-detail">
+        <header class="detail-header">
+          <div class="header-left">
+            <h3>{{ selectedPlugin.name }}</h3>
+            <span v-if="selectedPlugin.version" class="version">v{{ selectedPlugin.version }}</span>
+          </div>
+          <div class="header-actions">
+            <k-button
+              v-for="action in selectedPlugin.actions"
+              :key="action.name"
+              :type="action.type || 'default'"
+              size="small"
+              @click="executeAction(action)"
+            >
+              <template v-if="action.icon" #icon>
+                <k-icon :name="action.icon" />
+              </template>
+              {{ action.label }}
+            </k-button>
+          </div>
+        </header>
+
+        <!-- 连接器信息 -->
+        <div v-if="selectedPlugin.connector" class="connector-info">
+          <h4>连接器</h4>
+          <div class="connector-meta">
+            <span class="connector-id">{{ selectedPlugin.connector.id }}</span>
+            <span class="connector-types">
+              支持: {{ selectedPlugin.connector.supportedTypes?.join(', ') || '无' }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 中间件列表 -->
+        <div v-if="selectedPlugin.middlewares?.length" class="middlewares-list">
+          <h4>中间件</h4>
+          <div class="middleware-tags">
+            <span
+              v-for="mw in selectedPlugin.middlewares"
+              :key="mw.name"
+              class="middleware-tag"
+              :class="{ enabled: mw.enabled }"
+            >
+              {{ mw.displayName || mw.name }}
+              <span class="phase-badge">{{ phaseLabel(mw.phase) }}</span>
+            </span>
+          </div>
+        </div>
+
+        <!-- 配置表单 -->
+        <div v-if="selectedPlugin.configFields?.length" class="config-section">
+          <h4>配置</h4>
+          <ConfigRenderer
+            :fields="selectedPlugin.configFields"
+            v-model="pluginConfig"
+          />
+          <div class="config-actions">
+            <k-button type="primary" @click="saveConfig" :loading="saving">
+              <template #icon><k-icon name="save" /></template>
+              保存配置
+            </k-button>
+          </div>
+        </div>
+
+        <!-- 无配置提示 -->
+        <div v-else class="no-config">
+          <k-icon name="info-circle" />
+          <span>该插件暂无可配置项</span>
+        </div>
+      </div>
+
+      <!-- 无选中提示 -->
+      <div v-else class="no-selection">
+        <k-icon name="apps" />
+        <p>请从左侧选择一个插件查看详情</p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { message } from '@koishijs/client'
+import { pluginApi, PluginInfo } from '../../api'
+import ConfigRenderer from '../ConfigRenderer.vue'
+
+// 状态
+const loading = ref(true)
+const plugins = ref<PluginInfo[]>([])
+const selectedPlugin = ref<PluginInfo | null>(null)
+const pluginConfig = ref<Record<string, any>>({})
+const saving = ref(false)
+
+// 阶段标签映射
+const phaseLabels: Record<string, string> = {
+  'lifecycle-prepare': '准备',
+  'lifecycle-pre-request': '前置',
+  'lifecycle-request': '请求',
+  'lifecycle-post-request': '后置',
+  'lifecycle-finalize': '完成'
+}
+
+const phaseLabel = (phase: string) => phaseLabels[phase] || phase
+
+// 加载插件列表
+const loadPlugins = async () => {
+  try {
+    loading.value = true
+    plugins.value = await pluginApi.list()
+  } catch (e) {
+    console.error('Failed to load plugins:', e)
+    plugins.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 选择插件
+const selectPlugin = (plugin: PluginInfo) => {
+  selectedPlugin.value = plugin
+  pluginConfig.value = { ...plugin.config }
+  // 填充默认值
+  for (const field of plugin.configFields || []) {
+    if (pluginConfig.value[field.key] === undefined && field.default !== undefined) {
+      pluginConfig.value[field.key] = field.default
+    }
+  }
+}
+
+// 保存配置
+const saveConfig = async () => {
+  if (!selectedPlugin.value) return
+  saving.value = true
+  try {
+    await pluginApi.updateConfig(selectedPlugin.value.id, pluginConfig.value)
+    message.success('保存成功')
+    await loadPlugins()
+    // 更新当前选中的插件
+    const updated = plugins.value.find(p => p.id === selectedPlugin.value?.id)
+    if (updated) {
+      selectedPlugin.value = updated
+      pluginConfig.value = { ...updated.config }
+    }
+  } catch (e) {
+    message.error('保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 执行操作
+const executeAction = async (action: { apiEvent: string; label: string }) => {
+  try {
+    // 操作使用通用的 API 格式
+    const { send } = await import('@koishijs/client')
+    const result = await send(action.apiEvent as any) as any
+    if (result?.success === false) {
+      throw new Error(result.error || '操作失败')
+    }
+    // 特殊处理同步结果
+    if (action.apiEvent === 'media-luna/presets/sync' && result?.data) {
+      const { added, updated, removed, notModified } = result.data
+      if (notModified) {
+        message.info('数据未变化，无需更新')
+      } else {
+        message.success(`同步完成：新增 ${added}，更新 ${updated}，删除 ${removed}`)
+      }
+    } else if (result?.data?.message) {
+      message.success(result.data.message)
+    } else {
+      message.success(`${action.label} 完成`)
+    }
+    await loadPlugins()
+  } catch (e) {
+    message.error(`${action.label} 失败: ${e instanceof Error ? e.message : '未知错误'}`)
+  }
+}
+
+onMounted(loadPlugins)
+</script>
+
+<style scoped>
+.plugins-panel {
+  display: flex;
+  gap: 1.5rem;
+  height: 100%;
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 3rem;
+  color: var(--k-color-text-description);
+  width: 100%;
+}
+
+.loading-state .k-icon,
+.empty-state .k-icon {
+  font-size: 2rem;
+  opacity: 0.5;
+}
+
+.empty-state .hint {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.plugins-list {
+  width: 280px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+.plugin-card {
+  background: var(--k-card-bg);
+  border: 1px solid var(--k-color-border);
+  border-radius: 10px;
+  padding: 12px 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.plugin-card:hover {
+  border-color: var(--k-color-active);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.plugin-card.active {
+  border-color: var(--k-color-active);
+  background: var(--k-color-active-bg);
+}
+
+.plugin-card.disabled {
+  opacity: 0.6;
+}
+
+.plugin-info {
+  margin-bottom: 8px;
+}
+
+.plugin-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.plugin-name {
+  font-weight: 500;
+  color: var(--k-color-text);
+}
+
+.plugin-version {
+  font-size: 11px;
+  color: var(--k-color-text-description);
+  background: var(--k-color-bg-2);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.plugin-description {
+  font-size: 12px;
+  color: var(--k-color-text-description);
+  margin: 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.plugin-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.plugin-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--k-color-bg-2);
+  color: var(--k-color-text-description);
+}
+
+.plugin-badge.connector {
+  background: rgba(var(--k-color-active-rgb), 0.15);
+  color: var(--k-color-active);
+}
+
+.plugin-badge.middleware {
+  background: rgba(var(--k-color-success-rgb), 0.15);
+  color: var(--k-color-success);
+}
+
+.plugin-status .k-icon {
+  margin-left: auto;
+}
+
+.plugin-status .enabled {
+  color: var(--k-color-success);
+}
+
+.plugin-status .disabled {
+  color: var(--k-color-text-description);
+}
+
+.plugin-detail {
+  flex: 1;
+  min-width: 0;
+  background: var(--k-card-bg);
+  border: 1px solid var(--k-color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  overflow-y: auto;
+  max-height: calc(100vh - 200px);
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--k-color-border);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-left h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.header-left .version {
+  font-size: 12px;
+  color: var(--k-color-text-description);
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.connector-info, .middlewares-list, .config-section {
+  margin-bottom: 1.5rem;
+}
+
+.connector-info h4, .middlewares-list h4, .config-section h4 {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--k-color-text);
+  margin: 0 0 0.75rem 0;
+}
+
+.connector-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--k-color-text-description);
+}
+
+.connector-id {
+  font-family: monospace;
+  background: var(--k-color-bg-2);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.middleware-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.middleware-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--k-color-bg-2);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--k-color-text-description);
+}
+
+.middleware-tag.enabled {
+  color: var(--k-color-text);
+}
+
+.phase-badge {
+  font-size: 10px;
+  padding: 1px 4px;
+  background: var(--k-color-bg-1);
+  border-radius: 3px;
+}
+
+.config-actions {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--k-color-border);
+}
+
+.no-config, .no-selection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 3rem;
+  color: var(--k-color-text-description);
+}
+
+.no-config .k-icon, .no-selection .k-icon {
+  font-size: 2rem;
+  opacity: 0.5;
+}
+
+.no-selection {
+  flex: 1;
+  background: var(--k-card-bg);
+  border: 1px solid var(--k-color-border);
+  border-radius: 12px;
+}
+</style>

package/client/index.ts

@@ -0,0 +1,13 @@
+import { Context } from '@koishijs/client'
+import {} from 'koishi-plugin-media-luna'
+
+import Index from './pages/index.vue'
+
+export default (ctx: Context) => {
+  ctx.page({
+    name: 'Media Luna',
+    path: '/media-luna',
+    component: Index,
+    order: 500,
+  })
+}

package/client/pages/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <k-layout class="app-layout media-luna-app">
+    <div class="top-nav">
+      <div class="nav-container">
+        <div class="logo-area"><span class="logo-text">MEDIA LUNA</span></div>
+        <div class="nav-tabs" role="tablist">
+          <div
+            v-for="item in menuItems"
+            :key="item.id"
+            class="nav-tab"
+            :class="{ active: currentView === item.id }"
+            @click="currentView = item.id"
+            role="tab"
+            :aria-selected="currentView === item.id"
+          >
+            <component :is="item.icon" class="tab-icon" />
+            <span>{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-content">
+      <keep-alive>
+        <component :is="activeComponent" />
+      </keep-alive>
+    </div>
+  </k-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, h } from 'vue'
+import ChannelsView from '../components/ChannelsView.vue'
+import PresetsView from '../components/PresetsView.vue'
+import TasksView from '../components/TasksView.vue'
+import GenerateView from '../components/GenerateView.vue'
+import SettingsView from '../components/SettingsView.vue'
+
+const currentView = ref('generate')
+
+const activeComponent = computed(() => {
+  switch (currentView.value) {
+    case 'generate': return GenerateView
+    case 'channels': return ChannelsView
+    case 'presets': return PresetsView
+    case 'tasks': return TasksView
+    case 'settings': return SettingsView
+    default: return GenerateView
+  }
+})
+
+const createIcon = (d: string) => () => h('svg', { viewBox: '0 0 24 24', fill: 'currentColor' }, [ h('path', { d }) ])
+
+const menuItems = [
+  { id: 'generate', label: '生成', icon: createIcon('M7.5 5.6L10 7 8.6 4.5 10 2 7.5 3.4 5 2 6.4 4.5 5 7zM19 2l-2.5 1.4L14 2l1.4 2.5L14 7l2.5-1.4L19 7l-1.4-2.5zm-5.6 5.4L9 12l4.4 4.6L17.8 12zM2 13l2.5 1.4L6 17l1.4-2.5L10 13 7.5 11.6 6 9l-1.4 2.5z') },
+  { id: 'channels', label: '渠道', icon: createIcon('M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z') },
+  { id: 'presets', label: '预设', icon: createIcon('M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z') },
+  { id: 'tasks', label: '任务', icon: createIcon('M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z') },
+  { id: 'settings', label: '设置', icon: createIcon('M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z') },
+]
+
+// Logic to hide Koishi's default header
+let prevHeaderDisplay = ''
+function hideHeader() {
+  const el = document.querySelector('.layout-header') as HTMLElement
+  if (el) { prevHeaderDisplay = el.style.display; el.style.display = 'none' }
+}
+function restoreHeader() {
+  const el = document.querySelector('.layout-header') as HTMLElement
+  if (el) el.style.display = prevHeaderDisplay || ''
+}
+onMounted(hideHeader)
+onBeforeUnmount(restoreHeader)
+</script>
+
+<style scoped>
+.app-layout { background: var(--k-color-bg-1); height: 100vh; min-height: 0; }
+.top-nav { position: sticky; top: 0; z-index: 10; background: var(--k-color-bg-2); border-bottom: 1px solid var(--k-color-border); height: 50px; }
+.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 50px; display: flex; flex-direction: row; align-items: center; gap: 16px; }
+.nav-tabs { display: flex; flex-direction: row; gap: 8px; margin-left: auto; }
+.nav-tab { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; color: var(--k-color-text-description); border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; white-space: nowrap; }
+.nav-tab:hover { color: var(--k-color-text); }
+.nav-tab.active { color: var(--k-color-active); border-bottom-color: var(--k-color-active); font-weight: 600; }
+.tab-icon { display: inline-flex; font-size: 14px; width: 14px; height: 14px; flex-shrink: 0; }
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  height: calc(100vh - 50px);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.main-content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.logo-area .logo-text { font-weight: 600; letter-spacing: .5px; color: var(--k-color-text); white-space: nowrap; }
+
+/* Hide default Koishi console headers */
+.app-layout :deep(.k-header),
+.app-layout :deep(.k-view-header),
+.app-layout :deep(.k-page-header),
+.app-layout :deep(.k-toolbar) { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
+</style>
+
+<style>
+/* Global Element Plus Overrides */
+.el-dialog {
+  background-color: var(--k-card-bg) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
+  border: 1px solid var(--k-color-border) !important;
+  --el-dialog-bg-color: var(--k-card-bg) !important;
+}
+
+.el-dialog__header {
+  padding: 1.25rem 1.5rem !important;
+  border-bottom: 1px solid var(--k-color-border) !important;
+  margin-right: 0 !important;
+}
+
+.el-dialog__title {
+  font-weight: 600 !important;
+  color: var(--k-color-text) !important;
+  font-size: 1.1rem !important;
+}
+
+.el-dialog__headerbtn {
+  top: 1.25rem !important;
+}
+
+.el-dialog__body {
+  padding: 1.5rem !important;
+  color: var(--k-color-text) !important;
+}
+
+.el-dialog__footer {
+  padding: 1.25rem 1.5rem !important;
+  border-top: 1px solid var(--k-color-border) !important;
+  background-color: var(--k-color-bg-1) !important;
+}
+
+/* Fix Input Backgrounds in Dialogs */
+.el-input__wrapper, .el-textarea__inner {
+  background-color: var(--k-color-bg-2) !important;
+  box-shadow: 0 0 0 1px var(--k-color-border) inset !important;
+}
+
+.el-input__wrapper:hover, .el-textarea__inner:hover {
+  box-shadow: 0 0 0 1px var(--k-color-active) inset !important;
+}
+
+.el-input__wrapper.is-focus, .el-textarea__inner:focus {
+  box-shadow: 0 0 0 1px var(--k-color-active) inset !important;
+  background-color: var(--k-color-bg-1) !important;
+}
+
+.el-input__inner {
+  color: var(--k-color-text) !important;
+}
+
+/* Fix Select Dropdown */
+.el-select-dropdown__item {
+  color: var(--k-color-text) !important;
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  background-color: var(--k-color-bg-2) !important;
+}
+
+.el-popper.is-light {
+  background: var(--k-card-bg) !important;
+  border: 1px solid var(--k-color-border) !important;
+}
+</style>