feat: 优化编辑区 UI - 左侧文档列表和右侧规则面板样式升级

- 文档卡片：添加渐变背景、阴影、hover 动画效果
- 文档图标：优化尺寸、添加阴影和缩放动画
- 规则卡片：添加渐变背景、阴影、hover 状态优化
- 规则 badge：添加渐变背景、阴影、大写字母
- 要素卡片：优化边框、阴影、hover 效果
- 搜索框：添加渐变背景、focus 状态优化
- 快捷按钮：添加渐变背景、边框、动画效果

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

@@ -3985,25 +3985,30 @@ onMounted(async () => {
     .nav-item {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 9px 12px;
-      border-radius: 8px;
+      gap: 12px;
+      padding: 10px 14px;
+      border-radius: 10px;
       cursor: pointer;
-      transition: background 0.15s;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       font-size: 14px;
       color: var(--text-1);
+      border: 1.5px solid transparent;
 
       &:hover {
-        background: var(--bg);
+        background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
+        border-color: #e6f0ff;
+        transform: translateX(2px);
+        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
       }
 
       .nav-icon {
-        font-size: 16px;
+        font-size: 18px;
         flex-shrink: 0;
       }
 
       .nav-label {
-        font-weight: 500;
+        font-weight: 600;
+        letter-spacing: 0.2px;
       }
     }
   }
@@ -4040,17 +4045,25 @@ onMounted(async () => {
     }
 
     .sidebar-search {
-      margin-bottom: 8px;
+      margin-bottom: 10px;
 
       :deep(.el-input__wrapper) {
-        border-radius: 8px;
-        background: var(--bg);
-        box-shadow: none;
-        border: 1px solid transparent;
+        border-radius: 10px;
+        background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+        border: 1.5px solid #e8ecf0;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
-        &:hover, &.is-focus {
-          border-color: var(--primary);
-          background: var(--white);
+        &:hover {
+          border-color: #409eff;
+          background: #fff;
+          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
+        }
+        
+        &.is-focus {
+          border-color: #409eff;
+          background: #fff;
+          box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
         }
       }
     }
@@ -4069,39 +4082,60 @@ onMounted(async () => {
   .doc-item {
     display: flex;
     align-items: flex-start;
-    gap: 10px;
-    padding: 10px 12px;
-    border-radius: 10px;
+    gap: 12px;
+    padding: 12px;
+    border-radius: 12px;
     cursor: pointer;
-    transition: all 0.15s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     border: 1.5px solid transparent;
+    background: transparent;
 
     &:hover {
-      background: #f0f7ff;
+      background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
+      
+      .doc-icon-wrap {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+      }
     }
 
     &.active {
-      background: #e6f0ff;
+      background: linear-gradient(135deg, #e6f0ff 0%, #d9e9ff 100%);
       border-color: var(--primary);
+      box-shadow: 0 2px 12px rgba(64, 158, 255, 0.12);
 
       .doc-item-title {
         color: var(--primary);
+        font-weight: 700;
+      }
+      
+      .doc-icon-wrap {
+        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+        
+        .doc-icon-glyph {
+          filter: brightness(0) invert(1);
+        }
       }
     }
 
     .doc-icon-wrap {
-      width: 36px;
+      width: 40px;
       height: 40px;
-      border-radius: 6px;
-      background: #eef3ff;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #eef3ff 0%, #e1ecff 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.06);
 
       .doc-icon-glyph {
-        font-size: 18px;
+        font-size: 20px;
+        transition: filter 0.2s;
       }
     }
 
@@ -6474,29 +6508,32 @@ onMounted(async () => {
   }
   
   .element-card {
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
+    background: #fff;
+    border: 1.5px solid #e8ecf0;
+    border-radius: 12px;
     overflow: hidden;
-    transition: all 0.2s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
     
     &:hover {
-      border-color: var(--primary);
-      box-shadow: var(--shadow-sm);
+      border-color: #409eff;
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.08);
+      transform: translateY(-1px);
     }
     
     .element-card-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 12px 16px;
-      background: var(--bg);
-      border-bottom: 1px solid var(--border);
+      padding: 14px 16px;
+      background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
+      border-bottom: 1.5px solid #e8ecf0;
       
       .element-label {
-        font-weight: 600;
+        font-weight: 700;
         font-size: 14px;
-        color: var(--text-1);
+        color: #1f2937;
+        letter-spacing: 0.2px;
       }
     }
     
@@ -7574,37 +7611,51 @@ onMounted(async () => {
 
   // ---- 规则项 ----
   .fp-rule-item {
-    border-radius: 10px;
-    border: 1px solid #eef1f5;
+    border-radius: 12px;
+    border: 1.5px solid #e8ecf0;
     background: #fff;
-    transition: background 0.15s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
 
-    &:hover { background: #f8fafc; }
-    &.expanded { background: #fafbfc; }
+    &:hover { 
+      background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
+      border-color: #d9e2ec;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+      transform: translateY(-1px);
+    }
+    
+    &.expanded { 
+      background: #fafbfc;
+      border-color: #d0dae6;
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+    }
 
     .rule-item-main {
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 12px 14px;
+      padding: 14px 16px;
     }
 
     .rule-action-badge {
       flex-shrink: 0;
-      font-size: 12px;
-      font-weight: 600;
-      padding: 4px 10px;
-      border-radius: 13px;
+      font-size: 11px;
+      font-weight: 700;
+      padding: 5px 12px;
+      border-radius: 16px;
       line-height: 18px;
       white-space: nowrap;
-
-      &.action-quote           { background: #e6f4ff; color: #1677ff; }
-      &.action-summary         { background: #f6ffed; color: #52c41a; }
-      &.action-ai_extract      { background: #e6fffb; color: #13c2c2; }
-      &.action-table_extract   { background: #fff7e6; color: #fa8c16; }
-      &.action-use_entity_value { background: #f0f0f0; color: #666; }
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+      &.action-quote           { background: linear-gradient(135deg, #e6f4ff 0%, #d9ecff 100%); color: #1677ff; }
+      &.action-summary         { background: linear-gradient(135deg, #f6ffed 0%, #e8f9e0 100%); color: #52c41a; }
+      &.action-ai_extract      { background: linear-gradient(135deg, #e6fffb 0%, #d9f7f2 100%); color: #13c2c2; }
+      &.action-table_extract   { background: linear-gradient(135deg, #fff7e6 0%, #ffefd9 100%); color: #fa8c16; }
+      &.action-use_entity_value { background: linear-gradient(135deg, #f5f5f5 0%, #ececec 100%); color: #666; }
     }
 
     .rule-info {