From cbd73d431276ad854557db1f014462f7162210a8 Mon Sep 17 00:00:00 2001
From: zc <jingyun1127@outlook.com>
Date: Sat, 28 Feb 2026 16:54:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=B0=E9=87=8D=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/plugins/components.ts          |   7 +
 src/apis/weightManage/weightManage.ts |  27 +
 src/router/route.ts                   |   6 -
 src/types/components.d.ts             |  41 ++
 src/views/weightManage/index.vue      | 769 ++++++++++++++++++++++++++
 5 files changed, 844 insertions(+), 6 deletions(-)
 create mode 100644 src/apis/weightManage/weightManage.ts
 create mode 100644 src/views/weightManage/index.vue

diff --git a/config/plugins/components.ts b/config/plugins/components.ts
index 2c71218..96638d7 100644
--- a/config/plugins/components.ts
+++ b/config/plugins/components.ts
@@ -1,4 +1,5 @@
 import components from 'unplugin-vue-components/vite'
+import { ArcoResolver } from 'unplugin-vue-components/resolvers'
 
 export default function createComponents() {
   return components({
@@ -7,5 +8,11 @@ export default function createComponents() {
     extensions: ['vue', 'tsx'],
     // 配置文件生成位置
     dts: './src/types/components.d.ts',
+    // 自动导入Arco Design组件
+    resolvers: [
+      ArcoResolver({
+        sideEffect: true,
+      }),
+    ],
   })
 }
diff --git a/src/apis/weightManage/weightManage.ts b/src/apis/weightManage/weightManage.ts
new file mode 100644
index 0000000..4270f09
--- /dev/null
+++ b/src/apis/weightManage/weightManage.ts
@@ -0,0 +1,27 @@
+import http from '@/utils/http'
+
+const BASE_URL = '/weighManage/material'
+
+export interface WeighManageResp {
+  id: string
+  materialCode: string
+  materialName: string
+  materialSpec: string
+  weight: number
+  imageUrl: string
+  matchResult: string
+}
+
+export interface WeighManageQuery {
+  materialCode: string
+}
+
+/** @desc 查询物料信息 */
+export function getMaterialDetail(query: WeighManageQuery) {
+  return http.get<WeighManageResp>(`${BASE_URL}/detail`, query)
+}
+
+/** @desc 新增人员管理 */
+export function addPeople(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
diff --git a/src/router/route.ts b/src/router/route.ts
index f5dbe4a..adc84fd 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -54,12 +54,6 @@ export const systemRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/setting/profile/index.vue'),
         meta: { title: '个人中心', showInTabs: false },
       },
-      {
-        path: '/setting/message',
-        name: 'SettingMessage',
-        component: () => import('@/views/setting/message/index.vue'),
-        meta: { title: '消息中心', showInTabs: false },
-      },
     ],
   },
 ]
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index d4d1353..d40c7fa 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,7 +7,48 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AAlert: typeof import('@arco-design/web-vue')['Alert']
+    AAvatar: typeof import('@arco-design/web-vue')['Avatar']
+    ABadge: typeof import('@arco-design/web-vue')['Badge']
+    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
+    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
+    AButton: typeof import('@arco-design/web-vue')['Button']
+    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
+    ACol: typeof import('@arco-design/web-vue')['Col']
+    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
+    ADescriptions: typeof import('@arco-design/web-vue')['Descriptions']
+    ADescriptionsItem: typeof import('@arco-design/web-vue')['DescriptionsItem']
+    ADivider: typeof import('@arco-design/web-vue')['Divider']
+    ADoption: typeof import('@arco-design/web-vue')['Doption']
+    ADrawer: typeof import('@arco-design/web-vue')['Drawer']
+    ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
+    AEmpty: typeof import('@arco-design/web-vue')['Empty']
+    AForm: typeof import('@arco-design/web-vue')['Form']
+    AFormItem: typeof import('@arco-design/web-vue')['FormItem']
+    AIcon: typeof import('@arco-design/web-vue')['Icon']
+    AImage: typeof import('@arco-design/web-vue')['Image']
+    AInput: typeof import('@arco-design/web-vue')['Input']
+    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
+    ALayout: typeof import('@arco-design/web-vue')['Layout']
+    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
+    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
+    ALink: typeof import('@arco-design/web-vue')['Link']
+    AMenu: typeof import('@arco-design/web-vue')['Menu']
+    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
+    AModal: typeof import('@arco-design/web-vue')['Modal']
+    APopover: typeof import('@arco-design/web-vue')['Popover']
+    ARow: typeof import('@arco-design/web-vue')['Row']
+    AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
+    ASelect: typeof import('@arco-design/web-vue')['Select']
+    ASpace: typeof import('@arco-design/web-vue')['Space']
+    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
+    ASwitch: typeof import('@arco-design/web-vue')['Switch']
+    ATable: typeof import('@arco-design/web-vue')['Table']
+    ATabPane: typeof import('@arco-design/web-vue')['TabPane']
+    ATabs: typeof import('@arco-design/web-vue')['Tabs']
+    ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
+    AWatermark: typeof import('@arco-design/web-vue')['Watermark']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
diff --git a/src/views/weightManage/index.vue b/src/views/weightManage/index.vue
new file mode 100644
index 0000000..2a3d9d1
--- /dev/null
+++ b/src/views/weightManage/index.vue
@@ -0,0 +1,769 @@
+<template>
+  <div class="gi_page">
+    <div class="container">
+      <!-- 步骤导航 -->
+      <div class="step-nav">
+        <div class="step-item" :class="{ active: activeStep >= 1, completed: activeStep > 1 }">
+          <div class="step-circle">1</div>
+          <div class="step-title">扫码核验</div>
+        </div>
+        <div class="step-line"></div>
+        <div class="step-item" :class="{ active: activeStep >= 2, completed: activeStep > 2 }">
+          <div class="step-circle">2</div>
+          <div class="step-title">称重登记</div>
+        </div>
+        <div class="step-line"></div>
+        <div class="step-item" :class="{ active: activeStep >= 3, completed: activeStep > 3 }">
+          <div class="step-circle">3</div>
+          <div class="step-title">完成创建</div>
+        </div>
+      </div>
+
+      <!-- 步骤内容 -->
+      <!-- 扫码核验页面 -->
+      <div v-if="activeStep === 1" class="step-content">
+        <div class="main-content">
+          <!-- 左侧表单 -->
+          <div class="left-section">
+            <a-image  v-if="!formData.imageUrl" :src="formData.imageUrl"/>
+            <img v-else :src="formData.imageUrl" class="sample-image square-image" alt="样图">
+            
+            <a-form :model="formData" layout="vertical">
+              <div class="form-row">
+                <div class="form-item">
+                  <a-form-item label="物料名称">
+                    <a-input v-model="formData.materialName" placeholder="物料名称" disabled /> 
+                  </a-form-item>
+                </div>
+                <div class="form-item">
+                  <a-form-item label="物料规格">
+                    <a-input v-model="formData.materialSpec" placeholder="物料规格" disabled /> 
+                  </a-form-item>
+                </div>
+              </div>
+              <div class="form-row">
+                <div class="form-item">
+                  <a-form-item label="物料编码">
+                    <a-input v-model="formData.materialCode" placeholder="物料编码" disabled /> 
+                  </a-form-item>
+                </div>
+                <div class="form-item">
+                  <a-form-item label="重量">
+                    <a-input v-model="formData.weight" placeholder="Kg" disabled /> 
+                  </a-form-item>
+                </div>
+              </div>
+              <div class="form-row">
+                <div class="form-item">
+                  <a-form-item label="物料编码">
+                    <a-input
+                      v-model="formData.inputMaterialCode" 
+                      placeholder="请使用扫码枪扫描物料编码"
+                      @change="handleMaterialCodeChange"
+                    />
+                  </a-form-item>
+                </div>
+              </div>
+            </a-form>
+          </div>
+
+          <!-- 右侧信息 -->
+          <div class="right-section">
+            <div class="camera-section">
+              <div class="image-placeholder square-image">实时画面 相机1</div>
+              <div class="image-placeholder square-image">实时画面 相机2</div>
+            </div>
+            
+            <div class="info-section">
+              <div class="info-card">
+                <h4>识别信息</h4>
+                <div class="info-item">
+                  <span class="label">物料名称:</span>
+                  <span class="value">{{ formData.materialName || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">物料编码:</span>
+                  <span class="value">{{ formData.materialCode || '-' }}</span>
+                </div>
+              </div>
+
+
+              <div class="info-card">
+                <h4>比对结果</h4>
+                <div class="info-item">
+                  <span class="label">比对结果:</span>
+                  <span class="value match-result" :class="{
+                    'match-success': formData.matchResult === 'success',
+                    'match-failed': formData.matchResult === 'failed',
+                    'match-pending': !formData.matchResult
+                  }">
+                    <icon-check-circle-fill v-if="formData.matchResult === 'success'" style="color: #52c41a; margin-right: 8px; font-size: 25px;"/>
+                    <icon-close-circle-fill v-else-if="formData.matchResult === 'failed'" style="color: #ff4d4f; margin-right: 8px; font-size: 25px;"/>
+
+                    {{ formData.matchResult === 'success' ? '成功' : formData.matchResult === 'failed' ? '失败' : '-' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 称重登记页面 -->
+      <div v-else-if="activeStep === 2" class="step-content">
+        <div class="weighing-content">
+          <!-- 左侧输入区域 -->
+          <div class="left-weighing-section">
+            <div class="form-row">
+              <div class="form-item">
+                <label>物料名称:</label>
+                <a-input v-model="formData.materialName" placeholder="物料名称" disabled />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-item">
+                <label>输入数量:</label>
+                <a-input v-model="inputQuantity" placeholder="请输入数量" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-item">
+                <label>对应重量:</label>
+                <a-input v-model="inputWeight" placeholder="请输入重量" />
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="form-item">
+                <label>称重次数:</label>
+                <a-input v-model="weighingCount" placeholder="称重次数" disabled />
+              </div>
+            </div>
+            <div class="image-placeholder large-image">实时画面</div>
+            <div class="weighing-actions">
+              <a-button type="primary" @click="handleConfirm">确定</a-button>
+              <a-button style="margin-left: 12px;" @click="handleReset">重置</a-button>
+            </div>
+          </div>
+
+          <!-- 右侧表格区域 -->
+          <div class="right-weighing-section">
+            <div class="weighing-section">
+              <div class="section-header">
+                <h4>称重列表</h4>
+                <div class="table-actions">
+                  <a-button>打印</a-button>
+                </div>
+              </div>
+              <a-table :columns="columns" :data="weighingList" bordered>
+                <template #action="{ record }">
+                  <a-button type="text" status="danger" @click="handleDelete(record.key)">
+                    删除
+                  </a-button>
+                </template>
+              </a-table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 完成创建页面 -->
+      <div v-else-if="activeStep === 3" class="step-content">
+        <div class="completion-content">
+          <div class="completion-icon">
+            <a-icon type="check-circle" :size="64" style="color: #52c41a;" />
+          </div>
+          <h2>创建完成</h2>
+          <p>任务已成功创建，以下是任务详情：</p>
+          <div class="completion-info">
+            <div class="info-item">
+              <span class="label">任务ID:</span>
+              <span class="value">{{ taskId }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">物料名称:</span>
+              <span class="value">{{ formData.materialName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">物料编码:</span>
+              <span class="value">{{ formData.materialCode }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">物料规格:</span>
+              <span class="value">{{ formData.materialSpec }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">重量:</span>
+              <span class="value">{{ formData.weight }}</span>
+            </div>
+          </div>
+          <div class="completion-actions">
+            <a-button type="primary" @click="handleBackToFirst">返回首页</a-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="action-buttons">
+        <a-button
+          v-if="activeStep > 1 && activeStep < 3"
+          @click="handlePrevious"
+          class="previous-button"
+        >
+          上一步
+        </a-button>
+        <a-button
+          v-if="activeStep < 3"
+          type="primary"
+          @click="handleNext"
+          class="next-button"
+        >
+          {{ activeStep === 2 ? '完成' : '下一步' }}
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { Modal, Icon } from '@arco-design/web-vue'
+import {getMaterialDetail, type WeighManageQuery} from "@/apis/weightManage/weightManage";
+
+// 当前步骤
+const activeStep = ref(1)
+
+// 表单数据
+const formData = reactive({
+  inputMaterialCode: '', // 输入的物料编码
+  materialCode: '', // 物料编码
+  materialName: '', // 物料名称
+  materialSpec: '', // 物料规格
+  weight: 0, // 重量
+  imageUrl: '', // 样图URL
+  matchResult: '' // 比对结果
+})
+
+// 称重登记页面数据
+const inputQuantity = ref('')
+const inputWeight = ref('')
+const weighingCount = ref(1)
+
+// 称重列表数据
+const weighingList = ref([
+  // 初始数据可以在这里添加
+])
+
+// 任务ID
+const taskId = computed(() => {
+  const date = new Date().toISOString().slice(0, 10).replace(/-/g, '')
+  const random = Math.floor(1000 + Math.random() * 9000)
+  return `${date}${formData.materialCode}${random}`
+})
+
+// 称重表格列
+const columns = [
+  {
+    title: '称重次数',
+    dataIndex: 'count',
+    key: 'count'
+  },
+  {
+    title: '数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    className: 'green-bg'
+  },
+  {
+    title: '重量',
+    dataIndex: 'weight',
+    key: 'weight',
+    className: 'green-bg'
+  },
+  {
+    title: '抓拍图片',
+    dataIndex: 'image',
+    key: 'image',
+    className: 'green-bg'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    slotName: 'action'
+  }
+]
+
+
+
+// 处理物料编码变化
+const handleMaterialCodeChange = async () => {
+  if (formData.inputMaterialCode) {
+    try {
+      await fetchMaterialData(formData.inputMaterialCode)
+    } catch (error) {
+      console.error('获取物料数据失败:', error)
+    }
+  } else {
+    formData.materialCode = "";
+    formData.materialName = "";
+    formData.materialSpec = "";
+    formData.weight = 0;
+    formData.imageUrl = "";
+    formData.matchResult = "";
+  }
+};
+
+// 模拟调用后端接口
+const fetchMaterialData = async (code: string) => {
+  const query: WeighManageQuery = {
+    materialCode: code
+  }
+  getMaterialDetail(query).then(res => {
+    if (res.code == '0') {
+      // 更新表单数据
+      formData.materialCode = res.data.materialCode
+      formData.materialName = res.data.materialName
+      formData.materialSpec = res.data.materialSpec
+      formData.weight = res.data.weight
+      // formData.imageUrl = res.data.imageUrl
+      formData.imageUrl = "https://menjing.hzjj.cn/uploadPath/2024/01/20/XMT-Q3_20240120171349A257.jpg"
+      // 假设后端返回比对结果
+      // formData.matchResult = res.data.matchResult || 'failed' // 这里根据实际接口返回调整
+      formData.matchResult = res.data.matchResult || 'success' // 这里根据实际接口返回调整
+      return true
+    }
+  });
+}
+
+// 处理下一步
+const handleNext = () => {
+  if (activeStep.value < 3) {
+    if (activeStep.value === 2) {
+      // 当在称重登记页面点击完成时，显示确认弹框
+      Modal.confirm({
+        title: '确认完成',
+        content: '确定要完成称重登记吗？',
+        onOk: () => {
+          activeStep.value++
+        }
+      })
+    } else {
+      activeStep.value++
+    }
+  }
+}
+
+// 处理上一步
+const handlePrevious = () => {
+  if (activeStep.value > 1) {
+    activeStep.value--
+  }
+}
+
+// 返回第一步
+const handleBackToFirst = () => {
+  activeStep.value = 1
+}
+
+
+
+// 处理确定
+const handleConfirm = () => {
+  // 生成新的列表数据
+  const newItem = {
+    key: (weighingList.value.length + 1).toString(),
+    count: weighingCount.value,
+    name: formData.materialName,
+    quantity: inputQuantity.value,
+    weight: inputWeight.value,
+    image: '图片'
+  }
+  // 添加到列表
+  weighingList.value.push(newItem)
+  // 重置输入
+  inputQuantity.value = ''
+  inputWeight.value = ''
+  // 称重次数累加
+  weighingCount.value = weighingList.value.length + 1
+}
+
+// 处理重置
+const handleReset = () => {
+  inputQuantity.value = ''
+  inputWeight.value = ''
+}
+
+// 处理删除
+const handleDelete = (key) => {
+  // 过滤掉要删除的项
+  weighingList.value = weighingList.value.filter(item => item.key !== key)
+  // 重新排序称重次数
+  weighingList.value.forEach((item, index) => {
+    item.count = index + 1
+  })
+  // 更新当前称重次数
+  weighingCount.value = weighingList.value.length + 1
+}
+
+defineOptions({ name: 'WeightManage' })
+</script>
+
+<style scoped lang="scss">
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* 步骤导航 */
+.step-nav {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: var(--color-bg-2);
+  border-radius: 4px;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 1;
+}
+
+.step-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #e8e8e8;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.step-title {
+  font-size: 14px;
+  color: #666;
+}
+
+.step-line {
+  flex: 1;
+  height: 2px;
+  background-color: #e8e8e8;
+  margin: 0 20px;
+}
+
+.step-item.active .step-circle {
+  background-color: #1677ff;
+  color: white;
+}
+
+.step-item.active .step-title {
+  color: #1677ff;
+  font-weight: bold;
+}
+
+.step-item.completed .step-circle {
+  background-color: #52c41a;
+  color: white;
+}
+
+.step-item.completed .step-title {
+  color: #52c41a;
+}
+
+.step-item.completed ~ .step-line {
+  background-color: #52c41a;
+}
+
+/* 步骤内容 */
+.step-content {
+  margin-bottom: 30px;
+}
+
+/* 主内容区域 */
+.main-content {
+  display: flex;
+  margin-bottom: 30px;
+}
+
+.left-section {
+  flex: 1;
+  margin-right: 30px;
+}
+
+.right-section {
+  flex: 1;
+}
+
+/* 称重登记页面 */
+.weighing-content {
+  display: flex;
+  margin-bottom: 30px;
+}
+
+.left-weighing-section {
+  width: 400px;
+  margin-right: 30px;
+}
+
+.right-weighing-section {
+  flex: 1;
+}
+
+.weighing-section {
+  margin-bottom: 20px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.section-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.large-image {
+  width: 100%;
+  height: 200px;
+  margin: 20px 0;
+}
+
+.input-placeholder {
+  width: 100%;
+  height: 32px;
+  background-color: #e8e8e8;
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+.weighing-actions {
+  margin-top: 20px;
+}
+
+.table-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+/* 绿色背景列 */
+:deep(.green-bg) {
+  background-color: #f6ffed;
+}
+
+/* 完成创建页面 */
+.completion-content {
+  text-align: center;
+  padding: 60px 0;
+}
+
+.completion-icon {
+  margin-bottom: 20px;
+}
+
+.completion-content h2 {
+  margin-bottom: 20px;
+  color: #52c41a;
+}
+
+.completion-content p {
+  margin-bottom: 30px;
+  font-size: 16px;
+}
+
+.completion-info {
+  max-width: 400px;
+  margin: 0 auto 40px;
+  text-align: left;
+  background-color: var(--color-bg-2);
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.info-item {
+  margin-bottom: 12px;
+  display: flex;
+}
+
+.info-item .label {
+  width: 100px;
+  font-weight: bold;
+}
+
+.info-item .value {
+  flex: 1;
+}
+
+.completion-actions {
+  margin-top: 40px;
+}
+
+/* 图片占位符 */
+.image-placeholder {
+  width: 100%;
+  height: 150px;
+  background-color: #e8e8e8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+/* 正方形图片 */
+.square-image {
+  width: 200px;
+  height: 200px;
+}
+
+/* 样图 */
+.sample-image {
+  object-fit: cover;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+/* 相机区域 */
+.camera-section {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.camera-section .image-placeholder {
+  width: calc(50% - 10px);
+}
+
+/* 表单区域 */
+.form-section {
+  margin-top: 20px;
+}
+
+.form-row {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.form-item {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.form-item.full-width {
+  flex: 1;
+  margin-right: 0;
+}
+
+/* 确保输入框宽度一致 */
+:deep(.arco-input-wrapper) {
+  width: 100%;
+  height: 35px;
+}
+
+:deep(.arco-input) {
+  font-size: 16px;
+}
+
+.form-item label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: #666;
+}
+
+.form-actions {
+  margin-top: 20px;
+}
+
+/* 信息区域 */
+.info-section {
+  margin-top: 20px;
+}
+
+.info-card {
+  background-color: var(--color-bg-2);
+  border-radius: 4px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.info-card h4 {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 12px;
+  align-items: center;
+}
+
+.info-item .label {
+  width: 100px;
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-item .value {
+  flex: 1;
+  font-size: 16px;
+  color: #333;
+}
+
+.match-result {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+}
+
+.match-success {
+  color: #52c41a;
+}
+
+.match-failed {
+  color: #ff4d4f;
+}
+
+.match-pending {
+  color: #d9d9d9;
+}
+
+.info-text {
+  margin-top: 20px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.next-button {
+  width: 120px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.previous-button {
+  width: 120px;
+  height: 40px;
+  font-size: 14px;
+  margin-right: 12px;
+}
+</style>
\ No newline at end of file