feat(projects): 添加富文本和markdown编辑器插件及示例页面

2025-11-04 15:53:43 +08:00 · 2021-11-08 22:44:54 +08:00
parent ed90cb8f8e
commit 60c20647a0
14 changed files with 236 additions and 60 deletions
--- a/package.json
+++ b/package.json
@@ -29,8 +29,10 @@
    "naive-ui": "^2.20.2",
    "pinia": "^2.0.2",
    "qs": "^6.10.1",
+    "vditor": "^3.8.7",
    "vue": "^3.2.20",
-    "vue-router": "^4.0.11"
+    "vue-router": "^4.0.11",
+    "wangeditor": "^4.7.9"
  },
  "devDependencies": {
    "@commitlint/cli": "^14.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,7 @@ specifiers:
  typescript: ^4.4.4
  unplugin-icons: ^0.12.18
  unplugin-vue-components: ^0.17.1
+  vditor: ^3.8.7
  vite: ~2.5.10
  vite-plugin-html: ^2.1.1
  vite-plugin-windicss: ^1.5.1
@@ -51,6 +52,7 @@ specifiers:
  vue-router: ^4.0.11
  vue-tsc: ^0.28.10
  vueuc: ^0.4.15
+  wangeditor: ^4.7.9
  windicss: ^3.2.1

 dependencies:
@@ -65,8 +67,10 @@ dependencies:
  naive-ui: registry.npmmirror.com/naive-ui/2.20.2_eslint@8.1.0+vue@3.2.20
  pinia: registry.npmmirror.com/pinia/2.0.2_typescript@4.4.4+vue@3.2.20
  qs: 6.10.1
+  vditor: registry.npmmirror.com/vditor/3.8.7
  vue: registry.npmmirror.com/vue/3.2.20
  vue-router: registry.nlark.com/vue-router/4.0.11_vue@3.2.20
+  wangeditor: registry.npmmirror.com/wangeditor/4.7.9

 devDependencies:
  '@commitlint/cli': registry.npmmirror.com/@commitlint/cli/14.1.0
@@ -343,7 +347,7 @@ packages:
  /jsonfile/4.0.0:
    resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=, tarball: jsonfile/download/jsonfile-4.0.0.tgz}
    optionalDependencies:
-      graceful-fs: registry.nlark.com/graceful-fs/4.2.8
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
    dev: true

  /lodash.map/4.6.0:
@@ -1265,7 +1269,7 @@ packages:
      normalize-path: registry.nlark.com/normalize-path/3.0.0
      readdirp: registry.nlark.com/readdirp/3.6.0
    optionalDependencies:
-      fsevents: registry.nlark.com/fsevents/2.3.2
+      fsevents: registry.npmmirror.com/fsevents/2.3.2
    dev: true

  registry.nlark.com/chroma-js/2.1.2:
@@ -1709,6 +1713,12 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  registry.nlark.com/diff-match-patch/1.0.5:
+    resolution: {integrity: sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/diff-match-patch/download/diff-match-patch-1.0.5.tgz}
+    name: diff-match-patch
+    version: 1.0.5
+    dev: false
+
  registry.nlark.com/diff-sequences/26.6.2:
    resolution: {integrity: sha1-SLqZFX3hkjQS7tQdtrbUqpynwLE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/diff-sequences/download/diff-sequences-26.6.2.tgz}
    name: diff-sequences
@@ -2312,15 +2322,6 @@ packages:
    name: fs.realpath
    version: 1.0.0

-  registry.nlark.com/fsevents/2.3.2:
-    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fsevents/download/fsevents-2.3.2.tgz}
-    name: fsevents
-    version: 2.3.2
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    requiresBuild: true
-    dev: true
-    optional: true
-
  registry.nlark.com/function-bind/1.1.1:
    resolution: {integrity: sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/function-bind/download/function-bind-1.1.1.tgz}
    name: function-bind
@@ -2965,7 +2966,7 @@ packages:
    dependencies:
      universalify: registry.nlark.com/universalify/2.0.0
    optionalDependencies:
