feat(components): support input number schema

packages/core/src/app.ts

@@ -277,14 +277,8 @@ export namespace App {
       Schema.array(Schema.string()),
       Schema.transform(Schema.string(), (nickname) => [nickname]),
     ] as const).description('机器人的昵称，可以是字符串或字符串数组。将用于指令前缀的匹配。'),
-    autoAssign: Schema.union([
-      Schema.boolean(),
-      Schema.function(),
-    ] as const).default(true).description('当获取不到频道数据时，是否使用接受者作为代理者。'),
-    autoAuthorize: Schema.union([
-      Schema.natural(),
-      Schema.function(),
-    ] as const).default(1).description('当获取不到用户数据时默认使用的权限等级。'),
+    autoAssign: Schema.union([Boolean, Function]).default(true).description('当获取不到频道数据时，是否使用接受者作为代理者。'),
+    autoAuthorize: Schema.union([Schema.natural(), Function]).default(1).description('当获取不到用户数据时默认使用的权限等级。'),
     minSimilarity: Schema.percent().default(0.4).description('用于模糊匹配的相似系数，应该是一个 0 到 1 之间的数值。数值越高，模糊匹配越严格。设置为 1 可以完全禁用模糊匹配。'),
   }).description('基础设置'))
 

plugins/frontend/components/client/common/index.ts

@@ -2,13 +2,11 @@ import { App } from 'vue'
 import Button from './button.vue'
 import Checkbox from './checkbox.vue'
 import Input from './input.vue'
-import Switch from './switch.vue'
 import Radio from './radio.vue'
 
 export default function (app: App) {
   app.component('k-button', Button)
   app.component('k-checkbox', Checkbox)
   app.component('k-input', Input)
   app.component('k-radio', Radio)
-  app.component('k-switch', Switch)
 }

plugins/frontend/components/client/form/primitive.vue

@@ -5,18 +5,21 @@
         <slot></slot>
       </div>
       <div class="right">
-        <k-switch v-if="schema.type === 'boolean'" v-model="config" :initial="schema.meta.default" :disabled="disabled"></k-switch>
-        <k-input v-else v-model="config" :disabled="disabled"
-          :style="{ width: schema.meta.role === 'url' ? '18rem' : '12rem' }"
-          :type="type" :initial="schema.meta.default">
-          <template #suffix v-if="schema.meta.role === 'url'">
-            <a :href="config" target="_blank" rel="noopener noreferrer">
-              <k-icon name="external"></k-icon>
-            </a>
-          </template>
-          <template #suffix v-else-if="schema.meta.role === 'secret'">
-            <k-icon :name="showPass ? 'eye' : 'eye-slash'" @click="showPass = !showPass"></k-icon>
-          </template>
+        <el-switch v-if="schema.type === 'boolean'" v-model="value" :disabled="disabled"></el-switch>
+        <template v-else-if="schema.type === 'number'">
+          <el-slider v-if="schema.meta.role === 'slider'" style="width: 200px"
+            v-model="value" :disabled="disabled" :max="schema.meta.max" :min="schema.meta.min" :step="schema.meta.step"
+          ></el-slider>
+          <el-input-number v-else
+            v-model="value" :disabled="disabled" :max="schema.meta.max" :min="schema.meta.min" :step="schema.meta.step"
+          ></el-input-number>
+        </template>
+        <k-input v-else v-model="value" :disabled="disabled" #suffix
+          :style="{ width: schema.meta.role === 'url' ? '18rem' : '12rem' }" :type="type">
+          <a v-if="schema.meta.role === 'url'" :href="value" target="_blank" rel="noopener noreferrer">
+            <k-icon name="external"></k-icon>
+          </a>
+          <k-icon v-else-if="schema.meta.role === 'secret'" :name="showPass ? 'eye' : 'eye-slash'" @click="showPass = !showPass"></k-icon>
         </k-input>
       </div>
     </div>
@@ -38,8 +41,8 @@ const props = defineProps({
 
 const showPass = ref(false)
 
-const config = computed({
-  get: () => props.modelValue,
+const value = computed({
+  get: () => props.modelValue ?? props.schema.meta.default,
   set: emit.bind(null, 'update:modelValue'),
 })
 

plugins/frontend/components/client/form/schema.vue

@@ -111,7 +111,7 @@ function isPrimitive(schema: Schema) {
 .schema-item {
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--border);
-  transition: border-color 0.3s ease;
+  transition: border-color 0.3s ease, background-color 0.3s ease;
 
   &:first-child, :not(.schema-item) + & {
     border-top: 1px solid var(--border);
@@ -126,7 +126,7 @@ function isPrimitive(schema: Schema) {
   }
 
   &:hover {
-    background: var(--bg2);
+    background-color: var(--bg1);
   }
 
   .schema-header {

plugins/frontend/components/client/form/union.vue

@@ -47,7 +47,7 @@ const props = defineProps({
 })
 
 const config = computed({
-  get: () => props.modelValue,
+  get: () => props.modelValue ?? props.schema.meta.default,
   set: emit.bind(null, 'update:modelValue'),
 })
 

plugins/frontend/components/client/index.ts

@@ -1,17 +1,41 @@
 import { App } from 'vue'
+import {
+  ElInput,
+  ElInputNumber,
+  ElEmpty,
+  ElTooltip,
+  ElScrollbar,
+  ElSelect,
+  ElSlider,
+  ElSwitch,
+  ElTree,
+} from 'element-plus'
+
 import common from './common'
 import form from './form'
 import icons from './icons'
 import layout from './layout'
 import notice from './notice'
 
+export { ElMessage as message } from 'element-plus'
+
 export * from './common'
 export * from './form'
 export * from './icons'
 export * from './layout'
 export * from './notice'
 
 export default function (app: App) {
+  app.use(ElInput)
+  app.use(ElInputNumber)
+  app.use(ElEmpty)
+  app.use(ElTooltip)
+  app.use(ElScrollbar)
+  app.use(ElSelect)
+  app.use(ElSlider)
+  app.use(ElSwitch)
+  app.use(ElTree)
+
   app.use(common)
   app.use(form)
   app.use(icons)

plugins/frontend/components/client/style.scss

@@ -0,0 +1,5 @@
+
+
+.el-scrollbar__bar {
+  z-index: 500;
+}

plugins/frontend/components/tsconfig.json

@@ -8,6 +8,7 @@
     "emitDeclarationOnly": false,
     "types": [
       "vite/client",
+      "element-plus/global",
     ],
   },
   "include": [

plugins/frontend/console/client/index.scss

@@ -81,10 +81,6 @@ html.dark {
   height: 100%;
 }
 
-.el-scrollbar__bar {
-  z-index: 500;
-}
-
 .k-menu-item {
   display: block;
   position: relative;

plugins/frontend/console/client/main.ts

@@ -8,19 +8,11 @@ import App from './layout/index.vue'
 import Blank from './layout/blank.vue'
 import client from '~/components'
 
-import { ElCascader, ElEmpty, ElTooltip, ElScrollbar, ElSelect, ElTree } from 'element-plus'
-
 import 'element-plus/dist/index.css'
 import './index.scss'
 
 const app = createApp(App)
 
-app.use(ElCascader)
-app.use(ElEmpty)
-app.use(ElTooltip)
-app.use(ElSelect)
-app.use(ElScrollbar)
-app.use(ElTree)
 app.use(client)
 
 app.component('k-collapse', Collapse)

plugins/frontend/console/client/tsconfig.json

@@ -8,6 +8,7 @@
     "emitDeclarationOnly": false,
     "types": [
       "vite/client",
+      "element-plus/global",
     ],
   },
   "include": [