优化菜单结构

src/views/system/myApp/detail/components/app-about.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-descriptions title="项目介绍" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <byte-md-viewer :value="data.content" :plugins="plugins" />
+  <a-empty
+    v-if="data.content == ''"
+    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+    :image-style="{
+      height: '60px'
+    }"
+  >
+    <template #description>
+      <span class="ele-text-placeholder">请填写项目介绍</span>
+    </template>
+    <a-button type="primary" @click="openEdit">立即填写</a-button>
+  </a-empty>
+  <!-- 编辑弹窗 -->
+  <AppAboutEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import AppAboutEdit from './app-about-edit.vue';
+
+  defineProps<{
+    data: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+</script>