style: Update CustomRuleCard.vue to include rule ID field

src/components/cards/CustomRuleCard.vue

@@ -26,12 +26,16 @@ const ruleInfo = ref<CustomRule>({
   publish_time: '',
 })
 
+// 规则ID
+const ruleId = ref('')
+
 // 规则名称
 const ruleName = ref('')
 
 // 打开详情弹窗
 function openRuleInfoDialog() {
   ruleInfo.value = props.rule
+  ruleId.value = props.rule.id
   ruleName.value = props.rule.name
   ruleInfoDialog.value = true
 }
@@ -39,6 +43,7 @@ function openRuleInfoDialog() {
 // 保存详情数据
 function saveRuleInfo() {
   ruleInfoDialog.value = false
+  ruleInfo.value.id = ruleId.value
   ruleInfo.value.name = ruleName.value
   emit('change', ruleInfo.value)
 }
@@ -67,23 +72,68 @@ function onClose() {
         <VCardText>
           <VForm>
             <VRow>
-              <VCol cols="12">
+              <VCol cols="12" md="6">
-                <VTextField v-model="ruleName" label="规则名称" />
+                <VTextField
+                  v-model="ruleId"
+                  label="规则ID"
+                  placeholder="规则编码"
+                  hint="字符与数字组合，不能含空格"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="ruleName"
+                  label="规则名称"
+                  placeholder="别名"
+                  hint="使用别名便于区分规则"
+                  persistent-hint
+                />
               </VCol>
               <VCol cols="12">
-                <VTextField v-model="ruleInfo.include" placeholder="关键字/正则表达式" label="包含" />
+                <VTextField
+                  v-model="ruleInfo.include"
+                  placeholder="关键字/正则表达式"
+                  label="包含"
+                  hint="必须包含的关键字或正则表达式，多个值使用｜分隔"
+                  persistent-hint
+                />
               </VCol>
               <VCol cols="12">
-                <VTextField v-model="ruleInfo.exclude" placeholder="关键字/正则表达式" label="排除" />
+                <VTextField
+                  v-model="ruleInfo.exclude"
+                  placeholder="关键字/正则表达式"
+                  label="排除"
+                  hint="不能包含的关键字或正则表达式，多个值使用｜分隔"
+                  persistent-hint
+                />
               </VCol>
               <VCol cols="6">
-                <VTextField v-model="ruleInfo.size_range" placeholder="0/1-10" label="大小范围（MB）" />
+                <VTextField
+                  v-model="ruleInfo.size_range"
+                  placeholder="0/1-10"
+                  label="资源体积（MB）"
+                  hint="最小资源文件体积或文件体积范围"
+                  persistent-hint
+                />
               </VCol>
               <VCol cols="6">
-                <VTextField v-model="ruleInfo.seeders" placeholder="0/1-10" label="做种人数" />
+                <VTextField
+                  v-model="ruleInfo.seeders"
+                  placeholder="0/1-10"
+                  label="做种人数"
+                  hint="最小做种人数或做种人数范围"
+                  persistent-hint
+                />
               </VCol>
               <VCol cols="6">
-                <VTextField v-model="ruleInfo.publish_time" placeholder="0" label="发布时间（分钟）" />
+                <VTextField
+                  v-model="ruleInfo.publish_time"
+                  placeholder="0"
+                  label="发布时间（分钟）"
+                  hint="距离资源发布的最小时间间隔"
+                  persistent-hint
+                />
               </VCol>
             </VRow>
           </VForm>