style: 适配原型 UI 样式

Editor.vue 样式更新：

1. 右侧面板宽度: 320px -> 380px

2. 要素标签样式更新：
   - 圆角改为胶囊形 (border-radius: 16px)
   - 添加左边框颜色区分实体类型
   - 增加拖拽光标和悬停动画
   - 字体加粗

3. 实体高亮样式更新：
   - 使用边框+背景色样式
   - 不同实体类型对应不同颜色
   - 悬停时背景填充、文字变白

4. 提示文字更新：
   - 空状态: "选中文本后右键标记为变量"
   - 有内容: "点击标签定位到文档位置"

参考: frontend/灵越智报_完整交互版.html

frontend/vue-demo/src/views/Editor.vue

@@ -137,7 +137,10 @@
               </div>
             </div>
             <div class="element-hint" v-if="entities.length === 0">
-              文档解析后将展示识别的要素
+              选中文本后右键标记为变量
+            </div>
+            <div class="element-hint" v-else>
+              点击标签定位到文档位置
             </div>
           </div>
         </div>
@@ -1696,11 +1699,107 @@ onUnmounted(() => {
         font-size: 13px;
       }
     }
+    
+    // 实体高亮样式 - 匹配原型 UI（边框 + 背景）
+    :deep(.entity-highlight) {
+      display: inline;
+      padding: 2px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-weight: 500;
+      border: 1px solid #1890ff;
+      color: #1890ff;
+      background: rgba(24, 144, 255, 0.1);
+      
+      &:hover {
+        background: #1890ff;
+        color: white;
+      }
+      
+      // 实体类型颜色
+      &.entity {
+        border-color: #1890ff;
+        color: #1890ff;
+        background: rgba(24, 144, 255, 0.1);
+        &:hover { background: #1890ff; color: white; }
+      }
+      
+      &.concept {
+        border-color: #722ed1;
+        color: #722ed1;
+        background: rgba(114, 46, 209, 0.1);
+        &:hover { background: #722ed1; color: white; }
+      }
+      
+      &.data {
+        border-color: #52c41a;
+        color: #52c41a;
+        background: rgba(82, 196, 26, 0.1);
+        &:hover { background: #52c41a; color: white; }
+      }
+      
+      &.location {
+        border-color: #faad14;
+        color: #d48806;
+        background: rgba(250, 173, 20, 0.1);
+        &:hover { background: #faad14; color: white; }
+      }
+      
+      &.asset {
+        border-color: #eb2f96;
+        color: #eb2f96;
+        background: rgba(235, 47, 150, 0.1);
+        &:hover { background: #eb2f96; color: white; }
+      }
+      
+      &.person {
+        border-color: #1890ff;
+        color: #1890ff;
+        background: rgba(24, 144, 255, 0.1);
+        &:hover { background: #1890ff; color: white; }
+      }
+      
+      &.org {
+        border-color: #722ed1;
+        color: #722ed1;
+        background: rgba(114, 46, 209, 0.1);
+        &:hover { background: #722ed1; color: white; }
+      }
+      
+      &.date {
+        border-color: #13c2c2;
+        color: #13c2c2;
+        background: rgba(19, 194, 194, 0.1);
+        &:hover { background: #13c2c2; color: white; }
+      }
+      
+      &.product {
+        border-color: #eb2f96;
+        color: #eb2f96;
+        background: rgba(235, 47, 150, 0.1);
+        &:hover { background: #eb2f96; color: white; }
+      }
+      
+      &.event {
+        border-color: #fa8c16;
+        color: #fa8c16;
+        background: rgba(250, 140, 22, 0.1);
+        &:hover { background: #fa8c16; color: white; }
+      }
+      
+      &.law {
+        border-color: #2f54eb;
+        color: #2f54eb;
+        background: rgba(47, 84, 235, 0.1);
+        &:hover { background: #2f54eb; color: white; }
+      }
+    }
   }
 }
 
 .right-panel {
-  width: 320px;
+  width: 380px;
   background: #fff;
   border-left: 1px solid var(--border);
   overflow-y: auto;
@@ -1739,21 +1838,28 @@ onUnmounted(() => {
     overflow-y: auto;
   }
   
+  // 要素标签样式 - 匹配原型 UI
   .var-tag {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border-radius: 4px;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 16px;
     font-size: 12px;
-    cursor: pointer;
+    cursor: grab;
     transition: all 0.2s;
     background: var(--bg);
     border: 1px solid var(--border);
+    user-select: none;
     
     &:hover {
       border-color: var(--primary);
       background: var(--primary-light);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      cursor: grabbing;
     }
     
     .tag-icon {
@@ -1765,6 +1871,7 @@ onUnmounted(() => {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      font-weight: 500;
     }
     
     .tag-status {
@@ -1772,42 +1879,33 @@ onUnmounted(() => {
       font-size: 10px;
     }
     
-    // 实体类型样式
-    &.entity-person {
-      border-color: #1890ff;
-      background: rgba(24, 144, 255, 0.1);
+    // 实体类型样式 - 左边框颜色区分
+    &.entity-person, &.entity {
+      border-left: 3px solid #1890ff;
     }
-    &.entity-org {
-      border-color: #722ed1;
-      background: rgba(114, 46, 209, 0.1);
+    &.entity-org, &.concept {
+      border-left: 3px solid #722ed1;
     }
-    &.entity-location {
-      border-color: #faad14;
-      background: rgba(250, 173, 20, 0.1);
+    &.entity-location, &.location {
+      border-left: 3px solid #faad14;
     }
     &.entity-date {
-      border-color: #13c2c2;
-      background: rgba(19, 194, 194, 0.1);
+      border-left: 3px solid #13c2c2;
     }
-    &.entity-data {
-      border-color: #52c41a;
-      background: rgba(82, 196, 26, 0.1);
+    &.entity-data, &.data {
+      border-left: 3px solid #52c41a;
     }
-    &.entity-product {
-      border-color: #eb2f96;
-      background: rgba(235, 47, 150, 0.1);
+    &.entity-product, &.asset {
+      border-left: 3px solid #eb2f96;
     }
     &.entity-event {
-      border-color: #fa8c16;
-      background: rgba(250, 140, 22, 0.1);
+      border-left: 3px solid #fa8c16;
     }
     &.entity-law {
-      border-color: #2f54eb;
-      background: rgba(47, 84, 235, 0.1);
+      border-left: 3px solid #2f54eb;
     }
     &.entity-default {
-      border-color: #8c8c8c;
-      background: rgba(140, 140, 140, 0.1);
+      border-left: 3px solid #8c8c8c;
     }
   }