-      graceful-fs: registry.nlark.com/graceful-fs/4.2.8
+      graceful-fs: registry.npmmirror.com/graceful-fs/4.2.8
    dev: true

  registry.nlark.com/jsonparse/1.3.1:
@@ -3784,6 +3785,12 @@ packages:
      strip-indent: registry.nlark.com/strip-indent/3.0.0
    dev: true

+  registry.nlark.com/regenerator-runtime/0.13.9:
+    resolution: {integrity: sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz}
+    name: regenerator-runtime
+    version: 0.13.9
+    dev: false
+
  registry.nlark.com/regexp.prototype.flags/1.3.1:
    resolution: {integrity: sha1-fvNSro0VnnWMDq3Kb4/LTu8HviY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/regexp.prototype.flags/download/regexp.prototype.flags-1.3.1.tgz}
    name: regexp.prototype.flags
@@ -4842,6 +4849,25 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

+  registry.npmmirror.com/@babel/runtime-corejs3/7.16.0:
+    resolution: {integrity: sha1-WKf7AOaUhQjxL1OjA5k+i24vbHA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/runtime-corejs3/download/@babel/runtime-corejs3-7.16.0.tgz}
+    name: '@babel/runtime-corejs3'
+    version: 7.16.0
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      core-js-pure: registry.npmmirror.com/core-js-pure/3.19.1
+      regenerator-runtime: registry.nlark.com/regenerator-runtime/0.13.9
+    dev: false
+
+  registry.npmmirror.com/@babel/runtime/7.16.0:
+    resolution: {integrity: sha1-4nuXfy4giLokdIv5m14d7OZOTws=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/runtime/download/@babel/runtime-7.16.0.tgz}
+    name: '@babel/runtime'
+    version: 7.16.0
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: registry.nlark.com/regenerator-runtime/0.13.9
+    dev: false
+
  registry.npmmirror.com/@better-scroll/core/2.4.2:
    resolution: {integrity: sha1-5pRwAS15kjoYA0w+STFyD7sG6uU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@better-scroll/core/download/@better-scroll/core-2.4.2.tgz}
    name: '@better-scroll/core'
@@ -5684,6 +5710,13 @@ packages:
      through2: registry.nlark.com/through2/4.0.2
    dev: true

+  registry.npmmirror.com/core-js-pure/3.19.1:
+    resolution: {integrity: sha1-7f/B/HY0AApVugXpWz8P6Vh6WqQ=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/core-js-pure/download/core-js-pure-3.19.1.tgz}
+    name: core-js-pure
+    version: 3.19.1
+    requiresBuild: true
+    dev: false
+
  registry.npmmirror.com/date-fns/2.25.0:
    resolution: {integrity: sha1-jFyPHZWL44CamgP0t0LrqJT8VoA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/date-fns/download/date-fns-2.25.0.tgz}
    name: date-fns
@@ -5882,6 +5915,16 @@ packages:
      path-exists: registry.nlark.com/path-exists/4.0.0
    dev: true

+  registry.npmmirror.com/fsevents/2.3.2:
+    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/download/fsevents-2.3.2.tgz}
+    name: fsevents
+    version: 2.3.2
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  registry.npmmirror.com/gl-matrix/3.4.3:
    resolution: {integrity: sha1-/BGR6DIACf1NIOkzlZXGBB3cIsk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/gl-matrix/download/gl-matrix-3.4.3.tgz}
    name: gl-matrix
@@ -5918,6 +5961,13 @@ packages:
      once: registry.nlark.com/once/1.4.0
      path-is-absolute: registry.nlark.com/path-is-absolute/1.0.1

+  registry.npmmirror.com/graceful-fs/4.2.8:
+    resolution: {integrity: sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz}
+    name: graceful-fs
+    version: 4.2.8
+    dev: true
+    optional: true
+
  registry.npmmirror.com/highlight.js/11.2.0:
    resolution: {integrity: sha1-p+O4wf3E8FOLk7LcLd1TpAxqsPA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/highlight.js/download/highlight.js-11.2.0.tgz}
    name: highlight.js
