From d5c2ff347b0ba79ca21d6beba7d3d6012c5dd6c8 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Tue, 1 Feb 2022 01:38:16 +0800
Subject: [PATCH] feat(console): support dict schema

---
 .../console/client/components/form/button.vue |  2 +-
 .../console/client/components/form/index.ts   |  4 ++-
 .../console/client/components/form/input.vue  |  2 ++
 .../client/components/form/schema/form.vue    | 36 +++++++++++++++++++
 .../form/schema/{index.vue => schema.vue}     | 28 ++++++++++++---
 .../frontend/manager/client/bots/settings.vue | 15 ++++----
 .../manager/client/settings/settings.vue      |  4 +--
 7 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 plugins/frontend/console/client/components/form/schema/form.vue
 rename plugins/frontend/console/client/components/form/schema/{index.vue => schema.vue} (80%)

diff --git a/plugins/frontend/console/client/components/form/button.vue b/plugins/frontend/console/client/components/form/button.vue
index 204767a018..67ff06550d 100644
--- a/plugins/frontend/console/client/components/form/button.vue
+++ b/plugins/frontend/console/client/components/form/button.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    @click="onClick"
+    @click.prevent="onClick"
     :title="disabled ? '' : title"
     :class="['k-button', type, { disabled, solid, round, frameless }]">
     <slot/>
diff --git a/plugins/frontend/console/client/components/form/index.ts b/plugins/frontend/console/client/components/form/index.ts
index ece81d0b30..096691a2a8 100644
--- a/plugins/frontend/console/client/components/form/index.ts
+++ b/plugins/frontend/console/client/components/form/index.ts
@@ -4,12 +4,14 @@ import Input from './input.vue'
 import TabItem from './tab-item.vue'
 import TabGroup from './tab-group.vue'
 import Radio from './radio.vue'
