From 88c86f49bf904a8399f98985f7ee0f72b84b8419 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 11 Jan 2025 20:20:05 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20DirectoryCard=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=9B=BF=E6=8D=A2=20VPathField=20=E4=B8=BA?=
 =?UTF-8?q?=20PathInput=EF=BC=9B=E5=88=A0=E9=99=A4=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=20PathField=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=9B=E6=9B=B4=E6=96=B0=20CronInput=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=20v-model=20=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=EF=BC=9B=E6=B7=BB=E5=8A=A0=20CronField=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BB=A5=E7=AE=80=E5=8C=96=20CRON=20=E8=A1=A8=E8=BE=BE?=
 =?UTF-8?q?=E5=BC=8F=E8=BE=93=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/DirectoryCard.vue        | 10 ++--
 src/components/field/CronField.vue            | 46 +++++++++++++++++++
 src/components/input/CronInput.vue            | 17 +++++--
 .../input/{PathField.vue => PathInput.vue}    |  0
 src/components/render/DynamicRender.vue       |  3 +-
 src/main.ts                                   | 22 ++++-----
 6 files changed, 77 insertions(+), 21 deletions(-)
 create mode 100644 src/components/field/CronField.vue
 rename src/components/input/{PathField.vue => PathInput.vue} (100%)

diff --git a/src/components/cards/DirectoryCard.vue b/src/components/cards/DirectoryCard.vue
index 3c5b9d09..b7b5fb22 100644
--- a/src/components/cards/DirectoryCard.vue
+++ b/src/components/cards/DirectoryCard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { TransferDirectoryConf } from '@/api/types'
-import { VDivider, VSpacer, VTextField } from 'vuetify/lib/components/index.mjs'
+import PathInput from '@/components/input/PathInput.vue'
 import api from '@/api'
 import { nextTick } from 'vue'
 import { storageOptions } from '@/api/constants'
