From c6a03b46079bf8fd68bf8840850afab32c68a4b8 Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 11:48:57 +0800
Subject: [PATCH 1/8] feat(api): add mobile CI detail endpoint with attribute
 alias map

- Add CIMobileDetailView at /ci/<ci_id>/mobile
- Return core attributes, parent/child relations, and recent history
- Include attribute_alias_map for frontend alias display"
---
 cmdb-api/api/views/cmdb/ci.py | 51 +++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/cmdb-api/api/views/cmdb/ci.py b/cmdb-api/api/views/cmdb/ci.py
index b53f0c6dc..566de07df 100644
--- a/cmdb-api/api/views/cmdb/ci.py
+++ b/cmdb-api/api/views/cmdb/ci.py
@@ -276,3 +276,54 @@ def post(self, ci_id):
             return self.jsonify(**CIManager().rollback(ci_id, before_date))
 
         return self.get(ci_id)
+
+
+class CIMobileDetailView(APIView):
+    url_prefix = "/ci/<int:ci_id>/mobile"
+
+    def get(self, ci_id):
+        ci = CIManager.get_ci_by_id_from_db(ci_id, ret_key=RetKey.NAME, fields=None, valid=True)
+
+        ci_type = CITypeCache.get(ci.get("_type", 0)) if ci.get("_type") else None
+        type_info = {"id": ci_type.id, "name": ci_type.name, "alias": ci_type.alias} if ci_type else {}
+
+        attribute_alias_map = {}
+        if ci_type:
+            from api.lib.cmdb.ci_type import CITypeAttributeManager
+            attrs = CITypeAttributeManager.get_attr_names_by_type_id(ci_type.id)
+            if attrs:
+                from api.lib.cmdb.cache import AttributeCache
+                for attr_name in attrs:
+                    attr_obj = AttributeCache.get(attr_name)
+                    if attr_obj:
+                        attribute_alias_map[attr_obj.name] = attr_obj.alias or attr_obj.name
+
+        relations = {"parents": [], "children": []}
+        try:
+            from api.lib.cmdb.ci import CIRelationManager
+            children = CIRelationManager.get_children(ci_id, ret_key=RetKey.NAME)
+            for type_name, cis in children.items():
+                for c in cis:
+                    c["_type_name"] = type_name
+                    relations["children"].append(c)
+
+            parent_ids = CIRelationManager.get_parent_ids([ci_id])
+            if ci_id in parent_ids:
+                for p_id, p_type_id in parent_ids[ci_id]:
+                    parent_ci = CIManager.get_cis_by_ids([str(p_id)], ret_key=RetKey.NAME)
+                    if parent_ci:
+                        for p in parent_ci:
+                            p["_type_name"] = CITypeCache.get(p_type_id).name if p_type_id else ""
+                            relations["parents"].append(p)
+        except Exception:
+            pass
+
+        from api.lib.cmdb.history import AttributeHistoryManger
+        try:
+            history = AttributeHistoryManger.get_by_ci_id(ci_id)
+            history = history[:10]
+        except Exception:
+            history = []
+
+        return self.jsonify(ci=ci, type=type_info, relations=relations, history=history,
+                            attribute_alias_map=attribute_alias_map)

From af5b8b613ef793b21c121ed29312d866ae4334bc Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 11:53:46 +0800
Subject: [PATCH 2/8] feat(ui): add QR code button, batch QR export and mobile
 detail page

- Add QRCodeButton component for single CI QR code generation/download
- Add QRCodeBatchExport component for batch QR code download/print
- Add CIMobileDetail mobile-optimized detail page
- Add /cmdb/mobile/:typeId/:ciId route in constant router"
---
 cmdb-ui/package.json                          |   8 +-
 .../cmdb/components/QRCodeBatchExport.vue     | 232 +++++++++
 .../modules/cmdb/components/QRCodeButton.vue  | 141 +++++
 .../cmdb/views/mobile/CIMobileDetail.vue      | 491 ++++++++++++++++++
 cmdb-ui/src/router/config.js                  |   7 +
 5 files changed, 875 insertions(+), 4 deletions(-)
 create mode 100644 cmdb-ui/src/modules/cmdb/components/QRCodeBatchExport.vue
 create mode 100644 cmdb-ui/src/modules/cmdb/components/QRCodeButton.vue
 create mode 100644 cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue

diff --git a/cmdb-ui/package.json b/cmdb-ui/package.json
index 5780a57d0..982969888 100644
--- a/cmdb-ui/package.json
+++ b/cmdb-ui/package.json
@@ -23,6 +23,7 @@
     "axios": "0.18.0",
     "babel-eslint": "^8.2.2",
     "butterfly-dag": "^4.3.26",
+    "codemirror": "^5.65.13",
     "core-js": "^3.31.0",
     "echarts": "^5.3.2",
     "element-ui": "^2.15.10",
@@ -37,18 +38,17 @@
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "moment": "^2.24.0",
-    "monaco-editor": "^0.28.1",
-    "monaco-editor-webpack-plugin": "^4.2.0",
-    "monaco-vim": "^0.4.4",
     "nprogress": "^0.2.0",
+    "qrcode": "^1.5.4",
     "relation-graph": "^2.1.42",
     "snabbdom": "^3.5.1",
     "sortablejs": "1.9.0",
     "style-resources-loader": "^1.5.0",
     "viser-vue": "^2.4.8",
     "vue": "2.6.11",
-    "vue-clipboard2": "^0.3.3",
     "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-clipboard2": "^0.3.3",
+    "vue-codemirror": "^4.0.6",
     "vue-cropper": "^0.6.2",
     "vue-grid-layout": "2.3.12",
     "vue-i18n": "8.28.2",
