fix: 替换NCode组件为自定义HbAdminCode组件

pumelotea · Dec 28, 2022 · fe7066f · fe7066f · vercel · Dec 28, 2022
1 parent 2004990
commit fe7066f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 43 deletions.
diff --git a/src/components/dev/HbAdminDevTool.vue b/src/components/dev/HbAdminDevTool.vue
@@ -1,14 +1,12 @@
 <script setup>
-import { NCard, NSpace, NButton, NTag, NCode, NTable, useMessage, NAlert } from 'naive-ui'
+import { NCard, NSpace, NButton, NTag, NTable, useMessage, NAlert } from 'naive-ui'
+import HbAdminCode from '@/components/HbAdminCode.vue'
 import framework from '@/global/framework'
 import security from '@/global/security'
-import hljs from 'highlight.js/lib/core'
-import javascript from 'highlight.js/lib/languages/javascript'
 import { onMounted, ref, watch } from 'vue'
 import { removeComponentCache, getCached } from '@/global/router'
 
 const cached = getCached()
-hljs.registerLanguage('javascript', javascript)
 const clientId = ref(framework.getTracker().clientId)
 const message = useMessage()
 
@@ -133,26 +131,16 @@ watch(showPanel, () => {
             <n-alert type="info">
               ClientId
             </n-alert>
-            <n-code
-              :code="clientId"
-              :hljs="hljs"
-            />
+            <hb-admin-code  :code="clientId"/>
             <n-alert type="info">
               Token
             </n-alert>
-            <n-code
-              :code="token"
-              :hljs="hljs"
-            />
+            <hb-admin-code  :code="token"/>
             <n-alert type="info">
               User Data
             </n-alert>
             <div style="width: 100%;overflow: auto">
-              <n-code
-                :code="user"
-                :hljs="hljs"
-                language="JavaScript"
-              />
+              <hb-admin-code  :code="user"/>
             </div>
           </n-space>
           <n-alert type="info">

diff --git a/src/views/image-factory-demo/index.vue b/src/views/image-factory-demo/index.vue
@@ -1,13 +1,9 @@
 <script setup>
-import { NLayout, NLayoutContent, NAlert, NSpace, NCard, NCode, NCollapse, NCollapseItem } from 'naive-ui'
+import { NLayout, NLayoutContent, NAlert, NSpace, NCard, NCollapse, NCollapseItem } from 'naive-ui'
 import HbAdminPageLayout from '@/components/HbAdminPageLayout.vue'
+import HbAdminCode from '@/components/HbAdminCode.vue'
 import DemoCropper from './cropper.demo.vue'
 import DemoWatermark from './watermark.demo.vue'
-import hljs from 'highlight.js/lib/core'
-import xml from 'highlight.js/lib/languages/xml'
-import javascript from 'highlight.js/lib/languages/javascript'
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('xml', xml)
 const code1 = '1.首先引入 \nimport { watermark } from \'@/utils/imageFactory\' \n2.然后调用 \n/**\n' +
     ' * 图片添加水印\n' +
     ' *  callback  //回调方法，返回base64的图片【{success: true, data: "base64数据"}】\n' +
@@ -68,44 +64,28 @@ const code4 = '1.首先引入 \nimport { quality } from \'@/utils/imageFactory\'
           <n-card>
             <n-collapse>
               <n-collapse-item title="水印添加">
-                <n-code
-                  :code="code1"
-                  language="javascript"
-                  :hljs="hljs"
-                />
+                <hb-admin-code :code="code1"/>
               </n-collapse-item>
             </n-collapse>
           </n-card>
           <n-card>
             <n-collapse>
               <n-collapse-item title="图片裁剪">
-                <n-code
-                  :code="code2"
-                  language="javascript"
-                  :hljs="hljs"
-                />
+                <hb-admin-code :code="code2"/>
               </n-collapse-item>
             </n-collapse>
           </n-card>
           <n-card>
             <n-collapse>
               <n-collapse-item title="调整图片尺寸">
-                <n-code
-                  :code="code3"
-                  language="javascript"
-                  :hljs="hljs"
-                />
+                <hb-admin-code :code="code3"/>
               </n-collapse-item>
             </n-collapse>
           </n-card>
           <n-card>
             <n-collapse>
               <n-collapse-item title="调整图片质量">
-                <n-code
-                  :code="code4"
-                  language="javascript"
-                  :hljs="hljs"
-                />
+                <hb-admin-code :code="code4"/>
               </n-collapse-item>
             </n-collapse>
           </n-card>