pqs-9100_tool_client/frontend/src/views/activate/index.vue

<template>
  <div class="activation-page">
    <a-card v-if="hiddenKeys" title="RSA密钥配置" style="margin-bottom: 20px;">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-alert
            message="注意：请妥善保管私钥，不要泄露给他人"
            type="warning"
            show-icon
            style="margin-bottom: 16px;"
          />
        </a-col>

        <a-col :span="12">
          <a-form-item label="RSA公钥">
            <a-textarea
              v-model:value="rsaKeys.publicKey"
              :rows="5"
              readonly
              placeholder="RSA公钥内容"
            />
            <a-button
              type="primary"
              ghost
              size="small"
              @click="copyToClipboard(rsaKeys.publicKey)"
              :disabled="!rsaKeys.publicKey"
              style="margin-top: 8px;"
            >
              复制公钥
            </a-button>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="RSA私钥">
            <a-textarea
              v-model:value="rsaKeys.privateKey"
              :rows="5"
              readonly
              placeholder="RSA私钥内容"
            />
            <a-button
              type="primary"
              ghost
              size="small"
              @click="copyToClipboard(rsaKeys.privateKey)"
              :disabled="!rsaKeys.privateKey"
              style="margin-top: 8px;"
            >
              复制私钥
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <a-card title="设备激活">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-divider orientation="left" orientation-margin="0px">设备申请码</a-divider>
          <a-form-item>
            <a-textarea
              v-model:value="activationForm.requestCode"
              :rows="3"
              placeholder="请输入设备申请码"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-divider orientation="left" orientation-margin="0px">设备申请码</a-divider>
          <a-form-item>
            <a-textarea
              v-model:value="activationForm.activationCode"
              :rows="3"
              placeholder="生成的激活码将显示在这里"
              readonly
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-space>
            <a-button
              type="primary"
              @click="generateActivationCode"
              :loading="generating"
              :disabled="!activationForm.requestCode.trim()"
            >
              生成激活码
            </a-button>

            <a-button
              @click="copyToClipboard(activationForm.activationCode)"
              :disabled="!activationForm.activationCode"
            >
              复制激活码
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {message} from 'ant-design-vue'
import rsa from '@/utils/rsa'
import {Activate} from "@/views/activate/index";

const rsaKeys = ref({
  publicKey: rsa.publicKey,
  privateKey: rsa.privateKey
})
const hiddenKeys = ref(false)
const activationForm = ref({
  requestCode: '',
  activationCode: ''
})

const generating = ref(false)


// 生成激活码
const generateActivationCode = () => {
  if (!activationForm.value.requestCode.trim()) {
    message.error('请输入设备申请码')
    return
  }
  generating.value = true
  let activationCodePlaintext
  try {
    const plaintext = rsa.decrypt(activationForm.value.requestCode)
    activationCodePlaintext = JSON.parse(plaintext) as Activate.ActivationCodePlaintext
  } catch (e) {
    console.error(e)
  }
  if (!activationCodePlaintext) {
    generating.value = false
    message.error('无效的设备申请码')
    return
  }
  const contrast = activationCodePlaintext.contrast
  const digital = activationCodePlaintext.digital
  const simulate = activationCodePlaintext.simulate
  if (!contrast && !digital && !simulate) {
    generating.value = false
    message.error('无效的设备申请码')
    return
  }
  if (contrast.apply === 1) {
    activationCodePlaintext.contrast.permanently = 1
  }
  if (digital.apply === 1) {
    activationCodePlaintext.digital.permanently = 1
  }
  if (simulate.apply === 1) {
    activationCodePlaintext.simulate.permanently = 1
  }
  const data = JSON.stringify(activationCodePlaintext)
  try {
    setTimeout(() => {
      activationForm.value.activationCode = rsa.encrypt(data)
      generating.value = false
    }, 1000)

  } catch (e) {
    console.error(e)
    generating.value = false
    message.error('生成激活码失败')
  }

}

// 复制到剪贴板
const copyToClipboard = (text: string) => {
  if (!text) {
    message.warning('没有内容可复制')
    return
  }

  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  })
}
</script>
<style scoped lang="less">
.activation-page {
  :deep(textarea) {
    font-family: consolas, monospace;
    resize: none;
  }
  :deep(.ant-form-item-label) {
    font-weight: bold;
  }

  :deep(.ant-card) {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>