Feat: 自定义组件统一使用大小写命名和使用组件

src/components/AsideToggler/index.vue

@@ -16,7 +16,7 @@
 <script>
 /**
  * 侧栏折叠按钮，用法参考功能用例、产品版本管理等页面
- * @example <aside-toggler :is-collapse="isCollapse" />
+ * @example <AsideToggler :is-collapse="isCollapse" />
  */
 export default {
   name: 'AsideToggler',

src/components/Dashboard/index.vue

@@ -123,7 +123,7 @@
           刷新
         </el-button>
         <el-divider direction="vertical" />
-        <full-screen-toggler target=".page-container" />
+        <FullScreenToggler target=".page-container" />
       </div>
     </header>
     <el-container
@@ -193,7 +193,7 @@
                   :class="component.widget.icon || 'el-icon-postcard'"
                   class="widget-icon"
                 />
-                <svg-icon v-else :icon-class="component.widget.icon" class="widget-icon" />
+                <SvgIcon v-else :icon-class="component.widget.icon" class="widget-icon" />
                 <span class="widget-name">{{ component.widget.name }}</span>
               </span>
               <el-button icon="el-icon-plus" circle size="mini" @click="addItem(component.name, component.widget)" />
@@ -291,15 +291,15 @@
         </el-empty>
       </el-main>
     </el-container>
-    <dialog-edit ref="dialogEdit" @refresh="getDashboard" />
+    <DialogEdit ref="dialogEdit" @refresh="getDashboard" />
   </div>
 </template>
 
 <script>
 import { GridLayout, GridItem } from 'vue-grid-layout'
-import DialogEdit from './dialog-edit'
+import DialogEdit from './DialogEdit.vue'
 import AsideToggler from '@/components/AsideToggler'
-import FullScreenToggler from '@/components/FullScreenToggler'
+import FullScreenToggler from '@/components/FullScreenToggler.vue'
 // 本项目纯前端未配置 API，API 设计参考 src/api/dashboard.js
 // import dashboardAPI from '@/api/dashboard'
 import Vue from 'vue'

src/components/FullScreenToggler/index.vue → src/components/FullScreenToggler.vue

@@ -80,7 +80,7 @@ export default {
       ],
     },
     [
-      h('svg-icon', {
+      h('SvgIcon', {
         props: {
           iconClass: this.isFullscreen ? 'exit-fullscreen' : 'fullscreen',
         }

src/main.js

@@ -4,10 +4,10 @@ import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/styles/index.scss'
 import App from './App.vue'
 import router from '@/router'
-import SvgIcon from '@/components/SvgIcon'
+import SvgIcon from '@/components/SvgIcon.vue'
 import elTableSticky from '@cell-x/el-table-sticky'
 import vueMinderEditor from 'vue-minder-editor-extended'
-import ElCardCollapse from '@/components/el-card-collapse.vue'
+import ElCardCollapse from '@/components/ElCardCollapse.vue'
 
 // register svg component globally
 Vue.component('SvgIcon', SvgIcon)

src/views/card-collapse.vue

@@ -1,15 +1,15 @@
 <!-- 可折叠的 el-card -->
 <template>
   <div>
-    <el-card-collapse class="box-card" :is-collapse="isCollapse">
+    <ElCardCollapse class="box-card" :is-collapse="isCollapse">
       <div slot="header" class="flex-between">
         <span>卡片名称</span>
         <el-button style="padding: 3px 0; margin-right: 10px;" type="text">操作按钮</el-button>
       </div>
       <div v-for="o in 4" :key="o" class="text item">
         {{ '列表内容 ' + o }}
       </div>
-    </el-card-collapse>
+    </ElCardCollapse>
   </div>
 </template>
 

src/views/code-diff.vue

@@ -16,24 +16,41 @@
     <code-diff
       :old-string="oldString"
       :new-string="newString"
+      :ignore-matching-lines="ignoreMatchingLines"
       language="json"
       output-format="side-by-side"
-    />
+    >
+      <template #stat="{ stat }">
+        <span class="diff-stat-added">+{{ stat.additionsNum }} 增</span>
+        <span class="diff-stat-deleted">-{{ stat.deletionsNum }} 减</span>
+        <span
+          v-if="stat.ignoreAdditionsNum + stat.ignoreDeletionsNum > 0"
+          class="diff-stat-ignored"
+        >±{{ stat.ignoreAdditionsNum + stat.ignoreDeletionsNum }} 忽略</span>
+        <IgnoreMatchingPopover
+          :ignore-enabled="true"
+          @change="setIgnoreMatchingLines('collection', $event)"
+        />
+      </template>
+    </code-diff>
   </div>
 </template>
 
 <script>
 import { CodeDiff } from 'v-code-diff'
+import IgnoreMatchingPopover from '@/components/IgnoreMatchingPopover.vue'
 
 export default {
   name: 'CodeDiffView',
   components: {
     CodeDiff,
+    IgnoreMatchingPopover,
   },
   data() {
     return {
-      oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  }\n  "time": "2024-01-12 17:27:03"\n}',
-      newString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n    "from": "网易云热评"\n  }\n  "time": "2024-01-12 17:27:06"\n}',
+      oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  },\n  "time": "2024-01-12 17:27:03"\n}',
+      newString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n    "from": "网易云热评"\n  },\n  "time": "2024-01-12 17:27:06"\n}',
+      ignoreMatchingLines: '',
     }
   },
 }

src/views/fullscreen.vue

@@ -3,7 +3,7 @@
   <div>
     <div class="page-header">
       <b>FullScreenToggler 组件切换全屏 👉 </b>
-      <full-screen-toggler target=".page-container" />
+      <FullScreenToggler target=".page-container" />
     </div>
     <div>
       <div class="fullscreen-toolbar">
@@ -12,7 +12,7 @@
         <el-switch v-model="teleport" active-text="teleport" :disabled="bodyAgent" />
       </div>
       <div class="fullscreen-wrapper">
-        <full-screen-toggler
+        <FullScreenToggler
           target=".fullscreen-wrapper"
           fullscreen-class="is-fullscreen-wrapper"
           :body-agent="bodyAgent"

src/views/icons.vue

@@ -1,9 +1,9 @@
 <!-- icon 使用范例 -->
 <template>
   <div>
-    <h2>svg-icon</h2>
-    <svg-icon icon-class="fullscreen" class="custom-class" />
-    <svg-icon icon-class="exit-fullscreen" class="custom-class" />
+    <h2>Svg Icon</h2>
+    <SvgIcon icon-class="fullscreen" class="custom-class" />
+    <SvgIcon icon-class="exit-fullscreen" class="custom-class" />
   </div>
 </template>
 
@@ -12,7 +12,3 @@ export default {
   name: 'IconsView',
 }
 </script>
-
-<style>
-
-</style>