koishi-plugin-media-luna 0.0.1

package/client/components/ScrollContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="scroll-container">
+    <div class="scroll-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.scroll-container {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--k-card-bg);
+  border: 1px solid var(--k-color-border);
+  border-radius: 12px;
+}
+
+.scroll-content {
+  height: 100%;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+/* 自定义滚动条 */
+.scroll-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scroll-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scroll-content::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
+  border-radius: 4px;
+}
+
+.scroll-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--k-color-text-description);
+}
+</style>

package/client/components/SettingsView.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="settings-view">
+    <!-- 侧边栏导航 -->
+    <aside class="sidebar">
+      <nav class="nav-list">
+        <div
+          v-for="panel in panels"
+          :key="panel.id"
+          class="nav-item"
+          :class="{ active: activePanel === panel.id }"
+          @click="activePanel = panel.id"
+        >
+          <k-icon :name="panel.icon"></k-icon>
+          <span>{{ panel.name }}</span>
+        </div>
+      </nav>
+    </aside>
+
+    <!-- 主内容区 -->
+    <main class="main-content">
+      <div v-if="loading" class="loading">
+        <k-icon name="sync" class="spin"></k-icon>
+        加载中...
+      </div>
+
+      <template v-else-if="currentPanel">
+        <!-- 面板标题 -->
+        <header class="panel-header">
+          <h2>{{ currentPanel.name }}</h2>
+          <p v-if="currentPanel.description">{{ currentPanel.description }}</p>
+        </header>
+
+        <!-- 功能模块面板 -->
+        <template v-if="currentPanel.component === 'middlewares'">
+          <MiddlewaresPanel />
+        </template>
+
+        <!-- 扩展插件面板 -->
+        <template v-else-if="currentPanel.component === 'plugins'">
+          <PluginsPanel />
+        </template>
+
+        <!-- 自定义面板 -->
+        <template v-else-if="currentPanel.type === 'custom' && currentPanel.configFields">
+          <div class="custom-panel">
+            <ConfigRenderer
+              :fields="currentPanel.configFields"
+              v-model="customConfig"
+            />
+            <div class="actions">
+              <k-button type="primary" @click="saveCustomConfig">
+                <template #icon><k-icon name="save"></k-icon></template>
+                保存
+              </k-button>
+            </div>
+          </div>
+        </template>
+      </template>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { message } from '@koishijs/client'
+import { settingsApi, SettingsPanelInfo } from '../api'
+import ConfigRenderer from './ConfigRenderer.vue'
+import MiddlewaresPanel from './settings/MiddlewaresPanel.vue'
+import PluginsPanel from './settings/PluginsPanel.vue'
+
+// 状态
+const loading = ref(true)
+const panels = ref<SettingsPanelInfo[]>([])
+const activePanel = ref('')
+const customConfig = ref<Record<string, any>>({})
+
+// 当前面板
+const currentPanel = computed(() =>
+  panels.value.find(p => p.id === activePanel.value)
+)
+
+// 加载面板列表
+const loadPanels = async () => {
+  try {
+    panels.value = await settingsApi.panels()
+    if (panels.value.length && !activePanel.value) {
+      activePanel.value = panels.value[0].id
+    }
+  } catch (e) {
+    message.error('加载设置面板失败')
+  }
+}
+
+// 加载自定义面板配置
+const loadCustomConfig = () => {
+  if (currentPanel.value?.type === 'custom') {
+    customConfig.value = { ...(currentPanel.value.config || {}) }
+    // 填充默认值
+    for (const field of currentPanel.value.configFields || []) {
+      if (customConfig.value[field.key] === undefined && field.default !== undefined) {
+        customConfig.value[field.key] = field.default
+      }
+    }
+  }
+}
+
+// 保存自定义面板配置
+const saveCustomConfig = async () => {
+  if (!currentPanel.value) return
+  try {
+    await settingsApi.update(currentPanel.value.id, customConfig.value)
+    message.success('保存成功')
+    await loadPanels()
+  } catch (e) {
+    message.error('保存失败')
+  }
+}
+
+// 监听面板切换
+watch(activePanel, () => {
+  if (currentPanel.value?.type === 'custom') {
+    loadCustomConfig()
+  }
+})
+
+onMounted(async () => {
+  await loadPanels()
+  loading.value = false
+})
+</script>
+
+<style scoped>
+.settings-view {
+  display: flex;
+  gap: 2rem;
+  height: 100%;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 180px;
+  flex-shrink: 0;
+}
+
+.nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--k-color-bg-2);
+  border-radius: 12px;
+  padding: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--k-color-text-description);
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.nav-item:hover {
+  background: var(--k-color-bg-1);
+  color: var(--k-color-text);
+}
+
+.nav-item.active {
+  background: var(--k-card-bg);
+  color: var(--k-color-active);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.main-content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 4rem;
+  color: var(--k-color-text-description);
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.panel-header {
+  margin-bottom: 1.5rem;
+}
+
+.panel-header h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--k-color-text);
+  margin: 0 0 0.5rem 0;
+}
+
+.panel-header p {
+  color: var(--k-color-text-description);
+  font-size: 14px;
+  margin: 0;
+}
+
+.custom-panel {
+  background: var(--k-card-bg);
+  border: 1px solid var(--k-color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.actions {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--k-color-border);
+}
+</style>

package/client/components/StatusBadge.vue

@@ -0,0 +1,55 @@
+<template>
+  <span class="status-badge" :class="status">
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: string
+}>()
+
+const label = computed(() => {
+  switch (props.status) {
+    case 'pending': return '等待中'
+    case 'processing': return '处理中'
+    case 'success': return '成功'
+    case 'failed': return '失败'
+    default: return props.status
+  }
+})
+</script>
+
+<style scoped>
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.status-badge.pending {
+  background-color: var(--k-color-bg-2);
+  color: var(--k-color-text-description);
+}
+
+.status-badge.processing {
+  background-color: var(--k-color-primary-bg);
+  color: var(--k-color-primary);
+}
+
+.status-badge.success {
+  background-color: var(--k-color-success-bg);
+  color: var(--k-color-success);
+}
+
+.status-badge.failed {
+  background-color: var(--k-color-error-bg);
+  color: var(--k-color-error);
+}
+</style>

