feat(person-picker): 移除临时测试字段并优化组件功能与样式

删除index.vue中的临时测试人员选择字段，为组件新增只读状态支持，优化黑名单徽章与只读容器样式，并移除废弃CSS类

@@ -7,17 +7,20 @@
 -->
 <template>
   <div class="person-picker-field-inner">
-    <div class="select-person-box" @click="openPopup">
+    <div
+      :class="['select-person-box', { 'select-person-box--readonly': props.component_props.readonly }]"
+      @click="!props.component_props.readonly && openPopup()"
+    >
       <template v-if="confirmedPersons.length">
         <div
           v-for="person in confirmedPersons"
           :key="person.id"
-          :class="['select-person-item', { 'select-person-item--blacklist': isPersonBlacklisted(person) }]"
+          class="select-person-item"
         >
           <van-icon name="contact-o" />&nbsp;
           <div class="person-display-text">
             <span>{{ formatPersonTitle(person) }}</span>
-            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span>
+            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge blacklist-badge--chip">黑名单</span>
           </div>
         </div>
       </template>
@@ -27,6 +30,7 @@
     </div>
 
     <van-popup
+      v-if="!props.component_props.readonly"
       v-model:show="showPopup"
       position="bottom"
       :close-on-click-overlay="false"
@@ -66,7 +70,7 @@
         <div v-for="person in draftPersons" :key="person.id" class="selected-item">
           <div class="selected-item__text">
             <span>{{ formatPersonTitle(person) }}</span>
-            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge blacklist-badge--light">黑名单</span>
+            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge blacklist-badge--chip">黑名单</span>
           </div>
           <van-icon name="close" @click="removeDraftPerson(person)" />
         </div>
@@ -588,10 +592,6 @@ onMounted(() => {
   margin-right: 0.25rem;
 }
 
-.select-person-item--blacklist {
-  background-color: #a46943;
-}
-
 .person-display-text {
   display: flex;
   align-items: center;
@@ -605,6 +605,14 @@ onMounted(() => {
   line-height: 1.8rem;
 }
 
+.select-person-box--readonly {
+  min-height: auto;
+  padding: 0.2rem 0;
+  border: none;
+  margin: 0;
+  border-radius: 0;
+}
+
 .search-bar {
   margin: 1rem 0;
   padding: 0;
@@ -707,6 +715,11 @@ onMounted(() => {
   color: #d84d4d;
 }
 
+.blacklist-badge--chip {
+  background-color: rgba(255, 244, 225, 0.92);
+  color: #a46943;
+}
+
 .popup-footer {
   position: fixed;
   bottom: 0;

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-05-25 13:58:52
+ * @LastEditTime: 2026-05-25 18:13:47
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -509,25 +509,6 @@ onMounted(async () => {
   //   "interaction_type": "h5edit"
   // })
 
-  // 临时测试字段：直接挂到页面渲染链里，方便联调人员搜索多选组件。
-  page_form.push({
-    tag: 'person_picker',
-    name: 'person_picker_temp',
-    index: 999999,
-    label: '人员筛选（临时测试）',
-    unique: false,
-    default: [],
-    disabled: false,
-    field_id: 999999,
-    readonly: false,
-    required: false,
-    data_type: 'text',
-    field_name: 'field_person_picker_temp',
-    placeholder: '请输入关键词后搜索人员',
-    interaction_type: 'h5edit',
-    person_type: '',
-  });
-
   formData.value = formatData(page_form);
   // TAG: 构建分页组件
   if (page_type === 'add' || page_type === undefined || model === 'preview') {