koishi-plugin-media-luna 0.0.1

package/client/components/ConfigRenderer.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="config-renderer">
+    <template v-for="field in fields" :key="field.key">
+      <div class="form-row" v-if="shouldShowField(field)">
+        <div class="form-label" :class="{ required: field.required }">
+          {{ field.label }}
+        </div>
+        <div class="field-container">
+          <!-- Boolean 类型 -->
+          <template v-if="field.type === 'boolean'">
+            <el-switch
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+            />
+          </template>
+
+          <!-- Select 类型 -->
+          <template v-else-if="field.type === 'select'">
+            <el-select
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+              :placeholder="field.placeholder || '请选择'"
+              :clearable="clearable"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="opt in field.options"
+                :key="String(opt.value)"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </template>
+
+          <!-- Number 类型 -->
+          <template v-else-if="field.type === 'number'">
+            <el-input-number
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+              :placeholder="field.placeholder"
+              :controls="true"
+            />
+          </template>
+
+          <!-- Textarea 类型 -->
+          <template v-else-if="field.type === 'textarea'">
+            <el-input
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+              type="textarea"
+              :rows="4"
+              :placeholder="field.placeholder"
+            />
+          </template>
+
+          <!-- Password 类型 -->
+          <template v-else-if="field.type === 'password'">
+            <el-input
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+              type="password"
+              show-password
+              :placeholder="field.placeholder"
+            />
+          </template>
+
+          <!-- Text/String 类型 (默认) -->
+          <template v-else>
+            <el-input
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+              :placeholder="field.placeholder"
+              :clearable="clearable"
+            />
+          </template>
+
+          <!-- 字段描述 -->
+          <div v-if="field.description" class="field-desc">{{ field.description }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ConfigField } from '../types'
+
+interface Props {
+  /** 配置字段定义 */
+  fields: ConfigField[]
+  /** 配置值对象 (v-model) */
+  modelValue: Record<string, any>
+  /** 是否显示清除按钮 */
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<string, any>]
+}>()
+
+// 获取字段值
+const getFieldValue = (key: string) => {
+  return props.modelValue[key]
+}
+
+// 设置字段值
+const setFieldValue = (key: string, value: any) => {
+  const newValue = { ...props.modelValue, [key]: value }
+  emit('update:modelValue', newValue)
+}
+
+// 判断字段是否应该显示（基于 showWhen 条件）
+const shouldShowField = (field: ConfigField) => {
+  if (!field.showWhen) return true
+  const { field: dependField, value } = field.showWhen
+  return props.modelValue[dependField] === value
+}
+</script>
+
+<style scoped>
+.config-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1.25rem;
+}
+
+.form-label {
+  width: 120px;
+  flex-shrink: 0;
+  color: var(--k-color-text-description);
+  padding-top: 6px;
+  font-size: 0.9rem;
+}
+
+.form-label.required::after {
+  content: '*';
+  color: var(--k-color-error, #f56c6c);
+  margin-left: 4px;
+}
+
+.field-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.field-desc {
+  font-size: 0.8rem;
+  color: var(--k-color-text-description);
+  margin-top: 0.25rem;
+}
+</style>

package/client/components/EmptyState.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="empty-state" :class="sizeClass">
+    <k-icon :name="icon" class="empty-icon" />
+    <p class="empty-title" v-if="title">{{ title }}</p>
+    <p class="empty-description" v-if="description">{{ description }}</p>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** 图标名称 */
+  icon?: string
+  /** 标题 */
+  title?: string
+  /** 描述文字 */
+  description?: string
+  /** 尺寸: small, default, large */
+  size?: 'small' | 'default' | 'large'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'inbox',
+  title: '',
+  description: '',
+  size: 'default'
+})
+
+const sizeClass = computed(() => `size-${props.size}`)
+</script>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--k-color-text-description);
+  text-align: center;
+}
+
+.empty-state.size-small {
+  padding: 1.5rem;
+}
+
+.empty-state.size-small .empty-icon {
+  font-size: 1.5rem;
+}
+
+.empty-state.size-default {
+  padding: 3rem;
+}
+
+.empty-state.size-default .empty-icon {
+  font-size: 2rem;
+}
+
+.empty-state.size-large {
+  padding: 4rem;
+}
+
+.empty-state.size-large .empty-icon {
+  font-size: 2.5rem;
+}
+
+.empty-icon {
+  opacity: 0.5;
+  margin-bottom: 4px;
+}
+
+.empty-title {
+  margin: 0;
+  font-size: 14px;
+  color: var(--k-color-text);
+}
+
+.empty-description {
+  margin: 0;
+  font-size: 12px;
+  opacity: 0.8;
+  max-width: 300px;
+  line-height: 1.5;
+}
+</style>