fix(operator): fix operator edit issue

src/views/asset-management/asset-information/components/AssetSearchCard.vue

@@ -0,0 +1,189 @@
+<template>
+  <ElCard shadow="never" class="search-card">
+    <template #header>
+      <div class="card-header">
+        <span>资产查询</span>
+      </div>
+    </template>
+    <div class="iccid-search">
+      <div class="iccid-input-wrapper">
+        <ElInput
+          v-model="searchIccid"
+          placeholder="请输入虚拟号、ICCID、IMEI、SN或MSISDN"
+          clearable
+          style="width: 500px"
+          @focus="iccidInputFocused = true"
+          @blur="iccidInputFocused = false"
+          @keyup.enter="handleSearch"
+        />
+        <!-- 放大显示区域 -->
+        <Transition name="zoom-fade">
+          <div v-if="iccidInputFocused && searchIccid" class="iccid-magnifier">
+            <div class="magnifier-arrow"></div>
+            <div class="magnifier-content">
+              {{ formatIccidWithDashes(searchIccid) }}
+            </div>
+          </div>
+        </Transition>
+      </div>
+      <ElButton type="primary" @click="handleSearch" :icon="Search" style="margin-left: 16px">
+        查询
+      </ElButton>
+
+      <!-- 操作按钮组 -->
+      <div v-if="hasCardInfo" class="operation-button-group">
+        <ElButton @click="handleRefresh" type="primary" :icon="Refresh"> 刷新 </ElButton>
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { ElCard, ElInput, ElButton } from 'element-plus'
+  import { Search, Refresh } from '@element-plus/icons-vue'
+  import { useAssetFormatters } from '../composables/useAssetFormatters'
+
+  // Use formatters
+  const { formatIccidWithDashes } = useAssetFormatters()
+
+  // Props
+  interface Props {
+    hasCardInfo?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    hasCardInfo: false
+  })
+
+  // Emits
+  const emit = defineEmits<{
+    search: [payload: { identifier: string }]
+    refresh: []
+  }>()
+
+  // State
+  const searchIccid = ref('')
+  const iccidInputFocused = ref(false)
+
+  // Methods
+  const handleSearch = () => {
+    if (!searchIccid.value.trim()) {
+      return
+    }
+    emit('search', { identifier: searchIccid.value.trim() })
+  }
+
+  const handleRefresh = () => {
+    emit('refresh')
+  }
+</script>
+
+<style scoped lang="scss">
+  .search-card {
+    margin-bottom: 20px;
+    overflow: visible;
+    background: var(--el-bg-color, #fff);
+
+    :deep(.el-card__header) {
+      padding: 16px 20px;
+      background: var(--el-fill-color-light);
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    :deep(.el-card__body) {
+      padding: 16px 20px;
+      overflow: visible;
+    }
+
+    .iccid-search {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      align-items: flex-start;
+
+      .iccid-input-wrapper {
+        position: relative;
+
+        .iccid-magnifier {
+          position: absolute;
+          top: calc(100% + 12px);
+          left: 0;
+          z-index: 1000;
+          white-space: nowrap;
+
+          // 三角箭头 - 上边框样式
+          .magnifier-arrow {
+            position: absolute;
+            top: -9px;
+            left: 80px;
+            width: 16px;
+            height: 16px;
+            background-color: var(--el-bg-color, #fff);
+            border-top: 2px solid var(--el-color-primary);
+            border-left: 2px solid var(--el-color-primary);
+            transform: rotate(45deg);
+          }
+
+          // 内容区域
+          .magnifier-content {
+            padding: 16px 24px;
+            font-family: 'Courier New', Consolas, monospace;
+            font-size: 28px;
+            font-weight: 600;
+            line-height: 1.4;
+            color: var(--el-text-color-primary);
+            letter-spacing: 3px;
+            background-color: var(--el-bg-color, #fff);
+            border: 2px solid var(--el-color-primary);
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+          }
+        }
+      }
+
+      .operation-button-group {
+        display: flex;
+        gap: 12px;
+        margin-left: auto;
+      }
+    }
+  }
+
+  // 放大效果的过渡动画
+  .zoom-fade-enter-active,
+  .zoom-fade-leave-active {
+    transition: all 0.2s ease;
+  }
+
+  .zoom-fade-enter-from {
+    opacity: 0;
+    transform: scale(0.8) translateY(-10px);
+  }
+
+  .zoom-fade-leave-to {
+    opacity: 0;
+    transform: scale(0.8) translateY(-10px);
+  }
+
+  .zoom-fade-enter-to,
+  .zoom-fade-leave-from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  @media (width <= 768px) {
+    .search-card {
+      top: 16px;
+      margin-bottom: 16px;
+
+      :deep(.el-card__header) {
+        padding: 12px 16px;
+      }
+
+      :deep(.el-card__body) {
+        padding: 12px 16px;
+      }
+    }
+  }
+</style>