履约配置和 库存界面ui优化

apps/frontend/src/views/admin/AdminInventoryView.vue

@@ -461,35 +461,22 @@ onMounted(async () => {
 <template>
   <section class="admin-panel">
     <header class="panel-header">
-      <div>
+      <div class="panel-header-copy">
         <h1>库存管理</h1>
-        <p>库存项现在按“内部履约 SKU + 凭据类型”入池。当前三角洲行动腾讯兑换码自动领取，会优先使用 `tencent_code` 类型库存。</p>
+        <p>按内部履约 SKU 和凭据类型管理库存、预占和发放。</p>
+      </div>
+      <div class="header-tags">
+        <span class="header-tag">按 SKU + 凭据类型入池</span>
+        <span class="header-tag">腾讯兑换优先使用 `tencent_code`</span>
+        <span class="header-tag">命中库存后自动流转或转人工</span>
       </div>
     </header>
 
-    <section class="guide-card">
-      <article class="guide-item">
-        <span class="guide-label">1. 商品识别</span>
-        <h2>先识别成内部履约 SKU</h2>
-        <p>平台商品不会直接配库存。订单先在“商品识别与履约配置”里映射成内部履约 SKU，再来到这里找库存。</p>
-      </article>
-      <article class="guide-item">
-        <span class="guide-label">2. 库存预占</span>
-        <h2>再按凭据类型找库存项</h2>
-        <p>`tencent_claim_redeem` 和 `tencent_claim_assisted` 当前都会优先查找 `tencent_code`，适合三角洲行动这类腾讯兑换码领取场景。以后扩展别的履约档案时，也会按各自 requirement 匹配。</p>
-      </article>
-      <article class="guide-item">
-        <span class="guide-label">3. 履约结果</span>
-        <h2>自动绑定或转人工</h2>
-        <p>命中库存后任务会进入预占 / 发放链路；配置为 `tencent_claim_assisted` 时会进入“用户登录 + 客服确认 + 后端自动兑换”；配置走 `manual_review` 时，会落到人工处理。</p>
-      </article>
-    </section>
-
     <section class="filter-card">
       <div class="card-head">
         <div>
           <h2>查询库存池</h2>
-          <p>按内部履约 SKU、凭据类型、批次和状态查看当前库存池。</p>
+          <p>按内部履约 SKU、凭据类型、批次和状态快速定位库存。</p>
         </div>
       </div>
       <div class="form-grid">
@@ -516,7 +503,7 @@ onMounted(async () => {
       <div class="card-head">
         <div>
           <h2>入库与导入</h2>
-          <p>这里填写的是内部履约 SKU，不是平台侧 `sku_code`。内部 SKU 支持中文命名；同一类商品建议长期复用同一个名字，这样订单才能稳定共用库存池。</p>
+          <p>填写内部履约 SKU，不是平台侧 `sku_code`。建议同类商品长期复用同一个内部名称。</p>
         </div>
       </div>
 
@@ -770,26 +757,24 @@ onMounted(async () => {
 <style scoped>
 .admin-panel {
   display: grid;
-  gap: 16px;
+  gap: 14px;
 }
 
 .panel-header h1,
 .card-head h2,
-.guide-item h2 {
+.pool-title {
   margin: 0;
   color: #1d3555;
 }
 
 .panel-header p,
 .card-head p,
-.guide-item p,
 .toolbar-copy,
 .section-tip {
   margin: 8px 0 0;
   color: #64748b;
 }
 
-.guide-card,
 .filter-card,
 .import-card,
 .table-card,
@@ -801,33 +786,38 @@ onMounted(async () => {
   border: 1px solid rgba(86, 108, 138, 0.1);
 }
 
-.guide-card {
+.panel-header {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+  gap: 10px;
 }
 
-.guide-item {
-  padding: 16px;
-  border-radius: 18px;
-  background: linear-gradient(180deg, rgba(244, 248, 255, 0.96), rgba(255, 255, 255, 0.96));
-  border: 1px solid rgba(86, 108, 138, 0.08);
+.panel-header-copy p {
+  margin-top: 6px;
 }
 
-.guide-label,
-.helper-title {
+.header-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.header-tag,
+.helper-title,
+.summary-label,
+.pool-total {
   display: inline-flex;
-  margin-bottom: 10px;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgba(37, 89, 167, 0.08);
+  border: 1px solid rgba(37, 89, 167, 0.12);
   color: #2559a7;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
-.guide-item p {
-  line-height: 1.6;
-}
-
 .card-head {
   display: flex;
   justify-content: space-between;
@@ -975,14 +965,6 @@ onMounted(async () => {
   gap: 8px;
 }
 
-.summary-label,
-.pool-total {
-  color: #2559a7;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-}
-
 .summary-value {
   font-size: 30px;
   line-height: 1;
@@ -1176,7 +1158,6 @@ onMounted(async () => {
 @media (max-width: 1180px) {
   .summary-grid,
   .pool-grid,
-  .guide-card,
   .form-grid,
   .helper-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1186,12 +1167,12 @@ onMounted(async () => {
 @media (max-width: 860px) {
   .summary-grid,
   .pool-grid,
-  .guide-card,
   .form-grid,
   .helper-grid {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .header-tags,
   .single-row,
   .action-row,
   .sku-helper-bar {