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

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

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

        <a-col :span="12">
          <a-form-item label="RSA私钥">
            <a-textarea
              v-model:value="rsaKeys.privateKey"
              :readonly="readonly"
              :rows="5"
              placeholder="RSA私钥内容"
              @blur="readonly = true"
              @focus="readonly = false"
            />
            <a-button
              :disabled="!rsaKeys.privateKey"
              ghost
              size="small"
              style="margin-top: 8px;"
              type="primary"
              @click="copyToClipboard(rsaKeys.privateKey)"
            >
              复制私钥
            </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 layout="inline" :label-col="labelCol">
            <a-form-item label="模拟式模块">
              <a-switch v-model:checked="activationForm.simulate.permanently"/>
            </a-form-item>
            <a-form-item label="数字式模块">
              <a-switch v-model:checked="activationForm.digital.permanently"/>
            </a-form-item>
            <a-form-item label="比对式模块">
              <a-switch v-model:checked="activationForm.contrast.permanently"/>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="24">
          <a-divider orientation="left" orientation-margin="0px">设备申请码</a-divider>
          <a-form-item>
            <a-textarea
              v-model:value="activationForm.applicationCode"
              :rows="3"
              allow-clear
              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="activationCode"
              :rows="3"
              placeholder="生成的激活码将显示在这里"
              readonly
            />
          </a-form-item>
        </a-col>

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

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

const RSA_CAN_EDIT = import.meta.env.VITE_RSA_CAN_EDIT === 'true'
const rsaKeys = ref({
  publicKey: rsa.publicKey,
  privateKey: rsa.privateKey
})
const hiddenKeys = ref(RSA_CAN_EDIT)
const readonly = ref(true)
const activationForm = ref({
  applicationCode: '',
  simulate: {permanently: false},
  digital: {permanently: false},
  contrast: {permanently: false},
})
const activationCode = ref('')
const generating = ref(false)
const labelCol = { style: { width: '120px' } }

// 生成激活码
const generateActivationCode = () => {
  if (!rsaKeys.value.publicKey || !rsaKeys.value.privateKey) {
    message.error('请先配置RSA密钥')
    return
  }
  if (!activationForm.value.applicationCode.trim()) {
    message.error('请输入设备申请码')
    return
  }
  let simulate = activationForm.value.simulate as Activate.ActivateModule
  let digital = activationForm.value.digital as Activate.ActivateModule
  let contrast = activationForm.value.contrast as Activate.ActivateModule
  if (!simulate.permanently && !digital.permanently && !contrast.permanently) {
    message.error('请至少选择一种激活模块')
    return
  }
  generating.value = true
  let applicationCodePlaintext
  try {
    const applicationCode = rsa.decrypt(activationForm.value.applicationCode)
    applicationCodePlaintext = JSON.parse(applicationCode)
  } catch (e) {
    console.error(e)
  }
  if (!applicationCodePlaintext) {
    generating.value = false
    message.error('无效的设备申请码')
    return
  }
  if (!applicationCodePlaintext.macAddress) {
    message.error('无效的设备申请码')
    return
  }
  let activationCodePlaintext: Activate.ActivationCodePlaintext = {
    macAddress:'',
    simulate: {permanently: 0},
    digital: {permanently: 0},
    contrast: {permanently: 0}
  }
  activationCodePlaintext.macAddress = applicationCodePlaintext.macAddress
  if (simulate.permanently) {
    activationCodePlaintext.simulate = {
      permanently: 1
    }
  }
  if (digital.permanently) {
    activationCodePlaintext.digital = {
      permanently: 1
    }
  }
  if (contrast.permanently) {
    activationCodePlaintext.contrast = {
      permanently: 1
    }
  }
  const data = JSON.stringify(activationCodePlaintext)
  // message.info(data)
  try {
    setTimeout(() => {
      activationCode.value = 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 lang="less" scoped>
.activation-page {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  :deep(textarea) {
    font-family: consolas, monospace;
    resize: none;
  }

  :deep(.ant-form-item-label) {
    font-weight: bold;
  }

  :deep(.ant-card-body) {
    padding: 18px;
  }

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