美化Txt预览组件

frontend/src/views/pagetype/file/TextPreview.vue

@@ -9,6 +9,7 @@
       v-model="content"
       class="text-content"
       :class="{ 'is-editing': isEditing }"
+      :style="editorStyle"
       :spellcheck="false"
       :placeholder="t('Start typing...')"
       @click="startEdit"
@@ -77,6 +78,12 @@ function stopEdit() {
   isEditing.value = false
 }
 
+// 通过内联 style 绑定样式，避免 scoped CSS :focus 伪类不稳定
+const editorStyle = computed(() => ({
+  borderColor: isEditing.value ? 'rgba(59, 130, 246, 0.5)' : 'transparent',
+  boxShadow: isEditing.value ? '0 0 12px rgba(59, 130, 246, 0.25), 0 0 0 2px rgba(59, 130, 246, 0.3)' : 'none',
+}))
+
 // 暴露 save 方法给父组件调用
 defineExpose({
   async saveFile(): Promise<Blob | null> {
@@ -92,7 +99,6 @@ defineExpose({
   width: 100%;
   height: 100%;
   background: #f8f9fb;
-  /* 圆角裁剪，让 inset shadow 的圆角与容器一致 */
   border-radius: 4px;
   overflow: hidden;
 }
@@ -109,7 +115,6 @@ defineExpose({
   font-size: 13px;
 }
 
-/* 全高铺满，不受父容器 align-items 影响 */
 .text-content {
   position: absolute;
   inset: 0;
@@ -129,19 +134,7 @@ defineExpose({
   outline: none;
   resize: none;
   tab-size: 2;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-/* hover：轻微蓝色提示可编辑 */
-.text-content:hover:not(:focus) {
-  border-color: rgba(59, 130, 246, 0.2);
-}
-
-/* 聚焦编辑：蓝色边框 + inset 光晕 */
-.text-content:focus {
-  outline: none;
-  border-color: rgba(59, 130, 246, 0.5);
-  box-shadow: inset 0 0 0 3px rgba(59, 130, 246, 0.18);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .text-content.is-editing {