koishi-plugin-adapter-onebot-multi 1.0.6 → 2.0.0

package/client/components/BotEditorModal.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="editor-overlay" @click.self="$emit('close')">
+    <section class="editor-card" aria-label="Bot 编辑弹窗">
+      <header class="editor-header">
+        <div>
+          <h3>{{ mode === 'create' ? (kind === 'client' ? '新增 ws 客户端' : '新增 ws 服务器') : '编辑 Bot' }}</h3>
+          <p>{{ mode === 'create' ? '填写必要信息后即可创建。' : '修改后会保存到本地配置文件。' }}</p>
+        </div>
+        <button type="button" class="close-button" aria-label="关闭编辑弹窗" @click="$emit('close')">×</button>
+      </header>
+
+      <div class="editor-grid">
+        <label class="field-label">
+          名称
+          <input v-model="localValue.name" name="name" autocomplete="off" type="text" placeholder="例如：主客户端…" class="field-input">
+        </label>
+
+        <label class="field-label hidden-field">
+          自身 ID
+          <input v-model="localValue.selfId" name="selfId" autocomplete="off" type="text" class="field-input">
+        </label>
+
+        <label class="field-label">
+          访问密钥
+          <input v-model="localValue.token" name="token" autocomplete="off" type="text" placeholder="留空表示不校验…" class="field-input">
+        </label>
+
+        <label v-if="localValue.protocol === 'ws'" class="field-label">
+          连接地址
+          <input v-model="localValue.endpoint" name="endpoint" autocomplete="off" type="url" inputmode="url" placeholder="ws://127.0.0.1:6700…" class="field-input">
+        </label>
+
+        <label v-else class="field-label">
+          接入路径
+          <input v-model="localValue.path" name="path" autocomplete="off" type="text" placeholder="/onebot…" class="field-input">
+        </label>
+
+        <label class="field-checkbox">
+          <input v-model="localValue.enabled" name="enabled" type="checkbox">
+          <span>创建后立即启用</span>
+        </label>
+      </div>
+
+      <footer class="editor-actions">
+        <button type="button" class="action-button primary" @click="$emit('save', { ...localValue })">保存</button>
+        <button type="button" class="action-button" @click="$emit('close')">取消</button>
+      </footer>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+interface ManagedBot {
+  selfId?: string
+  token?: string
+  protocol?: 'ws' | 'ws-reverse'
+  endpoint?: string
+  path?: string
+  name?: string
+  enabled?: boolean
+}
+
+const props = defineProps<{
+  modelValue: ManagedBot
+  mode: 'create' | 'edit'
+  kind: 'client' | 'server'
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+  (e: 'save', value: ManagedBot): void
+}>()
+
+const localValue = reactive<ManagedBot>({ ...props.modelValue })
+
+watch(() => props.modelValue, (value) => {
+  Object.assign(localValue, value)
+}, { deep: true, immediate: true })
+</script>
+
+<style scoped>
+.editor-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(87, 64, 46, 0.35);
+  backdrop-filter: blur(4px);
+  overscroll-behavior: contain;
+}
+
+.editor-card {
+  box-sizing: border-box;
+  width: min(640px, 100%);
+  max-width: 100%;
+  max-height: 88vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fffdf7;
+  border: 3px solid #6b5243;
+  border-radius: 20px;
+  padding: 24px;
+}
+
+.editor-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.editor-header h3 {
+  margin: 0;
+  font-size: 28px;
+  color: #6b5243;
+}
+
+.editor-header p {
+  margin: 6px 0 0;
+  color: #8b6b57;
+  font-size: 14px;
+}
+
+.close-button {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #6b5243;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #6b5243;
+  font-size: 24px;
+  font-weight: 900;
+  line-height: 1;
+  cursor: pointer;
+  transition: transform 0.12s ease;
+}
+
+.close-button:hover,
+.close-button:focus-visible {
+  transform: translate(-1px, -1px);
+}
+
+.close-button:active {
+  transform: translate(2px, 2px);
+}
+
+.editor-grid {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+}
+
+.field-label {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  font-weight: 700;
+  color: #6b5243;
+}
+
+.hidden-field {
+  display: none;
+}
+
+.field-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  border: 3px solid #6b5243;
+  border-radius: 16px;
+  padding: 12px 14px;
+  background: #ffffff;
+  color: #6b5243;
+  font: inherit;
+  transition: transform 0.12s ease;
+}
+
+.field-input:focus-visible {
+  outline: none;
+  transform: translate(-1px, -1px);
+}
+
+.field-checkbox {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  border: 3px solid #6b5243;
+  border-radius: 16px;
+  padding: 10px 12px;
+  background: #fff7df;
+  color: #6b5243;
+  font-weight: 700;
+  overflow: hidden;
+}
+
+.editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.action-button {
+  border: 3px solid #6b5243;
+  border-radius: 16px;
+  padding: 10px 18px;
+  background: #ffffff;
+  color: #6b5243;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+  transition: transform 0.12s ease;
+}
+
+.action-button.primary {
+  background: #ffb870;
+}
+
+.action-button:hover,
+.action-button:focus-visible {
+  transform: translate(-1px, -1px);
+}
+
+.action-button:active {
+  transform: translate(2px, 2px);
+}
+
+@media (max-width: 640px) {
+  .editor-card {
+    padding: 18px;
+  }
+
+  .editor-header {
+    align-items: center;
+  }
+
+  .editor-header h3 {
+    font-size: 22px;
+  }
+
+  .editor-actions {
+    flex-direction: column-reverse;
+  }
+
+  .action-button {
+    width: 100%;
+  }
+}
+</style>

