perf: 预览

src/views/editor/components/base.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { IEditorConfig } from "@wangeditor/editor";
+import { Editor } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, shallowRef } from "vue";
+defineOptions({
+  name: "BaseEditor"
+});
+
+const content = defineModel<string>("content");
+console.log("content", content);
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml =
+  '<pre><code class="language-java">' + content.value + "</code></pre>";
+const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

src/views/editor/components/index.ts

@@ -0,0 +1,5 @@
+import base from "./base.vue";
+
+const Base = base;
+
+export { Base };

src/views/editor/index.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Base } from "./components";
+
+defineOptions({
+  name: "Editor"
+});
+
+const activeNames = ref("1");
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          编辑器组件，采用开源的
+          <el-link
+            href="https://www.wangeditor.com"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Wangeditor
+          </el-link>
+        </span>
+      </div>
+    </template>
+    <el-collapse v-model="activeNames" accordion>
+      <el-collapse-item title="基础用法" name="1">
+        <Base v-if="activeNames === '1'" />
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>

src/views/monitor/generator/hook.tsx

@@ -3,6 +3,14 @@ import { message } from "@/utils/message";
 import { CRUD } from "@/api/utils";
 import { reactive, ref, onMounted, toRaw } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
+import { isString, isEmpty } from "@pureadmin/utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import {
+  useRouter,
+  useRoute,
+  type LocationQueryRaw,
+  type RouteParamsRaw
+} from "vue-router";
 
 export function useRole() {
   const form = reactive({
@@ -107,3 +115,64 @@ export function useRole() {
     handleSelectionChange
   };
 }
+
+export function useDetail() {
+  const route = useRoute();
+  const router = useRouter();
+  const getParameter = isEmpty(route.params) ? route.query : route.params;
+
+  function toDetail(
+    parameter: LocationQueryRaw | RouteParamsRaw,
+    model: "query" | "params"
+  ) {
+    // ⚠️ 这里要特别注意下，因为vue-router在解析路由参数的时候会自动转化成字符串类型，比如在使用useRoute().route.query或useRoute().route.params时，得到的参数都是字符串类型
+    // 所以在传参的时候，如果参数是数字类型，就需要在此处 toString() 一下，保证传参跟路由参数类型一致都是字符串，这是必不可少的环节！！！
+    Object.keys(parameter).forEach(param => {
+      if (!isString(parameter[param])) {
+        parameter[param] = parameter[param].toString();
+      }
+    });
+    if (model === "query") {
+      // 保存信息到标签页
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/monitor/generator/query-detail`,
+        name: "TabQueryDetail",
+        query: parameter,
+        meta: {
+          title: {
+            zh: `${parameter.id} - 预览`,
+            en: `No.${parameter.id} - DetailInfo`
+          },
+          // 如果使用的是非国际化精简版title可以像下面这么写
+          // title: `No.${index} - 详情信息`,
+          // 最大打开标签数
+          dynamicLevel: 3
+        }
+      });
+      // 路由跳转
+      router.push({ name: "TabQueryDetail", query: parameter });
+    } else if (model === "params") {
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/monitor/generator/params-detail/:id`,
+        name: "TabParamsDetail",
+        params: parameter,
+        meta: {
+          title: {
+            zh: `No.${parameter.id} - 详情信息`,
+            en: `No.${parameter.id} - DetailInfo`
+          }
+          // 如果使用的是非国际化精简版title可以像下面这么写
+          // title: `No.${index} - 详情信息`,
+        }
+      });
+      router.push({ name: "TabParamsDetail", params: parameter });
+    }
+  }
+
+  // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页
+  const initToDetail = (model: "query" | "params") => {
+    if (getParameter) toDetail(getParameter, model);
+  };
+
+  return { toDetail, initToDetail, getParameter, router };
+}

src/views/monitor/generator/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRole } from "./hook";
+import { useRole, useDetail } from "./hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
@@ -11,6 +11,7 @@ defineOptions({
   name: "OnlineUser"
 });
 
+const { toDetail } = useDetail();
 const formRef = ref();
 const {
   form,
@@ -85,22 +86,16 @@ const {
           @page-current-change="handleCurrentChange"
         >
           <template #operation="{ row }">
-            <el-popconfirm
-              :title="`是否强制下线${row.username}`"
-              @confirm="handleOffline(row)"
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(Plane)"
+              @click="toDetail({ id: row.tableName }, 'query')"
             >
-              <template #reference>
-                <el-button
-                  class="reset-margin"
-                  link
-                  type="primary"
-                  :size="size"
-                  :icon="useRenderIcon(Plane)"
-                >
-                  强退
-                </el-button>
-              </template>
-            </el-popconfirm>
+              预览
+            </el-button>
           </template>
         </pure-table>
       </template>

src/views/monitor/generator/preview.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineOptions({
+  name: "Editor"
+});
+</script>
+
+<template>
+  <el-card shadow="never" />
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>

src/views/monitor/generator/query-detail.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useDetail } from "./hook";
+import { onMounted, ref } from "vue";
+import { get } from "@/api/generator/generator";
+import { Base } from "@/views/editor/components";
+
+defineOptions({
+  name: "TabQueryDetail"
+});
+
+const { initToDetail, getParameter } = useDetail();
+initToDetail("query");
+const datas = ref([]);
+onMounted(() => {
+  get(getParameter.id, 1).then(data => {
+    console.log("data", data);
+    datas.value = data.data;
+  });
+});
+</script>
+
+<template>
+  <div>
+    <span v-for="(item, index) in datas" :key="index">
+      {{ item.name }} &nbsp;
+    </span>
+
+    <Base v-model:content="datas[0].content" />
+  </div>
+</template>