package/client/components/TagFilter.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="tag-filter">
+    <div class="filter-tags">
+      <span
+        v-for="tag in availableTags"
+        :key="tag"
+        class="filter-tag"
+        :class="{ active: selectedTags.includes(tag) }"
+        @click="toggleTag(tag)"
+      >
+        {{ tag }}
+      </span>
+    </div>
+    <div class="filter-input-wrapper" v-if="showInput">
+      <el-input
+        v-model="inputValue"
+        placeholder="输入标签筛选..."
+        size="small"
+        clearable
+        @keyup.enter="addCustomTag"
+        class="filter-input"
+      >
+        <template #prefix><k-icon name="search"></k-icon></template>
+      </el-input>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** v-model 绑定值 */
+  modelValue: string[]
+  /** 所有可用的标签（从数据中提取） */
+  allTags: string[]
+  /** 预置的常用标签（始终显示） */
+  presetTags?: string[]
+  /** 是否显示输入框 */
+  showInput?: boolean
+  /** 最多显示多少个动态标签 */
+  maxDynamicTags?: number
+}>(), {
+  modelValue: () => [],
+  presetTags: () => [],
+  showInput: true,
+  maxDynamicTags: 20
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void
+  (e: 'change', value: string[]): void
+}>()
+
+const selectedTags = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+  }
+})
+
+const inputValue = ref('')
+
+// 合并预置标签和动态标签
+const availableTags = computed(() => {
+  const dynamicTags = props.allTags
+    .filter(t => !props.presetTags.includes(t))
+    .slice(0, props.maxDynamicTags)
+
+  // 预置标签在前，动态标签在后
+  return [...props.presetTags, ...dynamicTags]
+})
+
+const toggleTag = (tag: string) => {
+  const current = [...selectedTags.value]
+  const index = current.indexOf(tag)
+  if (index >= 0) {
+    current.splice(index, 1)
+  } else {
+    current.push(tag)
+  }
+  selectedTags.value = current
+}
+
+const addCustomTag = () => {
+  const tag = inputValue.value.trim()
+  if (tag && !selectedTags.value.includes(tag)) {
+    selectedTags.value = [...selectedTags.value, tag]
+  }
+  inputValue.value = ''
+}
+</script>
+
+<style scoped>
+.tag-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.filter-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.filter-tag {
+  padding: 4px 12px;
+  font-size: 0.85rem;
+  border-radius: 16px;
+  border: 1px solid var(--k-color-border);
+  background-color: transparent;
+  color: var(--k-color-text-description);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.filter-tag:hover {
+  border-color: var(--k-color-active);
+  color: var(--k-color-active);
+}
+
+.filter-tag.active {
+  background-color: var(--k-color-active);
+  border-color: var(--k-color-active);
+  color: white;
+}
+
+.filter-input-wrapper {
+  flex-shrink: 0;
+}
+
+.filter-input {
+  width: 180px;
+}
+</style>

package/client/components/TagInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="tag-input">
+    <el-select
+      v-model="model"
+      multiple
+      filterable
+      allow-create
+      default-first-option
+      :placeholder="placeholder"
+      class="tag-select"
+      tag-type="primary"
+    >
+      <el-option
+        v-for="item in suggestions"
+        :key="item"
+        :label="item"
+        :value="item"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string[],
+  suggestions?: string[],
+  placeholder?: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+</script>
+
+<style scoped>
+.tag-input {
+  width: 100%;
+}
+.tag-select {
+  width: 100%;
+}
+
+.tag-select :deep(.el-tag) {
+  background-color: var(--k-color-bg-3);
+  color: var(--k-color-text);
+  border-color: transparent;
+  border-radius: 4px;
+}
+
+.tag-select :deep(.el-tag .el-tag__close) {
+  color: var(--k-color-text-description);
+}
+
+.tag-select :deep(.el-tag .el-tag__close:hover) {
+  background-color: var(--k-color-text);
+  color: var(--k-color-bg-1);
+}
+</style>