@@ -210,7 +210,7 @@ watch(
             />
           </VCol>
           <VCol cols="8">
-            <VPathField v-model="props.directory.download_path" :storage="props.directory.storage">
+            <PathInput v-model="props.directory.download_path" :storage="props.directory.storage">
               <template #activator="{ menuprops }">
                 <VTextField
                   :model-value="props.directory.download_path"
@@ -219,7 +219,7 @@ watch(
                   label="下载目录/源目录"
                 />
               </template>
-            </VPathField>
+            </PathInput>
           </VCol>
           <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
             <VSwitch v-model="props.directory.download_type_folder" label="按类型分类"></VSwitch>
@@ -257,7 +257,7 @@ watch(
             />
           </VCol>
           <VCol cols="8">
-            <VPathField v-model="props.directory.library_path" :storage="props.directory.library_storage">
+            <PathInput v-model="props.directory.library_path" :storage="props.directory.library_storage">
               <template #activator="{ menuprops }">
                 <VTextField
                   :modelValue="props.directory.library_path"
@@ -266,7 +266,7 @@ watch(
                   label="媒体库目录"
                 />
               </template>
-            </VPathField>
+            </PathInput>
           </VCol>
           <VCol cols="4">
             <VSelect
diff --git a/src/components/field/CronField.vue b/src/components/field/CronField.vue
new file mode 100644
index 00000000..8fd0b052
--- /dev/null
+++ b/src/components/field/CronField.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import CronInput from '@/components/input/CronInput.vue'
+
+const attrs = useAttrs()
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * *',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const innerValue = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  value => {
+    innerValue.value = value
+  },
+)
+
+const propsWithoutModelValue = computed(() => {
+  const { modelValue, ...rest } = props
+  return { ...rest, ...attrs }
+})
+
+function updateModelValue(value: string) {
+  innerValue.value = value
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <CronInput v-model="innerValue" @update:modelValue="updateModelValue">
+    <template #activator="{ menuprops }">
+      <VTextField
+        :modelValue="innerValue"
+        @update:modelValue="updateModelValue"
+        v-bind="{ ...menuprops, ...propsWithoutModelValue }"
+        clearable
+      />
+    </template>
+  </CronInput>
+</template>
diff --git a/src/components/input/CronInput.vue b/src/components/input/CronInput.vue
index bdbd86d1..586ecc8c 100644
--- a/src/components/input/CronInput.vue
+++ b/src/components/input/CronInput.vue
@@ -3,7 +3,7 @@ import api from '@/api'
 import { FileItem } from '@/api/types'
 
 const props = defineProps({
-  cron: {
+  modelValue: {
     type: String,
     default: '* * * * *',
   },
@@ -14,8 +14,15 @@ const emit = defineEmits(['update:modelValue'])
 const currentCron = ref(props.cron)
 
 watch(currentCron, newVal => {
-  emit('update:modelValue', currentCron.value)
+  emit('update:modelValue', newVal)
 })
+
+watch(
+  () => props.modelValue,
+  value => {
+    currentCron.value = value
+  },
+)
 </script>
 
 <template>
@@ -24,7 +31,11 @@ watch(currentCron, newVal => {
       <template v-slot:activator="{ props }">
         <slot name="activator" :menuprops="props" />
       </template>
-      <VCronVuetify v-model="currentCron" locale="zh-CN" :chip-props="{ color: 'success' }" class="mt-1" />
+      <VList>
+        <VListItem>
+          <VCronVuetify v-model="currentCron" locale="zh-CN" :chip-props="{ color: 'success' }" class="mt-1" />
+        </VListItem>
+      </VList>
     </VMenu>
   </div>
 </template>
diff --git a/src/components/input/PathField.vue b/src/components/input/PathInput.vue
similarity index 100%
rename from src/components/input/PathField.vue
rename to src/components/input/PathInput.vue
diff --git a/src/components/render/DynamicRender.vue b/src/components/render/DynamicRender.vue
index ba1bc57f..a758e2da 100644
--- a/src/components/render/DynamicRender.vue
+++ b/src/components/render/DynamicRender.vue
@@ -93,6 +93,7 @@ const renderComponent = (config: any, model: any, slotScope: any = {}) => {
 <template>
   <!-- 调用递归渲染函数 -->
   <div>
-    <component :is="renderComponent(config, model)" />
+    <Component v-if="config.html" :is="config.component" v-bind="config.props" v-html="config.html" />
+    <Component v-else :is="renderComponent(config, model)" />
   </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 1dec2166..3b93b7c7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,14 @@ import '@/@core/utils/compatibility'
 import '@/@iconify/icons-bundle'
 import '@/plugins/webfontloader'
 
+import { createApp } from 'vue'
+import { VAceEditor } from 'vue3-ace-editor'
+import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
+import { CronVuetify } from '@vue-js-cron/vuetify'
+import { removeEl } from './@core/utils/dom'
+import { fetchGlobalSettings } from './api'
+import { isPWA } from './@core/utils/navigator'
+
 import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'
 import router from '@/router'
@@ -18,16 +26,7 @@ import PersonCard from './components/cards/PersonCard.vue'
 import MediaInfoCard from './components/cards/MediaInfoCard.vue'
 import TorrentCard from './components/cards/TorrentCard.vue'
 import MediaIdSelector from './components/misc/MediaIdSelector.vue'
-import PathField from './components/input/PathField.vue'
-import CronInput from './components/input/CronInput.vue'
-
-import { createApp } from 'vue'
-import { VAceEditor } from 'vue3-ace-editor'
-import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
-import { CronVuetify } from '@vue-js-cron/vuetify'
-import { removeEl } from './@core/utils/dom'
-import { fetchGlobalSettings } from './api'
-import { isPWA } from './@core/utils/navigator'
+import CronField from './components/field/CronField.vue'
 
 import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
@@ -70,8 +69,7 @@ initializeApp().then(() => {
     .component('VMediaInfoCard', MediaInfoCard)
     .component('VTorrentCard', TorrentCard)
     .component('VMediaIdSelector', MediaIdSelector)
-    .component('VPathField', PathField)
-    .component('VCronInput', CronInput)
+    .component('VCronField', CronField)
 
   // 注册插件
   app