feat 搭建架构骨架

src/views/contract/sign.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { AppButton } from '@/components'
+// 页面容器：数据只经 store，不直接 import api
+import { useContractStore } from '@/stores/modules/contract'
+import ContractSignPanel from './cpns/ContractSignPanel.vue'
+
+const route = useRoute()
+const router = useRouter()
+const contractStore = useContractStore()
+const { signExpires } = storeToRefs(contractStore)
+
+const contractId = computed(() => String(route.params.id))
+
+function load(): void {
+  void contractStore.fetchSignQr(contractId.value)
+}
+
+async function onRefresh(): Promise<void> {
+  await contractStore.fetchSignQr(contractId.value, true)
+  ElMessage.success('二维码已刷新')
+}
+
+function onBack(): void {
+  void router.push(`/contract/${contractId.value}`)
+}
+
+watch(contractId, load)
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="contract-sign">
+    <nav class="contract-sign__breadcrumb text-secondary">
+      <RouterLink to="/contract" class="link">
+        合同中心
+      </RouterLink>
+      <span> &gt; </span>
+      <RouterLink :to="`/contract/${contractId}`" class="link">
+        合同详情
+      </RouterLink>
+      <span> &gt; </span>
+      <span>签署合同</span>
+    </nav>
+
+    <ContractSignPanel
+      :expires-in="signExpires"
+      @refresh="onRefresh"
+    />
+
+    <div class="contract-sign__footer">
+      <AppButton @click="onBack">
+        返回
+      </AppButton>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.contract-sign {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+  padding-top: @spacing-lg;
+  padding-bottom: @spacing-xxl;
+
+  &__breadcrumb {
+    font-size: @font-size-base;
+  }
+
+  &__footer {
+    .flex(row, flex-start);
+  }
+}
+</style>