package/client/components/BotEditorModal.vue.bak

@@ -0,0 +1,54 @@
+<template>
+  <div class="pop-modal-overlay" @click.self="$emit('close')">
+    <div class="pop-modal comic-panel">
+      <div class="comic-burst" aria-hidden="true">?</div>
+      <div class="modal-top">
+        <h3>{{ mode === 'create' ? (kind === 'client' ? '新增 ws 客户端' : '新增 ws 服务器') : '编辑 Bot' }}</h3>
+        <button class="modal-close" aria-label="关闭编辑弹窗" @click="$emit('close')">?</button>
+      </div>
+      <div class="form-grid modal-grid">
+        <label class="pop-label">名称<input v-model="localValue.name" type="text" class="pop-input" placeholder="选填"></label>
+        <label class="pop-label hidden">自身 ID<input v-model="localValue.selfId" type="text" class="pop-input"></label>
+        <label class="pop-label">访问密钥<input v-model="localValue.token" type="text" class="pop-input"></label>
+        <label v-if="localValue.protocol === 'ws'" class="pop-label">连接地址<input v-model="localValue.endpoint" type="text" class="pop-input" placeholder="ws://127.0.0.1:6700"></label>
+        <label v-else class="pop-label">接入路径<input v-model="localValue.path" type="text" class="pop-input" placeholder="/onebot"></label>
+        <label class="pop-label pop-checkbox"><input v-model="localValue.enabled" type="checkbox" class="pop-check"><span>已启用</span></label>
+      </div>
+      <div class="modal-actions">
+        <button class="pop-btn primary-btn" @click="$emit('save', { ...localValue })">保存</button>
+        <button class="pop-btn" @click="$emit('close')">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+interface ManagedBot {
+  selfId?: string
+  token?: string
+  protocol?: 'ws' | 'ws-reverse'
+  endpoint?: string
+  path?: string
+  name?: string
+  enabled?: boolean
+}
+
+const props = defineProps<{
+  modelValue: ManagedBot
+  mode: 'create' | 'edit'
+  kind: 'client' | 'server'
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+  (e: 'save', value: ManagedBot): void
+}>()
+
+const localValue = reactive<ManagedBot>({ ...props.modelValue })
+
+watch(() => props.modelValue, (value) => {
+  Object.assign(localValue, value)
+}, { deep: true, immediate: true })
+</script>