@@ -6295,7 +6345,7 @@ packages:
    engines: {node: '>=10.0.0'}
    hasBin: true
    optionalDependencies:
-      fsevents: registry.nlark.com/fsevents/2.3.2
+      fsevents: registry.npmmirror.com/fsevents/2.3.2
    dev: true

  registry.npmmirror.com/rxjs/6.6.7:
@@ -6533,6 +6583,14 @@ packages:
      webpack-virtual-modules: registry.nlark.com/webpack-virtual-modules/0.4.3
    dev: true

+  registry.npmmirror.com/vditor/3.8.7:
+    resolution: {integrity: sha1-7qhnZrCS2THKhJeg7zn4a4dk29U=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vditor/download/vditor-3.8.7.tgz}
+    name: vditor
+    version: 3.8.7
+    dependencies:
+      diff-match-patch: registry.nlark.com/diff-match-patch/1.0.5
+    dev: false
+
  registry.npmmirror.com/vite-plugin-html/2.1.1_vite@2.5.10:
    resolution: {integrity: sha1-AUtEEmpy1FnNRgvRVoAMIl0STL4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite-plugin-html/download/vite-plugin-html-2.1.1.tgz}
    id: registry.npmmirror.com/vite-plugin-html/2.1.1
@@ -6579,7 +6637,7 @@ packages:
      resolve: registry.nlark.com/resolve/1.20.0
      rollup: registry.npmmirror.com/rollup/2.59.0
    optionalDependencies:
-      fsevents: registry.nlark.com/fsevents/2.3.2
+      fsevents: registry.npmmirror.com/fsevents/2.3.2
    dev: true

  registry.npmmirror.com/vooks/0.2.10_vue@3.2.20:
@@ -6824,6 +6882,16 @@ packages:
      vue: registry.npmmirror.com/vue/3.2.20
    dev: true

+  registry.npmmirror.com/wangeditor/4.7.9:
+    resolution: {integrity: sha1-wJIsAzdznVCoMQ/Kwwt6bOI4tQ0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/wangeditor/download/wangeditor-4.7.9.tgz}
+    name: wangeditor
+    version: 4.7.9
+    dependencies:
+      '@babel/runtime': registry.npmmirror.com/@babel/runtime/7.16.0
+      '@babel/runtime-corejs3': registry.npmmirror.com/@babel/runtime-corejs3/7.16.0
+      tslib: registry.nlark.com/tslib/2.3.1
+    dev: false
+
  registry.npmmirror.com/windicss/3.2.1:
    resolution: {integrity: sha1-vQ97nrq7oE6o3+3LsCY8LvlZHbQ=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/windicss/download/windicss-3.2.1.tgz}
    name: windicss
