发布v2.12.1版本，更新内容请查看：https://github.com/bufanyun/hotgo/blob/v2.0/docs/guide-zh-CN/start-update-log.md

server/resource/generate/default/curd/web.view.vue.template

@@ -1,28 +1,33 @@
 <template>
   <div>
-    <div class="n-layout-page-header">
-      <n-card :bordered="false" title="@{.tableComment}详情"> <!-- CURD详情页--> </n-card>
-    </div>
-    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
-      <n-descriptions label-placement="left" class="py-2" column="4">
-@{.item}
-      </n-descriptions>
-    </n-card>
+    <n-spin :show="loading" description="请稍候...">
+      <n-drawer v-model:show="showModal" :width="dialogWidth">
+        <n-drawer-content>
+          <template #header> 生成演示详情 </template>
+          <template #footer>
+            <n-button @click="showModal = false"> 关闭 </n-button>
+          </template>
+          <n-descriptions label-placement="left" class="py-2" column="1">
+        @{.item}
+          </n-descriptions>
+        </n-drawer-content>
+      </n-drawer>
+    </n-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
-  import { useRouter } from 'vue-router';
+  import { computed, ref } from 'vue';
   import { useMessage } from 'naive-ui';
   import { View } from '@{.importWebApi}';
-  import { newState, options } from './model';
-  import { getOptionLabel, getOptionTag } from '@/utils/hotgo';
+  import { State, newState, options } from './model';
+  import { adaModalWidth, getOptionLabel, getOptionTag } from '@/utils/hotgo';
   import { getFileExt } from '@/utils/urlUtils';
 
   const message = useMessage();
-  const router = useRouter();
-  const id = Number(router.currentRoute.value.params.id);
+  const dialogWidth = ref('75%');
+  const loading = ref(false);
+  const showModal = ref(false);
   const formValue = ref(newState(null));
   const fileAvatarCSS = computed(() => {
     return {
@@ -36,12 +41,21 @@
     window.open(url);
   }
 
-  onMounted(async () => {
-    if (id < 1) {
-      message.error('@{.pk.Dc}不正确，请检查！');
-      return;
-    }
-    formValue.value = await View({ @{.pk.TsName}: id });
+  function openModal(state: State) {
+    adaModalWidth(dialogWidth, 580);
+    showModal.value = true;
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
   });
 </script>