feat: fileContent preview with highlight

initializer-ui/package.json

@@ -6,14 +6,16 @@
     "build": "vite build --mode production"
   },
   "dependencies": {
-    "ant-design-vue": "^3.1.1",
+    "vue": "^3.2.31",
     "axios": "^0.26.1",
-    "vue": "^3.2.31"
+    "ant-design-vue": "^3.1.1",
+    "highlight.js": "^11.5.1",
+    "@highlightjs/vue-plugin": "^2.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.1",
     "typescript": "^4.6.3",
     "vite": "^2.9.1",
-    "vue-tsc": "^0.33.9"
+    "vue-tsc": "^0.34.5"
   }
 }
\ No newline at end of file

initializer-ui/src/components/starter.vue

@@ -23,8 +23,13 @@
       </div>
     </a-spin>
 
-    <a-modal v-model:visible="visible" :footer="null" title="预览">
-      <a-directory-tree :tree-data="treeData"/>
+    <a-modal v-model:visible="structPreviewVisible" :footer="null" title="预览">
+      <a-directory-tree :tree-data="treeData" @select="onSelect"/>
+    </a-modal>
+
+    <a-modal v-model:visible="contentPreviewVisible" :footer="null" title="文件内容预览" width="1000px">
+      <!--suppress HtmlUnknownTag -->
+      <highlightjs :code="fileContent" autodetect/>
     </a-modal>
   </div>
 </template>
@@ -53,7 +58,9 @@ interface FileNode {
 const fileNodeList = ref<FileNode[]>([])
 const treeData = ref<TreeProps['treeData']>([])
 const id = ref(-1)
-const visible = ref(false)
+const structPreviewVisible = ref(false)
+const contentPreviewVisible = ref(false)
+const fileContent = ref<string | null>()
 const loading = computed(() => isLoading.value)
 const downloadForm = ref<FormInstance>();
 
@@ -87,7 +94,7 @@ const onGenerate = async () => {
 const onPreview = async () => {
   fileNodeList.value = await fetchFileList(id.value)
   treeData.value = createTreeData(fileNodeList.value)
-  visible.value = true
+  structPreviewVisible.value = true
 }
 
 const onDownload = async (id: number) => {
@@ -97,6 +104,12 @@ const onDownload = async (id: number) => {
   downloadGeneratedProject(data, fileName)
 }
 
+const onSelect = async (selectedKeys: string[], event: { node: FileNode }) => {
+  const {node} = event
+  fileContent.value = node.fileContent
+  contentPreviewVisible.value = true
+}
+
 const downloadGeneratedProject = (data: BlobPart, fileName: string) => {
   const blob = new Blob([data])
   const link = document.createElement('a')
@@ -125,8 +138,9 @@ const createTreeData = (fileNodeList: FileNode[]): any => {
       key: Math.random(),
       title: item.fileName,
       children: createTreeData(item.children),
-      selectable: false,
-      isLeaf: item.isFile
+      selectable: item.isFile,
+      isLeaf: item.isFile,
+      fileContent: item.fileContent
     }
   })
 }

initializer-ui/src/main.ts

@@ -3,5 +3,12 @@ import App from './App.vue'
 import Antd from 'ant-design-vue'
 import './index.css'
 import 'ant-design-vue/dist/antd.css';
+import 'highlight.js/styles/idea.css';
+import 'highlight.js/lib/common'
+import highlightVuePlugin from '@highlightjs/vue-plugin'
 
-createApp(App).use(Antd).mount('#app')
\ No newline at end of file
+const app = createApp(App)
+
+app.use(highlightVuePlugin)
+app.use(Antd)
+app.mount('#app')
\ No newline at end of file