--- a/src/components/custom/GithubLink/index.vue
+++ b/src/components/custom/GithubLink/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span>github地址：</span>
+    <a class="text-blue-500" :href="link" target="_blank">
+      {{ link }}
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  /** github链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>
--- a/src/components/custom/index.ts
+++ b/src/components/custom/index.ts
@@ -3,5 +3,6 @@ import IconClose from './IconClose/index.vue';
 import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
 import BetterScroll from './BetterScroll/index.vue';
+import GithubLink from './GithubLink/index.vue';

-export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll };
+export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, GithubLink };
--- a/src/enum/route.ts
+++ b/src/enum/route.ts
@@ -16,6 +16,9 @@ export enum EnumRoutePath {
  'component' = '/component',
  'component_map' = '/component/map',
  'component_video' = '/component/video',
+  'component_editor' = '/component/editor',
+  'component_editor_quill' = '/component/editor/quill',
+  'component_editor_markdown' = '/component/editor/markdown',
  'multi-menu' = '/multi-menu',
  'multi-menu_first' = '/multi-menu/first',
  'multi-menu_first_second' = '/multi-menu/first/second',
@@ -44,6 +47,9 @@ export enum EnumRouteTitle {
  'component' = '组件插件',
  'component_map' = '地图插件',
  'component_video' = '视频插件',
+  'component_editor' = '编辑器',
+  'component_editor_quill' = '富文本编辑器',
+  'component_editor_markdown' = 'markdown编辑器',
  'multi-menu' = '多级菜单',
  'multi-menu_first' = '一级菜单',
  'multi-menu_first_second' = '二级菜单',
--- a/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue
@@ -20,6 +20,7 @@
          :collapsed-icon-size="22"
          :options="menus"
          :expanded-keys="expandedKeys"
+          :indent="18"
          @update:value="handleUpdateMenu"
          @update:expanded-keys="handleUpdateExpandedKeys"
        />
--- a/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
+++ b/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
@@ -23,7 +23,7 @@
    </header>
    <div class="flex-1-hidden">
      <n-scrollbar>
-        <n-menu :value="activeKey" :options="childMenus" @update:value="handleUpdateMenu" />
+        <n-menu :value="activeKey" :options="childMenus" :indent="18" @update:value="handleUpdateMenu" />
      </n-scrollbar>
    </div>
  </div>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" placement="bottom-end" content="重新加载" @click="handleRefresh">
+  <hover-container class="w-64px h-full" placement="bottom-end" content="重新加载" @click="handleRefresh">
    <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
  </hover-container>
 </template>
--- a/src/layouts/BasicLayout/components/common/GlobalMenu.vue
+++ b/src/layouts/BasicLayout/components/common/GlobalMenu.vue
@@ -1,37 +0,0 @@
-<template>
-  <n-menu
-    :value="activeKey"
-    :collapsed="app.menu.collapsed"
-    :collapsed-width="theme.menuStyle.collapsedWidth"
-    :collapsed-icon-size="22"
-    :options="menus"
-    @update:value="handleUpdateMenu"
-  />
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { NMenu } from 'naive-ui';
-import type { MenuOption } from 'naive-ui';
-import { useThemeStore, useAppStore } from '@/store';
-import { menus } from '@/router';
-import { GlobalMenuOption } from '@/interface';
-
-const theme = useThemeStore();
-const app = useAppStore();
-const router = useRouter();
-const route = useRoute();
-
-const activeKey = computed(() => getActiveKey());
-
-function getActiveKey() {
-  return route.name as string;
-}
-
-function handleUpdateMenu(key: string, item: MenuOption) {
-  const menuItem = item as GlobalMenuOption;
-  router.push(menuItem.routePath);
-}
-</script>
-<style scoped></style>
--- a/src/layouts/BasicLayout/components/common/index.ts
+++ b/src/layouts/BasicLayout/components/common/index.ts
@@ -1,4 +1,3 @@
 import GlobalLogo from './GlobalLogo.vue';
-import GlobalMenu from './GlobalMenu.vue';

-export { GlobalLogo, GlobalMenu };
+export { GlobalLogo };
--- a/src/router/modules/component.ts
+++ b/src/router/modules/component.ts
@@ -1,12 +1,16 @@
 import type { CustomRoute } from '@/interface';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
-import { BasicLayout } from '@/layouts';
+import { BasicLayout, BasicChildLayout } from '@/layouts';
 import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
 import ComponentMap from '@/views/component/map/index.vue';
 import ComponentVideo from '@/views/component/video/index.vue';
+import EditorQuill from '@/views/component/editor/quill/index.vue';
+import EditorMarkdown from '@/views/component/editor/markdown/index.vue';

 setRouterCacheName(ComponentMap, ROUTE_NAME_MAP.get('component_map'));
 setRouterCacheName(ComponentVideo, ROUTE_NAME_MAP.get('component_video'));
+setRouterCacheName(EditorQuill, ROUTE_NAME_MAP.get('component_editor_quill'));
+setRouterCacheName(EditorMarkdown, ROUTE_NAME_MAP.get('component_editor_markdown'));

 const COMPONENT: CustomRoute = {
  name: ROUTE_NAME_MAP.get('component'),
@@ -38,6 +42,39 @@ const COMPONENT: CustomRoute = {
        title: EnumRouteTitle.component_video,
        fullPage: true
      }
+    },
+    {
+      name: ROUTE_NAME_MAP.get('component_editor'),
+      path: EnumRoutePath.component_editor,
+      component: BasicChildLayout,
+      redirect: { name: ROUTE_NAME_MAP.get('component_editor_quill') },
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.component_editor,
+        fullPage: true
+      },
+      children: [
+        {
+          name: ROUTE_NAME_MAP.get('component_editor_quill'),
+          path: EnumRoutePath.component_editor_quill,
+          component: EditorQuill,
+          meta: {
+            requiresAuth: true,
+            title: EnumRouteTitle.component_editor_quill,
+            fullPage: true
+          }
+        },
+        {
+          name: ROUTE_NAME_MAP.get('component_editor_markdown'),
+          path: EnumRoutePath.component_editor_markdown,
+          component: EditorMarkdown,
+          meta: {
+            requiresAuth: true,
+            title: EnumRouteTitle.component_editor_markdown,
+            fullPage: true
+          }
+        }
+      ]
    }
  ]
 };
--- a/src/views/component/editor/markdown/index.vue
+++ b/src/views/component/editor/markdown/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <n-card title="markdown插件" class="shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+      <template #footer>
+        <github-link link="https://github.com/Vanessa219/vditor" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import { NCard } from 'naive-ui';
+import Vditor from 'vditor';
+import 'vditor/src/assets/scss/index.scss';
+import { useThemeStore } from '@/store';
+import { GithubLink } from '@/components';
+
+const theme = useThemeStore();
+
+const vditor = ref<Vditor | null>(null);
+const domRef = ref<HTMLElement | null>(null);
+
+function renderVditor() {
+  vditor.value = new Vditor(domRef.value!, {
+    minHeight: 400,
+    theme: theme.darkMode ? 'dark' : 'classic',
+    icon: 'material',
+    cache: { enable: false }
+  });
+}
+
+watch(
+  () => theme.darkMode,
+  newValue => {
+    const themeMode = newValue ? 'dark' : 'classic';
+    vditor.value?.setTheme(themeMode);
+  }
+);
+
+onMounted(() => {
+  renderVditor();
+});
+</script>
+<style scoped></style>
--- a/src/views/component/editor/quill/index.vue
+++ b/src/views/component/editor/quill/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <n-card title="富文本插件" class="shadow-sm rounded-16px">
+      <div ref="domRef"></div>
+      <template #footer>
+        <github-link link="https://github.com/wangeditor-team/wangEditor" />
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { NCard } from 'naive-ui';
+import WangEditor from 'wangeditor';
+import { GithubLink } from '@/components';
+
+const editor = ref<WangEditor | null>(null);
+const domRef = ref<HTMLElement | null>(null);
+
+function renderWangEditor() {
+  editor.value = new WangEditor(domRef.value);
+  setEditorConfig();
+  editor.value.create();
+}
+
+function setEditorConfig() {
+  editor.value!.config.zIndex = 10;
+}
+
+onMounted(() => {
+  renderWangEditor();
+});
+</script>
+<style scoped></style>
--- a/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
+++ b/src/views/dashboard/workbench/components/WorkbenchMain/index.vue
@@ -137,9 +137,9 @@ const shortcuts: Shortcuts[] = [
  { id: 0, label: '主控台', icon: 'mdi:desktop-mac-dashboard', iconColor: '#409eff' },
  { id: 1, label: '系统管理', icon: 'ic:outline-settings', iconColor: '#7238d1' },
  { id: 2, label: '权限管理', icon: 'mdi:family-tree', iconColor: '#f56c6c' },
-  { id: 3, label: '组件', icon: 'ion:layers', iconColor: '#8aca6b' },
+  { id: 3, label: '组件', icon: 'fluent:app-store-24-filled', iconColor: '#19a2f1' },
  { id: 4, label: '表格', icon: 'mdi:table-large', iconColor: '#fab251' },
-  { id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#1890ff' }
+  { id: 5, label: '图表', icon: 'mdi:chart-areaspline', iconColor: '#8aca6b' }
 ];
 </script>
 <style scoped></style>