-import Schema from './schema/index.vue'
+import Form from './schema/form.vue'
+import Schema from './schema/schema.vue'
 import { App } from 'vue'
 
 export default function (app: App) {
   app.component('k-button', Button)
   app.component('k-checkbox', Checkbox)
+  app.component('k-form', Form)
   app.component('k-input', Input)
   app.component('k-radio', Radio)
   app.component('k-schema', Schema)
diff --git a/plugins/frontend/console/client/components/form/input.vue b/plugins/frontend/console/client/components/form/input.vue
index d6cd6c9151..c2326abd9b 100644
--- a/plugins/frontend/console/client/components/form/input.vue
+++ b/plugins/frontend/console/client/components/form/input.vue
@@ -4,6 +4,8 @@
       <slot name="prefix"></slot>
     </span>
     <input
+      autocomplete="off"
+      step="0.00001"
       :value="modelValue"
       :type="type"
       :style="inputStyle"
diff --git a/plugins/frontend/console/client/components/form/schema/form.vue b/plugins/frontend/console/client/components/form/schema/form.vue
new file mode 100644
index 0000000000..5cce04e276
--- /dev/null
+++ b/plugins/frontend/console/client/components/form/schema/form.vue
@@ -0,0 +1,36 @@
+<template>
+  <form class="schema-form">
+    <slot name="header"></slot>
+    <k-schema :schema="schema" v-model="config"></k-schema>
+    <slot name="footer"></slot>
+  </form>
+</template>
+
+<script lang="ts" setup>
+
+import { computed, PropType } from 'vue'
+import Schema from 'schemastery'
+
+const props = defineProps({
+  schema: {} as PropType<Schema>,
+  modelValue: {},
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const config = computed({
+  get: () => props.modelValue,
+  set: emit.bind(null, 'update:modelValue'),
+})
+
+</script>
+
+<style lang="scss">
+
+.schema-form {
+  h2 {
+    font-size: 1.25rem;
+  }
+}
+
+</style>
diff --git a/plugins/frontend/console/client/components/form/schema/index.vue b/plugins/frontend/console/client/components/form/schema/schema.vue
similarity index 80%
rename from plugins/frontend/console/client/components/form/schema/index.vue
rename to plugins/frontend/console/client/components/form/schema/schema.vue
index 1e78166a1d..db7997e486 100644
--- a/plugins/frontend/console/client/components/form/schema/index.vue
+++ b/plugins/frontend/console/client/components/form/schema/schema.vue
@@ -1,11 +1,11 @@
 <template>
   <template v-if="!schema || schema.meta.hidden"/>
 
-  <schema-primitive v-else-if="['string', 'number', 'boolean'].includes(schema.type)" :schema="schema" v-model="config">
+  <schema-primitive v-else-if="isPrimitive(schema)" :schema="schema" v-model="config">
     <slot></slot>
   </schema-primitive>
 
-  <div class="schema-item" v-else-if="schema.type === 'array'">
+  <div class="schema-item" v-else-if="schema.type === 'array' && isPrimitive(schema.inner)">
     <div class="schema-header">
       <div class="left">
         <slot></slot>
@@ -22,6 +22,24 @@
     </ul>
   </div>
 
+  <div class="schema-item" v-else-if="schema.type === 'dict' && isPrimitive(schema.inner)">
+    <div class="schema-header">
+      <div class="left">
+        <slot></slot>
+      </div>
+      <div class="right">
+        <k-button solid @click="config[''] = null">添加项</k-button>
+      </div>
+    </div>
+    <ul>
+      <li v-for="(_, key) in config">
+        <k-icon name="times-full" class="remove" @click="delete config[key]"></k-icon>
+        <k-input :model-value="key" @update:model-value="v => (config[v] = config[key], delete config[key])" class="hidden"></k-input>
+        <k-input v-model="config[key]" class="hidden"></k-input>
+      </li>
+    </ul>
+  </div>
+
   <template v-else-if="schema.type === 'object'">
     <h2 v-if="!noDesc && schema.meta.description">{{ schema.meta.description }}</h2>
     <k-schema v-for="(item, key) in schema.dict" :key="key" :schema="item" v-model="config[key]" :prefix="prefix + key + '.'">
@@ -32,8 +50,6 @@
     </k-schema>
   </template>
 
-  <template v-else-if="schema.type === 'const'"></template>
-
   <template v-else-if="schema.type === 'intersect'">
     <k-schema v-for="item in schema.list" :schema="item" v-model="config" :prefix="prefix"/>
   </template>
@@ -88,6 +104,10 @@ watch(config, (value) => {
   emit('update:modelValue', value)
 }, { deep: true })
 
+function isPrimitive(schema: Schema) {
+  return ['string', 'number', 'boolean'].includes(schema.type)
+}
+
 </script>
 
 <style lang="scss">
diff --git a/plugins/frontend/manager/client/bots/settings.vue b/plugins/frontend/manager/client/bots/settings.vue
index a128b9642f..af5fdff449 100644
--- a/plugins/frontend/manager/client/bots/settings.vue
+++ b/plugins/frontend/manager/client/bots/settings.vue
@@ -3,16 +3,14 @@
     配置项
     <template v-if="data.config.disabled">
       <k-button solid @click="execute('login')">登陆账号</k-button>
-      <k-button solid @click="execute('logout')">保存配置</k-button>
     </template>
     <template v-else>
       <k-button solid type="error" @click="execute('logout')">登出账号</k-button>
       <k-button solid @click="execute('login')">重载配置</k-button>
     </template>
   </h1>
-  {{ data }}
-  <form>
-    <template v-if="!current">
+  <k-form :schema="store.protocols[key]" v-model="data.config">
+    <template #header v-if="!current">
       <k-schema :schema="adapterSchema" v-model="data.adapter">
         <h3 class="required">adapter</h3>
         <p>选择要使用的适配器。</p>
@@ -22,8 +20,7 @@
         <p>选择要使用的协议。</p>
       </k-schema>
     </template>
-    <k-schema :schema="store.protocols[key]" v-model="data.config"></k-schema>
-  </form>
+  </k-form>
 </template>
 
 <script lang="ts" setup>
@@ -64,16 +61,16 @@ const protocolSchema = computed(() => {
 
 const data = computed<Partial<BotProvider.Data>>(() => store.bots[props.current] || reactive({
   adapter: '',
-  config: {},
+  config: { disabled: true },
 }))
 
 watch(() => data.value.adapter, () => {
-  data.value.config = { protocol: '' }
+  data.value.config = { protocol: '', disabled: true }
 })
 
 watch(() => data.value.config.protocol, (protocol) => {
   if (!protocol) return
-  data.value.config = { protocol }
+  data.value.config = { protocol, disabled: true }
 }, { flush: 'post' })
 
 const key = computed(() => {
diff --git a/plugins/frontend/manager/client/settings/settings.vue b/plugins/frontend/manager/client/settings/settings.vue
index 145bc43b66..65615e4852 100644
--- a/plugins/frontend/manager/client/settings/settings.vue
+++ b/plugins/frontend/manager/client/settings/settings.vue
@@ -59,9 +59,7 @@
           <k-button solid @click="execute('unload')">保存配置</k-button>
         </template>
       </h1>
-      <form>
-        <k-schema :schema="data.schema" v-model="data.config" prefix=""></k-schema>
-      </form>
+      <k-form :schema="data.schema" v-model="data.config"></k-form>
     </template>
   </k-content>
 </template>