From c73021debf2ff3dc6638cff9250c155fd8c683bc Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Tue, 16 Jan 2024 12:14:09 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=9F=E4=B8=80=E4=BD=BF=E7=94=A8=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E5=86=99=E5=91=BD=E5=90=8D=E5=92=8C=E4=BD=BF=E7=94=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AsideToggler/index.vue         |  2 +-
 .../{dialog-edit.vue => DialogEdit.vue}       |  0
 src/components/Dashboard/index.vue            | 10 ++++----
 ...l-card-collapse.vue => ElCardCollapse.vue} |  0
 .../index.vue => FullScreenToggler.vue}       |  2 +-
 .../{SvgIcon/index.vue => SvgIcon.vue}        |  0
 src/main.js                                   |  4 ++--
 src/views/card-collapse.vue                   |  4 ++--
 src/views/code-diff.vue                       | 23 ++++++++++++++++---
 src/views/fullscreen.vue                      |  4 ++--
 src/views/icons.vue                           | 10 +++-----
 11 files changed, 36 insertions(+), 23 deletions(-)
 rename src/components/Dashboard/{dialog-edit.vue => DialogEdit.vue} (100%)
 rename src/components/{el-card-collapse.vue => ElCardCollapse.vue} (100%)
 rename src/components/{FullScreenToggler/index.vue => FullScreenToggler.vue} (99%)
 rename src/components/{SvgIcon/index.vue => SvgIcon.vue} (100%)

diff --git a/src/components/AsideToggler/index.vue b/src/components/AsideToggler/index.vue
index 7342ff4..b1e37de 100644
--- a/src/components/AsideToggler/index.vue
+++ b/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',
diff --git a/src/components/Dashboard/dialog-edit.vue b/src/components/Dashboard/DialogEdit.vue
similarity index 100%
rename from src/components/Dashboard/dialog-edit.vue
rename to src/components/Dashboard/DialogEdit.vue
diff --git a/src/components/Dashboard/index.vue b/src/components/Dashboard/index.vue
index 778a037..196c623 100644
--- a/src/components/Dashboard/index.vue
+++ b/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'
diff --git a/src/components/el-card-collapse.vue b/src/components/ElCardCollapse.vue
similarity index 100%
rename from src/components/el-card-collapse.vue
rename to src/components/ElCardCollapse.vue
diff --git a/src/components/FullScreenToggler/index.vue b/src/components/FullScreenToggler.vue
similarity index 99%
rename from src/components/FullScreenToggler/index.vue
rename to src/components/FullScreenToggler.vue
index 68f8746..aafefe7 100644
--- a/src/components/FullScreenToggler/index.vue
+++ b/src/components/FullScreenToggler.vue
@@ -80,7 +80,7 @@ export default {
       ],
     },
     [
-      h('svg-icon', {
+      h('SvgIcon', {
         props: {
           iconClass: this.isFullscreen ? 'exit-fullscreen' : 'fullscreen',
         }
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon.vue
similarity index 100%
rename from src/components/SvgIcon/index.vue
rename to src/components/SvgIcon.vue
diff --git a/src/main.js b/src/main.js
index 7bb0c0a..da2435a 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/views/card-collapse.vue b/src/views/card-collapse.vue
index 4c334b0..0e2186d 100644
--- a/src/views/card-collapse.vue
+++ b/src/views/card-collapse.vue
@@ -1,7 +1,7 @@
 <!-- 可折叠的 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>
@@ -9,7 +9,7 @@
       <div v-for="o in 4" :key="o" class="text item">
         {{ '列表内容 ' + o }}
       </div>
-    </el-card-collapse>
+    </ElCardCollapse>
   </div>
 </template>
 
diff --git a/src/views/code-diff.vue b/src/views/code-diff.vue
index 78da1ca..6b59db7 100644
--- a/src/views/code-diff.vue
+++ b/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: '',
     }
   },
 }
diff --git a/src/views/fullscreen.vue b/src/views/fullscreen.vue
index a55e036..c96d96f 100644
--- a/src/views/fullscreen.vue
+++ b/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"
diff --git a/src/views/icons.vue b/src/views/icons.vue
index 00ddc88..e4248a3 100644
--- a/src/views/icons.vue
+++ b/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>