Merge pull request #9 from dyggod/PR-code-highlight

feat：添加代码块组件

package.json

@@ -22,9 +22,11 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.11",
+    "prismjs": "^1.28.0",
     "vite": "^2.8.0",
     "vue": "^3.2.25",
     "vue-i18n": "^9.1.10",
+    "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.0.13"
   },
   "devDependencies": {
@@ -33,6 +35,7 @@
     "@types/mockjs": "^1.0.6",
     "@types/node": "^17.0.21",
     "@types/nprogress": "^0.2.0",
+    "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
     "@vue/compiler-sfc": "^3.2.31",

src/components/prism/index.ts

@@ -0,0 +1,3 @@
+import PrismCode from './index.vue';
+
+export default PrismCode;

src/components/prism/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="prism-container">
+    <PrismEditor
+      v-model="editorCode"
+      class="my-editor mb-4"
+      :highlight="highlighter"
+      line-numbers
+      :readonly="readonly"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
+import prism from 'prismjs';
+import 'prismjs/components/prism-less';
+import 'prismjs/themes/prism-tomorrow.css';
+import { ref } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  readonly: {
+    type: Boolean,
+    default: true,
+  },
+  language: {
+    type: String,
+    default: 'js',
+  },
+  theme: {
+    type: String,
+    default: 'tomorrow',
+  },
+  height: {
+    type: Number,
+    default: 400,
+  },
+  width: {
+    type: [Number, String],
+    default: '100%',
+  },
+  options: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const editorCode = ref(props.value);
+const highlighter = (code: string) => prism.highlight(
+  code,
+  prism.languages[props.language],
+  props.language,
+);
+</script>
+
+<style lang="less" scoped>
+.prism-container {
+  background: #2d2d2d;
+  min-height: 200px;
+  max-height: 600px;
+  border-radius: 5px;
+  overflow-y: scroll;
+
+  .my-editor {
+    color: #ccc;
+
+    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 5px;
+  }
+
+  /deep/.prism-editor__textarea {
+    outline: none !important;
+  }
+
+  .mb-4 {
+    margin-bottom: 1rem;
+  }
+}
+</style>

src/layout/Layout.vue

@@ -10,7 +10,7 @@
         <Main />
       </a-layout-content>
       <a-layout-footer style="text-align: center">
-        PackBox ©2022 Created by dyggod
+        {{ $t('app.footer.copyright') }}
       </a-layout-footer>
     </a-layout>
   </a-layout>

src/layout/menu/index.vue

@@ -46,7 +46,7 @@
             :key="`item_${index}_${ind}`"
             @click="navTo(item.path)"
           >
-            <span :class="item.meta.icon ? '' : 'p-l'">{{ item.meta.title }}</span>
+            <span :class="item.meta.icon ? '' : 'p-l'">{{ it.meta.title }}</span>
           </a-menu-item>
           <a-sub-menu
             v-else

src/locales/lang/en-US.ts

@@ -1,4 +1,5 @@
 export default {
+  'app.footer.copyright': 'Copyright ©2022 dyggod',
   'app.login.welcome': 'Welcome to PackBox',
   'app.login.submit': 'Login',
   'app.logout.submit': 'Logout',

src/locales/lang/zh-CH.ts

@@ -1,4 +1,5 @@
 export default {
+  'app.footer.copyright': '版权所有 ©2022 dyggod',
   'app.login.welcome': 'Welcome to PackBox',
   'app.login.submit': '登录',
   'app.logout.submit': '退出登录',

src/pages/cssDemo/index.vue

@@ -6,13 +6,20 @@
       <div>
         <ShadowBoxVue />
       </div>
+      <div>
+        <PrismCode
+          :value="'.mb-4 { margin-bottom: 1rem;}'"
+          language="less"
+        />
+      </div>
     </div>
   </Container>
 </template>
 
 <script lang='ts' setup>
 import ShadowBoxVue from '@/components/ShadowBox.vue';
 import Container from '@/components/container/index.vue';
+import PrismCode from '@/components/prism';
 
 </script>
 <style lang='less' scoped>

src/plugins/index.ts

@@ -12,6 +12,8 @@ Object.keys(modules).forEach((key) => {
 
 export default function setupPlugins(app: App) {
   plugins.forEach((plugin) => {
-    app.use(plugin);
+    if (plugin.install instanceof Function) {
+      app.use(plugin);
+    }
   });
 }

src/router/routes/modules/css.ts

@@ -8,18 +8,20 @@ const CssDemo: AppRouteRecordRaw = {
   name: `${routeName}`,
   component: Layout,
   redirect: `/${routeName}/index`,
+  meta: {
+    title: 'CSS效果',
+    icon: 'PieChartOutlined',
+  },
   children: [
     {
       path: `/${routeName}/index`,
       name: `${routeName}-index`,
       component: () => import('@/pages/cssDemo/index.vue'),
-      meta: {},
+      meta: {
+        title: '对角线',
+      },
     },
   ],
-  meta: {
-    title: 'Css pages',
-    icon: 'PieChartOutlined',
-  },
 };
 
 export default CssDemo;

src/router/routes/modules/test.ts

@@ -21,7 +21,6 @@ const Test: AppRouteRecordRaw = {
       redirect: `/${routeName}/index/sub`,
       meta: {
         title: 'Test sub',
-        icon: 'PieChartOutlined',
       },
       children: [
         {