diff --git a/apps/jingrow/jingrow/api/dev.py b/apps/jingrow/jingrow/api/dev.py
index 6ea97c9..03e0106 100644
--- a/apps/jingrow/jingrow/api/dev.py
+++ b/apps/jingrow/jingrow/api/dev.py
@@ -77,29 +77,40 @@ async def create_pagetypes(payload: Dict[str, Any]):
                             frontend_exists = True
                         else:
                             # 创建字段类型组件的模板
-                            field_content = f'''<script setup lang="ts">
-import {{ computed }} from 'vue'
+                            field_content = '''<script setup lang="ts">
+import { computed } from 'vue'
+import { NInput } from 'naive-ui'
 
-const props = defineProps<{{ 
+const props = defineProps<{ 
   df: any; 
   record: Record<string, any>; 
   canEdit: boolean; 
   ctx: any 
-}}>()
+}>()
 
-// TODO: 实现 {field_type_name} 字段类型逻辑
+// Label布局：上下结构(vertical) 或 左右结构(horizontal)
+const labelLayout = computed(() => props.df.label_layout || 'vertical')
 </script>
 
 <template>
-  <div class="field-{field_type_name.lower()}">
-    <!-- TODO: 实现 {field_type_name} 界面 -->
+  <div :class="['field-wrapper', `layout-${labelLayout}`]">
+    <label class="field-label">
+      {{ ctx.t(df.label || df.fieldname) }}
+      <span v-if="df.reqd" class="required">*</span>
+    </label>
+    <n-input 
+      v-model:value="record[df.fieldname]" 
+      type="text"
+      :placeholder="ctx.t(df.fieldname)"
+      :disabled="!canEdit"
+    />
   </div>
 </template>
 
 <style scoped>
-.field-{field_type_name.lower()} {{
-  /* TODO: 添加样式 */
-}}
+.field-wrapper :deep(.n-input) {
+  flex: 1;
+}
 </style>
 '''
                             field_file.write_text(field_content, encoding="utf-8")