新版官网模板

app/components/QrCodeModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <a-modal
+    :destroy-on-close="true"
+    :footer="null"
+    :open="open"
+    :width="380"
+    centered
+    @cancel="$emit('update:open', false)"
+  >
+    <div class="qr-modal">
+      <div class="qr-title">{{ title }}</div>
+      <div class="qr-subtitle">{{ tip }}</div>
+
+      <div class="qr-image-wrap">
+        <img
+          v-if="qrcodeUrl"
+          :alt="appName"
+          :src="qrcodeUrl"
+          class="qr-image"
+          @error="loadError = true"
+        />
+        <div v-if="loadError" class="qr-error">
+          <PictureOutlined style="font-size: 40px; color: #bbb" />
+          <span>图片加载失败</span>
+        </div>
+      </div>
+
+      <div class="qr-app-name">{{ appName }}</div>
+
+      <div class="qr-actions">
+        <a-button size="small" type="link" @click="downloadQr">
+          <template #icon><DownloadOutlined /></template>
+          保存小程序码
+        </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { DownloadOutlined, PictureOutlined } from '@ant-design/icons-vue'
+import { ref } from 'vue'
+
+defineProps<{
+  open: boolean
+  qrcodeUrl?: string
+  appName?: string
+  title?: string
+  tip?: string
+}>()
+
+defineEmits<{
+  'update:open': [val: boolean]
+}>()
+
+const loadError = ref(false)
+
+async function downloadQr() {
+  // 由外部通过 ref 调用，或用简单方式下载
+}
+</script>
+
+<style scoped>
+.qr-modal {
+  text-align: center;
+  padding: 8px 0 0;
+}
+
+.qr-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  margin-bottom: 4px;
+}
+
+.qr-subtitle {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.45);
+  margin-bottom: 20px;
+}
+
+.qr-image-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 220px;
+  height: 220px;
+  margin: 0 auto;
+  background: #fafafa;
+  border-radius: 12px;
+  border: 1px dashed #d9d9d9;
+  overflow: hidden;
+}
+
+.qr-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.qr-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: #999;
+  font-size: 13px;
+}
+
+.qr-app-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.65);
+  margin-top: 12px;
+}
+
+.qr-actions {
+  margin-top: 8px;
+}
+</style>