feat(properties): 优化属性配置功能

- 新增属性类型枚举，支持多种数据类型
- 添加备注字段和对应列
- 实现不同属性类型的值输入组件- 优化属性值的展示和编辑
- 添加文件上传功能

src/enums/index.js

@@ -38,3 +38,13 @@ export const StreamPlatform = {
     bilibili: 'B站',
     douyu: '斗鱼'
 }
+export const PropertiesType = {
+    string: '字符串',
+    date: '日期',
+    number: '数字',
+    boolean: '布尔值',
+    object: '对象',
+    file: '文件',
+    time_range: '时间范围',
+    range: '范围'
+}

src/views/PropertiesView.vue

@@ -5,6 +5,7 @@
         </template>
         <ElTableColumn prop="id" label="#" width="150" />
         <ElTableColumn prop="name" label="名称" width="150" />
+        <ElTableColumn prop="remark" label="备注" />
         <ElTableColumn prop="value" label="值" min-width="120" show-overflow-tooltip />
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
         <ElTableColumn label="操作" align="center" width="120">
@@ -14,28 +15,36 @@
         </ElTableColumn>
     </PagingTable>
     <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
-        <ElFormItem prop="id" label="ID" v-if="!editMode">
-            <ElInput v-model="model.id" placeholder="请输入ID" />
-        </ElFormItem>
         <ElFormItem prop="name" label="名称">
             <ElInput v-model="model.name" placeholder="请输入名称" />
         </ElFormItem>
+        <ElFormItem prop="remark" label="备注">
+            <ElInput v-model="model.remark" placeholder="请输入备注" />
+        </ElFormItem>
         <ElFormItem prop="type" label="类型">
-            <ElInput v-model="model.type" placeholder="请输入类型" />
+            <EnumSelect v-model="model.type" :enum="PropertiesType" :disabled="!!model.id" show-overflow-tooltip />
+        </ElFormItem>
+        <ElFormItem prop="value" label="值" v-if="model.type === 'file'">
+            <ElInput v-model="model.value" placeholder="请输入值">
+                <template #append>
+                    <ElButton type="primary" @click="upload" :loading="uploading">上传</ElButton>
+                </template>
+            </ElInput>
+        </ElFormItem>
+        <ElFormItem prop="value" label="值" v-else-if="model.type === 'boolean'">
+            <ElRadioGroup v-model="model.value">
+                <ElRadio label="1">是</ElRadio>
+                <ElRadio label="0">否</ElRadio>
+            </ElRadioGroup>
         </ElFormItem>
-        <ElFormItem prop="value" label="值" v-if="model.name === 'model'">
-            <ElSelect v-model="model.value">
-                <ElOption label="gpt-3.5" value="gpt-3.5" />
-                <ElOption label="gpt-4" value="gpt-4" />
-                <ElOption label="azure-gpt-3.5" value="azure-gpt-3.5" />
-                <ElOption label="azure-gpt-4" value="azure-gpt-4" />
-                <ElOption label="cf-gpt-3.5" value="cf-gpt-3.5" />
-                <ElOption label="cf-gpt-4" value="cf-gpt-4" />
-            </ElSelect>
+        <ElFormItem prop="value" label="值" v-else-if="model.type === 'time_range'">
+            <ElTimePicker v-model="model.value" value-format="HH:mm:ss" is-range placeholder="选择时间范围" />
+        </ElFormItem>
+        <ElFormItem prop="value" label="值" v-else-if="model.type === 'range'">
+            <ElSlider v-model="model.value" range :max="500" :step="5" />
         </ElFormItem>
         <ElFormItem prop="value" label="值" v-else>
-            <ElInput v-model="model.value" placeholder="请输入值" />
-            <ElButton @click="upload">上传文件</ElButton>
+            <ElInput v-model="model.value" placeholder="请输入值" type="textarea" />
         </ElFormItem>
     </EditDialog>
 </template>
@@ -50,7 +59,7 @@ import EnumSelect from '@/components/EnumSelect.vue'
 import { UserRole } from '@/enums'
 import { http } from '@/plugins/http'
 import { ElMessage } from 'element-plus'
-import { useClipboard } from '@vueuse/core'
+import { PropertiesType } from '@/enums'
 
 const query = ref({})
 const timeFormatter = useTimeFormatter()
@@ -67,26 +76,33 @@ const rules = {
         { type: 'string', pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母、数字、下划线', trigger: 'blur' }
     ],
     type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
-    value: [{ required: true, message: '请输入值', trigger: 'blur' }]
+    value: [{ required: true, message: '请输入值', trigger: 'blur' }],
+    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
 }
 const { showEditDialog, onEdit } = setupEditDialog(model)
 const editMode = ref(false)
+
 async function submit() {
     await (editMode.value
         ? http.put(`/properties/${model.value.id}`, model.value)
         : http.post('/properties', model.value))
     ElMessage.success('保存成功')
 }
+
+const uploading = ref(false)
+
 function upload() {
     const a = document.createElement('input')
     a.type = 'file'
     a.onchange = (e) => {
         const file = e.target.files[0]
+        uploading.value = true
         const form = new FormData()
         form.append('file', file)
         http.post('/files/upload', form).then((res) => {
             model.value.value = res.url
         })
+        uploading.value = false
     }
     a.click()
 }