feat: enhance ColorPicker and plugin form

Author: Ayideyia

frontend/src/components/ColorPicker/index.vue

@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import { useTemplateRef } from 'vue'
 
-const model = defineModel<string>({ default: '#000' })
+interface Props {
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+const model = defineModel<string>({ default: '#000000' })
 
 const emit = defineEmits(['change'])
 
@@ -13,14 +21,20 @@ const onChange = (v: Event) => {
 }
 
 const pick = () => {
-  inputRef.value?.click()
+  !props.disabled && inputRef.value?.click()
 }
 </script>
 
 <template>
   <div
-    :class="{ 'pl-8': $slots.prefix, 'pr-8': $slots.suffix }"
-    class="gui-color-picker rounded-full inline-flex items-center overflow-hidden cursor-pointer duration-200"
+    @click="pick"
+    :class="{
+      'pl-8': $slots.prefix,
+      'pr-8': $slots.suffix,
+      'cursor-not-allowed': disabled,
+      'cursor-pointer': !disabled,
+    }"
+    class="gui-color-picker rounded-full inline-flex items-center overflow-hidden duration-200"
   >
     <div v-if="$slots.prefix" class="flex items-center line-clamp-1 break-all">
       <slot name="prefix" v-bind="{ pick }"></slot>
@@ -29,6 +43,7 @@ const pick = () => {
       ref="inputRef"
       v-model="model"
       @change="(e) => onChange(e)"
+      :class="{ 'pointer-events-none': disabled }"
       type="color"
       class="w-26 h-28 flex justify-center items-center border-0 bg-transparent cursor-pointer"
     />

frontend/src/components/Select/index.vue

@@ -48,7 +48,7 @@ const displayLabel = computed(() => {
     if (selected.length === 0) {
       return props.placeholder ?? 'common.none'
     }
-    return selected.map((item) => optionsValueLabelMapping.value[item] ?? item).join('、')
+    return selected.map((item) => t(optionsValueLabelMapping.value[item] ?? item)).join('、')
   }
   const label = props.options.find((v) => v.value === model.value)?.label ?? (model.value as string)
   return (label || props.placeholder) ?? 'common.none'

frontend/src/lang/locale/zh.ts

@@ -484,7 +484,7 @@ export default {
     version: '版本号',
     description: '描述',
     url: '远程地址',
-    install: '需要安装',
+    install: '是否需要安装',
     installed: '已安装',
     path: '保存路径',
     type: '类型',

frontend/src/types/app.d.ts

@@ -115,6 +115,7 @@ export interface PluginConfiguration {
     | 'Select'
     | 'MultipleSelect'
     | 'Switch'
+    | 'ColorPicker'
     | ''
   value: any
   options: any[]

frontend/src/views/PluginsView/components/PluginForm.vue

@@ -57,6 +57,7 @@ const componentList = [
   'Select',
   'MultipleSelect',
   'Switch',
+  'ColorPicker',
 ] as const
 
 type ComponentType = (typeof componentList)[number]
@@ -130,6 +131,10 @@ const onComponentChange = (component: ComponentType, index: number) => {
       plugin.value.configuration[index]!.value = ''
       break
     }
+    case 'ColorPicker': {
+      plugin.value.configuration[index]!.value = '#000000'
+      break
+    }
     case 'KeyValueEditor': {
       plugin.value.configuration[index]!.value = {}
       break
@@ -202,21 +207,9 @@ defineExpose({ modalSlots })
         ]"
       />
     </div>
-    <div class="form-item">
-      {{ t('plugin.install') }}
-      <Switch v-model="plugin.install" />
-    </div>
     <div class="form-item">
       <div class="mr-8">{{ t('plugin.trigger') }}</div>
-      <CheckBox v-model="plugin.triggers" :options="PluginsTriggerOptions.slice(0, 3)" />
-    </div>
-    <div class="form-item">
-      <div class="name"></div>
-      <CheckBox v-model="plugin.triggers" :options="PluginsTriggerOptions.slice(3, 7)" />
-    </div>
-    <div class="form-item">
-      <div class="name"></div>
-      <CheckBox v-model="plugin.triggers" :options="PluginsTriggerOptions.slice(7)" />
+      <MultipleSelect v-model="plugin.triggers" :options="PluginsTriggerOptions" clearable />
     </div>
     <div class="form-item">
       {{ t('plugin.name') }} *
@@ -262,6 +255,10 @@ defineExpose({ modalSlots })
       </Button>
     </Divider>
     <div v-show="showMore" class="pb-8">
+      <div class="form-item">
+        {{ t('plugin.install') }}
+        <Switch v-model="plugin.install" />
+      </div>
       <div class="form-item">
         {{ t('plugin.hasUI') }}
         <Switch v-model="plugin.hasUI" />

frontend/src/views/SettingsView/components/components/PersonalizationSettings.vue

@@ -43,13 +43,13 @@ const handleOpenLocalesFolder = async () => {
       <div class="flex items-center">
         <div v-if="appSettings.app.color === Color.Custom" class="flex items-center mr-4">
           <ColorPicker v-model="appSettings.app.primaryColor">
-            <template #suffix="{ pick }">
-              <div @click="pick" class="text-12">{{ $t('settings.color.primary') }}</div>
+            <template #suffix>
+              <div class="text-12">{{ $t('settings.color.primary') }}</div>
             </template>
           </ColorPicker>
           <ColorPicker v-model="appSettings.app.secondaryColor">
-            <template #suffix="{ pick }">
-              <div @click="pick" class="text-12">{{ $t('settings.color.secondary') }}</div>
+            <template #suffix>
+              <div class="text-12">{{ $t('settings.color.secondary') }}</div>
             </template>
           </ColorPicker>
         </div>