diff --git a/cmdb-ui/src/modules/cmdb/components/QRCodeBatchExport.vue b/cmdb-ui/src/modules/cmdb/components/QRCodeBatchExport.vue
new file mode 100644
index 000000000..bf228709c
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/QRCodeBatchExport.vue
@@ -0,0 +1,232 @@
+<template>
+  <a-modal
+    v-model="visible"
+    :title="$t('cmdb.ci.qrcodeBatchTitle')"
+    width="800px"
+    :footer="null"
+    :maskClosable="true"
+  >
+    <p class="qrcode-batch-tip">{{ $t('cmdb.ci.qrcodeBatchTip') }}</p>
+
+    <div v-if="qrcodeList.length === 0 && !generating" class="qrcode-batch-empty">
+      <a-empty :description="$t('cmdb.ci.qrcodeBatchEmpty')" />
+    </div>
+
+    <div v-if="generating" class="qrcode-batch-generating">
+      <a-spin />
+      <span>正在生成 {{ generatedCount }} / {{ totalCount }} ...</span>
+    </div>
+
+    <div v-if="qrcodeList.length" class="qrcode-batch-grid" ref="qrcodeGrid">
+      <div
+        v-for="item in qrcodeList"
+        :key="item.ciId"
+        class="qrcode-batch-item"
+      >
+        <canvas :ref="'qrcode-' + item.ciId"></canvas>
+        <p class="qrcode-batch-item-label">{{ item.label }}</p>
+        <p class="qrcode-batch-item-id">CI ID: {{ item.ciId }}</p>
+      </div>
+    </div>
+
+    <div class="qrcode-batch-actions" v-if="qrcodeList.length">
+      <a-button type="primary" @click="downloadAll">
+        <a-icon type="download" /> {{ $t('cmdb.ci.qrcodeDownload') }}
+      </a-button>
+      <a-button @click="printAll">
+        <a-icon type="printer" /> {{ $t('cmdb.ci.printQRCode') }}
+      </a-button>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+
+export default {
+  name: 'QRCodeBatchExport',
+  data() {
+    return {
+      visible: false,
+      ciList: [],
+      qrcodeList: [],
+      generating: false,
+      generatedCount: 0,
+      totalCount: 0
+    }
+  },
+  methods: {
+    open(ciList) {
+      if (!ciList || !ciList.length) {
+        this.$message.warning(this.$t('cmdb.ci.qrcodeBatchEmpty'))
+        return
+      }
+      this.ciList = ciList
+      this.qrcodeList = []
+      this.visible = true
+      this.$nextTick(() => {
+        this.generateAll()
+      })
+    },
+    async generateAll() {
+      this.generating = true
+      this.generatedCount = 0
+      this.totalCount = this.ciList.length
+
+      const qrcodeList = []
+      for (const ci of this.ciList) {
+        const mobileUrl = `${window.location.origin}/cmdb/mobile/${ci.typeId}/${ci.ciId}`
+        qrcodeList.push({
+          ciId: ci.ciId,
+          typeId: ci.typeId,
+          label: ci.label || ci.name || `CI ${ci.ciId}`,
+          url: mobileUrl
+        })
+      }
+
+      this.qrcodeList = qrcodeList
+      await this.$nextTick()
+
+      for (const item of this.qrcodeList) {
+        const canvasRef = this.$refs['qrcode-' + item.ciId]
+        const canvas = Array.isArray(canvasRef) ? canvasRef[0] : canvasRef
+        if (canvas) {
+          try {
+            await QRCode.toCanvas(canvas, item.url, {
+              width: 150,
+              margin: 1,
+              color: { dark: '#000000', light: '#ffffff' }
+            })
+          } catch (e) {
+            console.error('QRCode generate failed for CI', item.ciId, e)
+          }
+        }
+        this.generatedCount++
+      }
+
+      this.generating = false
+    },
+    downloadAll() {
+      const grid = this.$refs.qrcodeGrid
+      if (!grid) return
+
+      const link = document.createElement('a')
+      link.download = 'cmdb-qrcodes-batch.png'
+
+      import('html2canvas').then(({ default: html2canvas }) => {
+        html2canvas(grid, {
+          backgroundColor: '#ffffff',
+          scale: 2
+        }).then((canvas) => {
+          link.href = canvas.toDataURL('image/png')
+          link.click()
+        })
+      }).catch(() => {
+        this.$message.warning(this.$t('cmdb.ci.copyFailed'))
+      })
+    },
+    printAll() {
+      const grid = this.$refs.qrcodeGrid
+      if (!grid) return
+
+      const printWindow = window.open('', '_blank', 'width=800,height=600')
+      if (!printWindow) {
+        this.$message.warning(this.$t('cmdb.ci.copyFailed'))
+        return
+      }
+
+      const content = grid.innerHTML
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>CMDB QR Codes</title>
+            <style>
+              body { font-family: Arial, sans-serif; padding: 20px; }
+              .qrcode-batch-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
+              .qrcode-batch-item { text-align: center; width: 170px; }
+              .qrcode-batch-item-label { font-size: 12px; margin: 4px 0 2px; word-break: break-all; }
+              .qrcode-batch-item-id { font-size: 11px; color: #999; margin: 0; }
+              @media print {
+                .qrcode-batch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+                .qrcode-batch-item { page-break-inside: avoid; }
+              }
+            </style>
+          </head>
+          <body>
+            <div class="qrcode-batch-grid">${content}</div>
+          </body>
+        </html>
+      `)
+      printWindow.document.close()
+      setTimeout(() => {
+        printWindow.print()
+        printWindow.close()
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.qrcode-batch-tip {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.qrcode-batch-empty {
+  padding: 20px 0;
+}
+
+.qrcode-batch-generating {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 0;
+  color: #999;
+}
+
+.qrcode-batch-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.qrcode-batch-item {
+  text-align: center;
+  width: 160px;
+  padding: 12px 8px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.qrcode-batch-item-label {
+  font-size: 12px;
+  color: #333;
+  margin: 6px 0 2px;
+  word-break: break-all;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qrcode-batch-item-id {
+  font-size: 11px;
+  color: #bbb;
+  margin: 0;
+}
+
+.qrcode-batch-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/components/QRCodeButton.vue b/cmdb-ui/src/modules/cmdb/components/QRCodeButton.vue
new file mode 100644
index 000000000..ae096a646
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/QRCodeButton.vue
@@ -0,0 +1,141 @@
+<template>
+  <span>
+    <a @click="showQRCode" class="qrcode-btn" :style="{ marginRight: '12px' }">
+      <a-icon type="qrcode" />
+      {{ $t('cmdb.ci.qrcode') }}
+    </a>
+
+    <a-modal
+      v-model="visible"
+      :title="$t('cmdb.ci.qrcodeTitle')"
+      :footer="null"
+      width="360px"
+      :maskClosable="true"
+      centered
+    >
+      <div class="qrcode-modal-content">
+        <p class="qrcode-modal-tip">{{ $t('cmdb.ci.qrcodeTip') }}</p>
+        <div class="qrcode-canvas-wrapper">
+          <canvas ref="qrcodeCanvas"></canvas>
+        </div>
+        <p class="qrcode-modal-url">{{ mobileUrl }}</p>
+        <a-space class="qrcode-modal-actions">
+          <a-button type="primary" size="small" @click="downloadQRCode">
+            <a-icon type="download" /> {{ $t('cmdb.ci.qrcodeDownload') }}
+          </a-button>
+          <a-button size="small" @click="copyMobileUrl">
+            <a-icon type="copy" /> {{ $t('copy') }}
+          </a-button>
+        </a-space>
+      </div>
+    </a-modal>
+  </span>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+
+export default {
+  name: 'QRCodeButton',
+  props: {
+    typeId: {
+      type: [Number, String],
+      required: true
+    },
+    ciId: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  computed: {
+    mobileUrl() {
+      const origin = window.location.origin
+      return `${origin}/cmdb/mobile/${this.typeId}/${this.ciId}`
+    }
+  },
+  methods: {
+    async showQRCode() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.generateQRCode()
+      })
+    },
+    async generateQRCode() {
+      const canvas = this.$refs.qrcodeCanvas
+      if (!canvas) return
+      try {
+        await QRCode.toCanvas(canvas, this.mobileUrl, {
+          width: 220,
+          margin: 1,
+          color: {
+            dark: '#000000',
+            light: '#ffffff'
+          }
+        })
+      } catch (e) {
+        console.error('QRCode generate failed:', e)
+      }
+    },
+    downloadQRCode() {
+      const canvas = this.$refs.qrcodeCanvas
+      if (!canvas) return
+      const link = document.createElement('a')
+      link.download = `cmdb-ci-${this.ciId}-qrcode.png`
+      link.href = canvas.toDataURL('image/png')
+      link.click()
+    },
+    copyMobileUrl() {
+      this.$copyText(this.mobileUrl)
+        .then(() => {
+          this.$message.success(this.$t('copySuccess'))
+        })
+        .catch(() => {
+          this.$message.error(this.$t('cmdb.ci.copyFailed'))
+        })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.qrcode-btn {
+  color: rgba(0, 0, 0, 0.65);
+  &:hover {
+    color: @primary-color;
+  }
+}
+
+.qrcode-modal-content {
+  text-align: center;
+}
+
+.qrcode-modal-tip {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.qrcode-canvas-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.qrcode-modal-url {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  word-break: break-all;
+  margin-bottom: 16px;
+  padding: 0 12px;
+}
+
+.qrcode-modal-actions {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue b/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue
new file mode 100644
index 000000000..af182f203
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="mobile-detail-page">
+    <div class="mobile-header">
+      <a-icon type="arrow-left" class="mobile-back-btn" @click="goBack" />
+      <span class="mobile-header-title">
+        {{ typeInfo.alias || typeInfo.name || $t('cmdb.ci.mobileDetail') }}
+      </span>
+      <span class="mobile-header-right"></span>
+    </div>
+
+    <div v-if="loading" class="mobile-loading">
+      <a-spin size="large" />
+      <p>{{ $t('loading') }}</p>
+    </div>
+
+    <div v-else-if="!hasPermission" class="mobile-empty">
+      <a-empty :image-style="{ height: '80px' }">
+        <span slot="description">{{ $t('cmdb.ci.noPermission') }}</span>
+      </a-empty>
+    </div>
+
+    <div v-else class="mobile-content">
+      <div class="mobile-card">
+        <div class="mobile-card-title">
+          <a-icon type="info-circle" />
+          {{ $t('cmdb.ci.coreInfo') }}
+          <span class="mobile-card-title-ciid">#{{ ci._id }}</span>
+        </div>
+        <div class="mobile-card-body">
+          <div
+            v-for="entry in coreAttrEntries"
+            :key="entry.name"
+            :class="['mobile-attr-row', entry._isLongValue ? 'mobile-attr-row-stacked' : '']"
+          >
+            <span class="mobile-attr-label">{{ entry.alias }}</span>
+            <span class="mobile-attr-value">{{ entry.value }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="mobile-card" v-if="parentRelations.length">
+        <div class="mobile-card-title">
+          <a-icon type="arrow-up" />
+          {{ $t('cmdb.ci.parentRelations') }}
+        </div>
+        <div class="mobile-card-body">
+          <div
+            class="mobile-relation-item"
+            v-for="(item, idx) in parentRelations"
+            :key="'p-' + idx"
+            @click="goToCI(item._type, item._id)"
+          >
+            <a-icon type="link" class="mobile-relation-icon" />
+            <div class="mobile-relation-info">
+              <span class="mobile-relation-type">{{ item._type_name || '' }}</span>
+              <span class="mobile-relation-name">{{ getCIName(item) }}</span>
+            </div>
+            <a-icon type="right" class="mobile-relation-arrow" />
+          </div>
+        </div>
+      </div>
+
+      <div class="mobile-card" v-if="childRelations.length">
+        <div class="mobile-card-title">
+          <a-icon type="arrow-down" />
+          {{ $t('cmdb.ci.childRelations') }}
+        </div>
+        <div class="mobile-card-body">
+          <div
+            class="mobile-relation-item"
+            v-for="(item, idx) in childRelations"
+            :key="'c-' + idx"
+            @click="goToCI(item._type, item._id)"
+          >
+            <a-icon type="link" class="mobile-relation-icon" />
+            <div class="mobile-relation-info">
+              <span class="mobile-relation-type">{{ item._type_name || '' }}</span>
+              <span class="mobile-relation-name">{{ getCIName(item) }}</span>
+            </div>
+            <a-icon type="right" class="mobile-relation-arrow" />
+          </div>
+        </div>
+      </div>
+
+      <div class="mobile-card" v-if="historyList.length">
+        <div class="mobile-card-title">
+          <a-icon type="clock-circle" />
+          {{ $t('cmdb.ci.recentHistory') }}
+        </div>
+        <div class="mobile-card-body">
+          <div class="mobile-history-item" v-for="(h, idx) in historyList" :key="'h-' + idx">
+            <div class="mobile-history-meta">
+              <a-tag :color="h._operateColor">{{ h._operateLabel }}</a-tag>
+              <span class="mobile-history-attr">{{ h.attr_alias || h.attr_name }}</span>
+            </div>
+            <div class="mobile-history-values" v-if="h.old || h.new">
+              <span class="mobile-history-old">{{ formatValue(h.old) || '-' }}</span>
+              <a-icon type="arrow-right" class="mobile-history-arrow-icon" />
+              <span class="mobile-history-new">{{ formatValue(h.new) || '-' }}</span>
+            </div>
+            <div class="mobile-history-time">
+              {{ h.created_at }}
+              <span class="mobile-history-user">by {{ h.username }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCIMobileDetail } from '@/modules/cmdb/api/ci'
+
+export default {
+  name: 'CIMobileDetail',
+  data() {
+    return {
+      typeId: null,
+      ciId: null,
+      ci: {},
+      typeInfo: {},
+      attrAliasMap: {},
+      parentRelations: [],
+      childRelations: [],
+      historyList: [],
+      loading: true,
+      hasPermission: true
+    }
+  },
+  computed: {
+    coreAttrEntries() {
+      const ci = this.ci || {}
+      const aliasMap = this.attrAliasMap || {}
+      const excludeKeys = new Set(['_id', '_type', 'ci_type', 'ci_type_alias', 'unique', 'unique_alias',
+        '_updated_at', '_updated_by', '__ci_type_name__'])
+      const entries = []
+
+      Object.keys(ci).forEach((key) => {
+        if (!excludeKeys.has(key) && !key.startsWith('__') && !key.startsWith('_')) {
+          const value = ci[key]
+          if (value !== null && value !== undefined && value !== '') {
+            const alias = aliasMap[key] || key
+            const strValue = this.formatValue(value)
+            entries.push({
+              name: key,
+              alias: alias,
+              value: strValue,
+              _isLongValue: strValue.length > 24
+            })
+          }
+        }
+      })
+
+      return entries
+    }
+  },
+  mounted() {
+    this.typeId = Number(this.$route.params.typeId)
+    this.ciId = Number(this.$route.params.ciId)
+    if (this.ciId) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    async fetchData() {
+      this.loading = true
+      try {
+        const res = await getCIMobileDetail(this.ciId)
+        this.ci = res.ci || {}
+        this.typeInfo = res.type || {}
+        this.attrAliasMap = res.attribute_alias_map || {}
+        this.parentRelations = (res.relations && res.relations.parents) || []
+        this.childRelations = (res.relations && res.relations.children) || []
+        this.historyList = (res.history || []).map((h) => {
+          const colors = { '0': 'green', '1': 'red', '2': 'blue' }
+          const labels = { '0': this.$t('new'), '1': this.$t('delete'), '2': this.$t('update') }
+          return {
+            ...h,
+            _operateColor: colors[h.operate_type] || 'default',
+            _operateLabel: labels[h.operate_type] || h.operate_type
+          }
+        })
+        this.hasPermission = true
+      } catch (e) {
+        if (e.response && e.response.status === 403 || e.response && e.response.status === 404) {
+          this.hasPermission = false
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+    formatValue(value) {
+      if (value === null || value === undefined) return '-'
+      if (typeof value === 'object') return JSON.stringify(value)
+      return String(value)
+    },
+    getCIName(ci) {
+      if (!ci) return ''
+      return ci.name || ci.alias || ci.hostname || ci.ip || ci._id || ''
+    },
+    goToCI(typeId, ciId) {
+      if (typeId != null && ciId != null) {
+        this.$router.push(`/cmdb/mobile/${typeId}/${ciId}`)
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mobile-detail-page {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 32px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  padding: 0 16px;
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.mobile-back-btn {
+  font-size: 18px;
+  color: #333;
+  flex-shrink: 0;
+}
+
+.mobile-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  flex: 1;
+  padding: 0 8px;
+}
+
+.mobile-header-right {
+  width: 18px;
+  flex-shrink: 0;
+}
+
+.mobile-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+  color: #999;
+}
+
+.mobile-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60vh;
+}
+
+.mobile-content {
+  padding: 12px;
+}
+
+.mobile-card {
+  background: #fff;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.mobile-card-title {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+
+  .anticon {
+    margin-right: 6px;
+    color: @primary-color;
+  }
+}
+
+.mobile-card-title-ciid {
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: 400;
+  color: #bbb;
+}
+
+.mobile-card-body {
+  padding: 0;
+}
+
+.mobile-attr-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px 16px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.mobile-attr-row-stacked {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+
+.mobile-attr-label {
+  min-width: 80px;
+  max-width: 40%;
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #999;
+  line-height: 1.5;
+
+  .mobile-attr-row-stacked & {
+    max-width: 100%;
+    margin-bottom: 2px;
+  }
+}
+
+.mobile-attr-value {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  color: #333;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+
+  .mobile-attr-row-stacked & {
+    padding-left: 0;
+  }
+}
+
+.mobile-relation-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid #f5f5f5;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:active {
+    background: #f5f5f5;
+  }
+}
+
+.mobile-relation-icon {
+  font-size: 14px;
+  color: @primary-color;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.mobile-relation-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mobile-relation-type {
+  font-size: 11px;
+  color: #999;
+  background: #f0f0f0;
+  padding: 1px 6px;
+  border-radius: 3px;
+  align-self: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-relation-name {
+  font-size: 13px;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.mobile-relation-arrow {
+  font-size: 12px;
+  color: #ccc;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+.mobile-history-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.mobile-history-meta {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.mobile-history-attr {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+}
+
+.mobile-history-values {
+  display: flex;
+  align-items: flex-start;
+  font-size: 12px;
+  margin-bottom: 4px;
+  gap: 4px;
+}
+
+.mobile-history-old {
+  color: #ff4d4f;
+  background: #fff1f0;
+  padding: 2px 8px;
+  border-radius: 3px;
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.mobile-history-arrow-icon {
+  margin-top: 3px;
+  font-size: 11px;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.mobile-history-new {
+  color: #52c41a;
+  background: #f6ffed;
+  padding: 2px 8px;
+  border-radius: 3px;
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.mobile-history-time {
+  font-size: 11px;
+  color: #bbb;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-history-user {
+  margin-left: 8px;
+}
+</style>
diff --git a/cmdb-ui/src/router/config.js b/cmdb-ui/src/router/config.js
index 0be7e6020..c8e3a0f5a 100644
--- a/cmdb-ui/src/router/config.js
+++ b/cmdb-ui/src/router/config.js
@@ -103,6 +103,13 @@ export const constantRouterMap = [
     redirect: appConfig.redirectTo,
     // redirect: () => { return store.getters.appRoutes[0] },
   },
+  {
+    path: '/cmdb/mobile/:typeId/:ciId',
+    name: 'cmdb_mobile_detail',
+    hidden: true,
+    meta: { title: 'cmdb.ci.mobileDetail' },
+    component: () => import(/* webpackChunkName: "mobile" */ '@/modules/cmdb/views/mobile/CIMobileDetail.vue')
+  },
   {
     path: '/user/login',
     name: 'login',

From 27019c6981a1406c55b288ead97b238e6a8133f9 Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 12:00:51 +0800
Subject: [PATCH 3/8] feat(ui): integrate QR code into CI detail page and batch
 export with Excel

- Add QR code button in ciDetailTab tab bar
- Add QR export option in batch download modal (batchDownload.vue)
- Export QR code images embedded in Excel cells via ExcelJS
- Add batch QR export entry in instanceList action bar and dropdown menu"
---
 cmdb-ui/src/modules/cmdb/api/ci.js            |   8 ++
 .../batchDownload/batchDownload.vue           |   5 +
 .../modules/cmdb/views/ci/instanceList.vue    | 128 +++++++++++++++++-
 .../cmdb/views/ci/modules/ciDetailTab.vue     |  15 +-
 4 files changed, 147 insertions(+), 9 deletions(-)

diff --git a/cmdb-ui/src/modules/cmdb/api/ci.js b/cmdb-ui/src/modules/cmdb/api/ci.js
index 71b07ef8f..579f1a9ff 100644
--- a/cmdb-ui/src/modules/cmdb/api/ci.js
+++ b/cmdb-ui/src/modules/cmdb/api/ci.js
@@ -52,6 +52,14 @@ export function getCIById(ciId) {
   })
 }
 
+//  获取移动端CI详情
+export function getCIMobileDetail(ciId) {
+  return axios({
+    url: urlPrefix + `/ci/${ciId}/mobile`,
+    method: 'GET'
+  })
+}
+
 //  获取自动发现占比
 export function getCIAdcStatistics() {
   return axios({
diff --git a/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue b/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue
index 16eaf3f8c..3e7200409 100644
--- a/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue
+++ b/cmdb-ui/src/modules/cmdb/components/batchDownload/batchDownload.vue
@@ -27,6 +27,11 @@
           <a-select-option v-for="item in typeList" :key="item.id" :values="item.id">{{ item.label }}</a-select-option>
         </a-select>
       </a-form-item>
+      <a-form-item :label="$t('cmdb.ci.qrcodeExport')">
+        <a-checkbox v-decorator="['exportQRCode', { valuePropName: 'checked', initialValue: false }]">
+          {{ $t('cmdb.ci.qrcodeExport') }}
+        </a-checkbox>
+      </a-form-item>
       <a-form-item :label="$t('cmdb.ciType.selectAttributes')">
         <div
           :style="{
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/instanceList.vue b/cmdb-ui/src/modules/cmdb/views/ci/instanceList.vue
index 54d3baa52..3317b3eb7 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/instanceList.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/instanceList.vue
@@ -54,6 +54,13 @@
                 <ops-icon type="ops-cmdb-citype" />
                 {{ $t('cmdb.menu.citypeManage') }}
               </a-menu-item>
+              <a-menu-item
+                key="qrcodeExportAll"
+                @click="openBatchQRCodeAll"
+              >
+                <a-icon type="qrcode" />
+                {{ $t('cmdb.ci.qrcodeExportAll') }}
+              </a-menu-item>
             </a-menu>
           </a-dropdown>
         </a-space>
@@ -76,6 +83,8 @@
           <div class="ops-list-batch-action" v-show="!!selectedRowKeys.length">
             <span @click="$refs.create.handleOpen(true, 'update')">{{ $t('update') }}</span>
             <a-divider type="vertical" />
+            <span @click="openBatchQRCode">{{ $t('cmdb.ci.qrcodeExport') }}</span>
+            <a-divider type="vertical" />
             <span @click="openBatchDownload">{{ $t('download') }}</span>
             <a-divider type="vertical" />
             <span @click="batchDelete">{{ $t('delete') }}</span>
@@ -141,6 +150,7 @@
         />
         <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
         <CiRollbackForm ref="ciRollbackForm" @batchRollbackAsync="batchRollbackAsync($event)" :ciIds="selectedRowKeys" />
+        <QRCodeBatchExport ref="qrcodeBatchExport" />
         <MetadataDrawer ref="metadataDrawer" />
         <CMDBGrant ref="cmdbGrant" resourceTypeName="CIType" app_id="cmdb" />
       </div>
@@ -151,6 +161,9 @@
 <script>
 import _ from 'lodash'
 import Sortable from 'sortablejs'
+import ExcelJS from 'exceljs'
+import FileSaver from 'file-saver'
+import QRCode from 'qrcode'
 
 import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
 import { getSubscribeAttributes, subscribeCIType, subscribeTreeView } from '@/modules/cmdb/api/preference'
@@ -166,6 +179,7 @@ import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch
 import MetadataDrawer from './modules/MetadataDrawer.vue'
 import CMDBGrant from '../../components/cmdbGrant'
 import CiRollbackForm from './modules/ciRollbackForm.vue'
+import QRCodeBatchExport from '@/modules/cmdb/components/QRCodeBatchExport.vue'
 import SearchForm from '@/modules/cmdb/components/searchForm/SearchForm.vue'
 import CreateInstanceForm from './modules/CreateInstanceForm'
 import CiDetailDrawer from './modules/ciDetailDrawer.vue'
@@ -184,6 +198,7 @@ export default {
     MetadataDrawer,
     CMDBGrant,
     CiRollbackForm,
+    QRCodeBatchExport,
     CITable
   },
   props: {
@@ -440,7 +455,23 @@ export default {
         ciTypeName: this.CIType.alias || this.CIType.name,
       })
     },
-    batchDownload({ filename, type, checkedKeys }) {
+    openBatchQRCode() {
+      const ciList = this.selectedRowKeys.map((ciId) => ({
+        ciId,
+        typeId: this.typeId,
+        label: (this.instanceList.find((i) => (i.ci_id || i._id) === ciId) || {}).name || `CI ${ciId}`
+      }))
+      this.$refs.qrcodeBatchExport.open(ciList)
+    },
+    openBatchQRCodeAll() {
+      const ciList = this.instanceList.map((ci) => ({
+        ciId: ci.ci_id || ci._id,
+        typeId: ci._type || this.typeId,
+        label: ci.name || ci.hostname || ci.ip || `CI ${ci.ci_id || ci._id}`
+      }))
+      this.$refs.qrcodeBatchExport.open(ciList)
+    },
+    batchDownload({ filename, type, checkedKeys, exportQRCode }) {
       const jsonAttrList = []
       checkedKeys.forEach((key) => {
         const _find = this.attrList.find((attr) => attr.name === key)
@@ -450,7 +481,15 @@ export default {
         ...this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords(),
         ...this.$refs.xTable.getVxetableRef().getCheckboxRecords(true),
       ])
-      this.$refs.xTable.getVxetableRef().exportData({
+
+      const tableRef = this.$refs.xTable.getVxetableRef()
+
+      if (exportQRCode) {
+        this.batchDownloadWithQRCode({ filename, checkedKeys, jsonAttrList, data, tableRef })
+        return
+      }
+
+      tableRef.exportData({
         filename,
         type,
         columnFilterMethod({ column }) {
@@ -464,8 +503,89 @@ export default {
         ],
       })
       this.selectedRowKeys = []
-      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
-      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      tableRef.clearCheckboxRow()
+      tableRef.clearCheckboxReserve()
+    },
+    async batchDownloadWithQRCode({ filename, checkedKeys, jsonAttrList, data, tableRef }) {
+      const columns = tableRef.getColumns()
+      const checkedCols = columns.filter((col) => col.property && checkedKeys.includes(col.property))
+      const checkedColProps = checkedCols.map((c) => c.property)
+
+      const wb = new ExcelJS.Workbook()
+      const ws = wb.addWorksheet(filename || 'Sheet1')
+
+      const qrColHeader = this.$t('cmdb.ci.qrcode')
+      const allHeaders = [qrColHeader, ...checkedCols.map((c) => c.title || c.property)]
+      ws.columns = allHeaders.map((h, i) => ({
+        header: h,
+        key: i === 0 ? '__qr__' : checkedColProps[i - 1],
+        width: i === 0 ? 22 : 18
+      }))
+      ws.getRow(1).height = 30
+      ws.getRow(1).eachCell((cell) => {
+        cell.font = { bold: true, size: 12 }
+        cell.alignment = { vertical: 'middle', horizontal: 'center' }
+      })
+
+      for (let rowIdx = 0; rowIdx < data.length; rowIdx++) {
+        const item = data[rowIdx]
+        const ciId = item.ci_id || item._id
+        const typeId = item._type || this.typeId
+        const mobileUrl = `${window.location.origin}/cmdb/mobile/${typeId}/${ciId}`
+
+        const rowValues = {}
+        rowValues.__qr__ = ''
+        checkedColProps.forEach((prop) => {
+          let val = item[prop]
+          if (jsonAttrList.includes(prop) && val) {
+            val = JSON.stringify(val)
+          }
+          rowValues[prop] = val
+        })
+
+        const row = ws.addRow(rowValues)
+        row.height = 110
+
+        row.eachCell((cell) => {
+          cell.alignment = { vertical: 'middle', wrapText: true }
+        })
+
+        const qrCell = row.getCell('__qr__')
+        qrCell.alignment = { vertical: 'middle', horizontal: 'center' }
+
+        try {
+          const qrDataUrl = await QRCode.toDataURL(mobileUrl, {
+            width: 120,
+            margin: 1,
+            color: { dark: '#000000', light: '#ffffff' }
+          })
+
+          const base64Data = qrDataUrl.split(',')[1]
+          const imageId = wb.addImage({
+            base64: base64Data,
+            extension: 'png'
+          })
+
+          ws.addImage(imageId, {
+            tl: { col: 0, row: row.number - 1 },
+            ext: { width: 80, height: 80 },
+            editAs: 'oneCell'
+          })
+        } catch (e) {
+          qrCell.value = 'QR ERR'
+        }
+      }
+
+      const buffer = await wb.xlsx.writeBuffer()
+      const blob = new Blob([buffer], { type: 'application/octet-stream' })
+      const fileName = `${filename}.xlsx`
+      FileSaver.saveAs(blob, fileName)
+
+      this.selectedRowKeys = []
+      tableRef.clearCheckboxRow()
+      tableRef.clearCheckboxReserve()
+
+      this.$message.success(this.$t('export') + ' ' + this.$t('success'))
     },
     batchUpdate(values) {
       const that = this
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
index 689c09daf..54c5ea832 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue
@@ -1,10 +1,13 @@
 <template>
   <div :style="{ height: '100%' }">
     <a-tabs v-if="hasPermission" class="ci-detail-tab" v-model="activeTabKey" @change="changeTab">
-      <a @click="shareCi" slot="tabBarExtraContent" :style="{ marginRight: '24px' }">
-        <a-icon type="share-alt" />
-        {{ $t('cmdb.ci.share') }}
-      </a>
+      <span slot="tabBarExtraContent" class="tab-bar-extra">
+        <QRCodeButton :typeId="typeId" :ciId="ciId" />
+        <a @click="shareCi">
+          <a-icon type="share-alt" />
+          {{ $t('cmdb.ci.share') }}
+        </a>
+      </span>
       <a-tab-pane key="tab_1">
         <span slot="tab"><a-icon type="book" />{{ $t('cmdb.ci.detail') }}</span>
 
@@ -223,6 +226,7 @@ import TriggerTable from '../../operation_history/modules/triggerTable.vue'
 import RelatedItsm from './ciDetailRelatedItsm.vue'
 import CIRollbackForm from './ciRollbackForm.vue'
 import OperateTypeTag from '../../operation_history/components/OperateTypeTag.vue'
+import QRCodeButton from '@/modules/cmdb/components/QRCodeButton.vue'
 
 export default {
   name: 'CiDetailTab',
@@ -236,7 +240,8 @@ export default {
     CIDetailTitle,
     CIDetailTableTitle,
     CIRelationTable,
-    OperateTypeTag
+    OperateTypeTag,
+    QRCodeButton
   },
   props: {
     typeId: {

From 1a1d0e6fa53fdf19759b6f11f71fc054b43b026c Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 12:04:08 +0800
Subject: [PATCH 4/8] feat(ui): optimize mobile detail page layout and add
 login page responsive

- Show attribute aliases instead of raw names in core info section
- Auto-switch to stacked layout for long attribute values
- Fix relation navigation with null-safe typeId/ciId checks
- Add mobile responsive styles (max-width: 768px) for login page"
---
 cmdb-ui/src/views/user/Login.vue | 35 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/cmdb-ui/src/views/user/Login.vue b/cmdb-ui/src/views/user/Login.vue
index 76b2f674b..9f7f4676b 100644
--- a/cmdb-ui/src/views/user/Login.vue
+++ b/cmdb-ui/src/views/user/Login.vue
@@ -254,4 +254,39 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .ops-login {
+    min-width: auto;
+    flex-direction: column;
+
+    .ops-login-left {
+      width: 100%;
+      height: 30vh;
+      min-height: 180px;
+
+      > img {
+        width: 60%;
+        max-width: 300px;
+      }
+
+      > span {
+        font-size: 18px;
+        bottom: 12%;
+      }
+    }
+
+    .ops-login-right {
+      width: 100%;
+      padding: 24px 32px;
+
+      > img {
+        width: 50%;
+        max-width: 200px;
+        margin-left: 25%;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
 </style>

From 1bb092cdf21c262f1d5eaa15ddc6f41eba377c25 Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 12:06:42 +0800
Subject: [PATCH 5/8] fix(ui): add with-credentials to model import file upload
 - a-upload component did not send session cookies during file upload - Caused
 401 Unauthorized when importing CI type templates"

---
 cmdb-ui/src/modules/cmdb/views/ci_types/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
index a310f1a35..b9fdc7f3f 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
@@ -58,6 +58,7 @@
                     name="file"
                     accept=".json"
                     :showUploadList="false"
+                    :with-credentials="true"
                     style="display: inline-block"
                     :action="ciTypesUploadUrl"
                     @change="changeUploadFile"

From 3c0a8da6a687cfb0e7d22891bdf9a827191dcd13 Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 12:08:33 +0800
Subject: [PATCH 6/8] feat(ui): add i18n translations for QR code and mobile
 features

- Add 17 Chinese and 18 English translation keys for qrcode, mobileDetail,
  coreInfo, parentRelations, childRelations, recentHistory etc.
---
 cmdb-ui/src/modules/cmdb/lang/en.js | 19 ++++++++++++++++++-
 cmdb-ui/src/modules/cmdb/lang/zh.js | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
index 4ed120d49..ac9aa986c 100644
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -949,7 +949,24 @@ if __name__ == "__main__":
         cover: 'Cover',
         detail: 'Detail',
         upstream: 'Upstream',
-        downstream: 'Downstream'
+        downstream: 'Downstream',
+        qrcode: 'QR Code',
+        qrcodeTitle: 'Device QR Code',
+        qrcodeTip: 'Scan QR code with phone to view device info',
+        qrcodeDownload: 'Download QR Code',
+        qrcodeBatch: 'Batch QR Code',
+        qrcodeBatchTitle: 'Batch Export QR Codes',
+        qrcodeBatchTip: 'Export QR codes for selected devices, convenient for printing and attaching to physical devices',
+        qrcodeBatchEmpty: 'Please select devices first',
+        qrcodeExport: 'Export QR Code',
+        qrcodeExportAll: 'Export All QR Codes',
+        mobileDetail: 'Device Detail',
+        coreInfo: 'Core Info',
+        parentRelations: 'Upstream Relations',
+        childRelations: 'Downstream Relations',
+        recentHistory: 'Recent Changes',
+        scanToView: 'Scan to View',
+        printQRCode: 'Print QR Codes'
     },
     serviceTree: {
         remove: 'Remove',
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
index f805015cd..bc8257ad3 100644
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -945,7 +945,24 @@ if __name__ == "__main__":
         cover: '覆盖',
         detail: '详情',
         upstream: '上游',
-        downstream: '下游'
+        downstream: '下游',
+        qrcode: '二维码',
+        qrcodeTitle: '设备二维码',
+        qrcodeTip: '手机扫描二维码即可查看设备信息',
+        qrcodeDownload: '下载二维码',
+        qrcodeBatch: '批量二维码',
+        qrcodeBatchTitle: '批量导出二维码',
+        qrcodeBatchTip: '将选中设备的二维码批量导出，方便打印粘贴到物理设备上',
+        qrcodeBatchEmpty: '请先选择设备',
+        qrcodeExport: '导出二维码',
+        qrcodeExportAll: '导出全部二维码',
+        mobileDetail: '设备详情',
+        coreInfo: '核心信息',
+        parentRelations: '上游关系',
+        childRelations: '下游关系',
+        recentHistory: '最近变更',
+        scanToView: '扫码查看',
+        printQRCode: '打印二维码'
     },
     serviceTree: {
         remove: '移除',

From ce9d22fba92f837b7b2583a6505a0d74b57ad748 Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 14:08:54 +0800
Subject: [PATCH 7/8] fix(ui): clean mobile detail display and fix relation
 navigation

Exclude array/object values from core attrs to hide raw JSON

Default-collapse parent/child relation cards with toggle and count badge

Prioritize IP fields then unique value as relation display name

Fix same-route navigation by watching $route.params changes

Fix label column: 100px fixed width, left-aligned, ellipsis overflow

Replace _type_name raw name with CITypeCache alias for parent/child relations

Include attribute_alias_map in mobile detail response for frontend alias display
---
 cmdb-api/api/views/cmdb/ci.py                 |   5 +-
 cmdb-ui/jsconfig.json                         |   5 +-
 .../cmdb/views/mobile/CIMobileDetail.vue      | 116 ++++++++++++++----
 3 files changed, 102 insertions(+), 24 deletions(-)

diff --git a/cmdb-api/api/views/cmdb/ci.py b/cmdb-api/api/views/cmdb/ci.py
index 566de07df..a2f1d95be 100644
--- a/cmdb-api/api/views/cmdb/ci.py
+++ b/cmdb-api/api/views/cmdb/ci.py
@@ -304,7 +304,7 @@ def get(self, ci_id):
             children = CIRelationManager.get_children(ci_id, ret_key=RetKey.NAME)
             for type_name, cis in children.items():
                 for c in cis:
-                    c["_type_name"] = type_name
+                    c["_type_name"] = CITypeCache.get(type_name).alias if type_name else type_name
                     relations["children"].append(c)
 
             parent_ids = CIRelationManager.get_parent_ids([ci_id])
@@ -313,7 +313,8 @@ def get(self, ci_id):
                     parent_ci = CIManager.get_cis_by_ids([str(p_id)], ret_key=RetKey.NAME)
                     if parent_ci:
                         for p in parent_ci:
-                            p["_type_name"] = CITypeCache.get(p_type_id).name if p_type_id else ""
+                            p_type = CITypeCache.get(p_type_id) if p_type_id else None
+                            p["_type_name"] = p_type.alias if p_type else ""
                             relations["parents"].append(p)
         except Exception:
             pass
diff --git a/cmdb-ui/jsconfig.json b/cmdb-ui/jsconfig.json
index 5c5d35da6..fa1b7e78c 100644
--- a/cmdb-ui/jsconfig.json
+++ b/cmdb-ui/jsconfig.json
@@ -7,5 +7,8 @@
     }
   },
   "exclude": ["node_modules", "dist"],
-  "include": ["src/*"]
+  "include": ["src/*"],
+  "typeAcquisition": {
+    "enable": false
+  }
 }
diff --git a/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue b/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue
index af182f203..054cfde0c 100644
--- a/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue
+++ b/cmdb-ui/src/modules/cmdb/views/mobile/CIMobileDetail.vue
@@ -35,15 +35,20 @@
             <span class="mobile-attr-label">{{ entry.alias }}</span>
             <span class="mobile-attr-value">{{ entry.value }}</span>
           </div>
+          <div v-if="coreAttrEntries.length === 0" class="mobile-attr-empty">
+            {{ $t('noData') }}
+          </div>
         </div>
       </div>
 
       <div class="mobile-card" v-if="parentRelations.length">
-        <div class="mobile-card-title">
+        <div class="mobile-card-title mobile-card-title-collapsible" @click="parentCollapsed = !parentCollapsed">
           <a-icon type="arrow-up" />
           {{ $t('cmdb.ci.parentRelations') }}
+          <span class="mobile-card-title-count">({{ parentRelations.length }})</span>
+          <a-icon :type="parentCollapsed ? 'down' : 'up'" class="mobile-card-title-arrow" />
         </div>
-        <div class="mobile-card-body">
+        <div class="mobile-card-body" v-show="!parentCollapsed">
           <div
             class="mobile-relation-item"
             v-for="(item, idx) in parentRelations"
@@ -61,11 +66,13 @@
       </div>
 
       <div class="mobile-card" v-if="childRelations.length">
-        <div class="mobile-card-title">
+        <div class="mobile-card-title mobile-card-title-collapsible" @click="childCollapsed = !childCollapsed">
           <a-icon type="arrow-down" />
           {{ $t('cmdb.ci.childRelations') }}
+          <span class="mobile-card-title-count">({{ childRelations.length }})</span>
+          <a-icon :type="childCollapsed ? 'down' : 'up'" class="mobile-card-title-arrow" />
         </div>
-        <div class="mobile-card-body">
+        <div class="mobile-card-body" v-show="!childCollapsed">
           <div
             class="mobile-relation-item"
             v-for="(item, idx) in childRelations"
@@ -124,6 +131,8 @@ export default {
       parentRelations: [],
       childRelations: [],
       historyList: [],
+      parentCollapsed: false,
+      childCollapsed: false,
       loading: true,
       hasPermission: true
     }
@@ -139,16 +148,20 @@ export default {
       Object.keys(ci).forEach((key) => {
         if (!excludeKeys.has(key) && !key.startsWith('__') && !key.startsWith('_')) {
           const value = ci[key]
-          if (value !== null && value !== undefined && value !== '') {
-            const alias = aliasMap[key] || key
-            const strValue = this.formatValue(value)
-            entries.push({
-              name: key,
-              alias: alias,
-              value: strValue,
-              _isLongValue: strValue.length > 24
-            })
+          if (value === null || value === undefined || value === '') {
+            return
           }
+          if (Array.isArray(value) || (typeof value === 'object' && !Array.isArray(value))) {
+            return
+          }
+          const alias = aliasMap[key] || key
+          const strValue = String(value)
+          entries.push({
+            name: key,
+            alias: alias,
+            value: strValue,
+            _isLongValue: strValue.length > 24
+          })
         }
       })
 
@@ -156,13 +169,25 @@ export default {
     }
   },
   mounted() {
-    this.typeId = Number(this.$route.params.typeId)
-    this.ciId = Number(this.$route.params.ciId)
-    if (this.ciId) {
-      this.fetchData()
+    this.loadFromRoute()
+  },
+  watch: {
+    '$route.params': {
+      handler() {
+        this.loadFromRoute()
+      }
     }
   },
   methods: {
+    loadFromRoute() {
+      const typeId = Number(this.$route.params.typeId)
+      const ciId = Number(this.$route.params.ciId)
+      if (ciId && (ciId !== this.ciId || typeId !== this.typeId)) {
+        this.typeId = typeId
+        this.ciId = ciId
+        this.fetchData()
+      }
+    },
     async fetchData() {
       this.loading = true
       try {
@@ -197,7 +222,18 @@ export default {
     },
     getCIName(ci) {
       if (!ci) return ''
-      return ci.name || ci.alias || ci.hostname || ci.ip || ci._id || ''
+      const ipFields = ['ip', 'manage_ip', 'wan_port_ip', 'wan_ip', 'lan_ip', 'private_ip', 'public_ip', 'ips']
+      for (const f of ipFields) {
+        const val = ci[f]
+        if (val != null && val !== '') {
+          if (Array.isArray(val)) return val[0] || ''
+          return String(val)
+        }
+      }
+      if (ci.unique && ci[ci.unique] != null && String(ci[ci.unique]).trim() !== '') {
+        return String(ci[ci.unique])
+      }
+      return ci.name || ci.alias || ci.hostname || ci.manage_ip || ci.ip || ci.netdev_name || ci._id || ''
     },
     goToCI(typeId, ciId) {
       if (typeId != null && ciId != null) {
@@ -306,6 +342,37 @@ export default {
   color: #bbb;
 }
 
+.mobile-card-title-collapsible {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+
+  &:active {
+    background: #f0f0f0;
+  }
+}
+
+.mobile-card-title-count {
+  margin-left: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #bbb;
+}
+
+.mobile-card-title-arrow {
+  margin-left: auto;
+  font-size: 12px;
+  color: #bbb;
+  transition: transform 0.2s;
+}
+
+.mobile-attr-empty {
+  padding: 24px 0;
+  text-align: center;
+  color: #bbb;
+  font-size: 13px;
+}
+
 .mobile-card-body {
   padding: 0;
 }
@@ -327,22 +394,29 @@ export default {
 }
 
 .mobile-attr-label {
-  min-width: 80px;
-  max-width: 40%;
+  width: 100px;
   flex-shrink: 0;
   font-size: 13px;
   color: #999;
+  text-align: left;
   line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   .mobile-attr-row-stacked & {
-    max-width: 100%;
+    width: 100%;
+    text-align: left;
     margin-bottom: 2px;
+    overflow: visible;
+    white-space: normal;
   }
 }
 
 .mobile-attr-value {
   flex: 1;
   min-width: 0;
+  padding-left: 12px;
   font-size: 13px;
   color: #333;
   word-break: break-word;

From 1bcdae7f5b2be734862f53ac0fc59588a816a462 Mon Sep 17 00:00:00 2001
From: wjh-home <wjh903251880@outlook.com>
Date: Tue, 26 May 2026 18:40:49 +0800
Subject: [PATCH 8/8] fix(api): truncate User-Agent to 255 chars in login audit
 log

WeChat in-app browser User-Agent exceeds 256 chars, causing MySQL

'Data too long for column browser' error on login

Truncate to [:255] before inserting into audit_login_log.browser"
---
 cmdb-api/api/lib/perm/acl/audit.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cmdb-api/api/lib/perm/acl/audit.py b/cmdb-api/api/lib/perm/acl/audit.py
index dfa44be8d..d16b95b89 100644
--- a/cmdb-api/api/lib/perm/acl/audit.py
+++ b/cmdb-api/api/lib/perm/acl/audit.py
@@ -389,7 +389,7 @@ def add_login_log(cls, username, is_ok, description, _id=None, logout_at=None, i
                        logout_at=logout_at,
                        ip=(ip or request.headers.get('X-Forwarded-For') or
                            request.headers.get('X-Real-IP') or request.remote_addr or '').split(',')[0],
-                       browser=browser or request.headers.get('User-Agent'),
+                       browser=(browser or request.headers.get('User-Agent') or '')[:255],
                        channel=request.values.get('channel', 'web'),
                        )