From e97549c5e4d825877472a6a381312edd00b5a980 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Tue, 20 Jul 2021 10:50:28 +0800
Subject: [PATCH] add component scPageHeader

---
 src/components/scPageHeader/index.vue | 49 +++++++++++++++++++++++++++
 src/main.js                           |  2 ++
 src/views/template/list/save.vue      | 32 ++++-------------
 3 files changed, 58 insertions(+), 25 deletions(-)
 create mode 100644 src/components/scPageHeader/index.vue

diff --git a/src/components/scPageHeader/index.vue b/src/components/scPageHeader/index.vue
new file mode 100644
index 00000000..4ef3e9b5
--- /dev/null
+++ b/src/components/scPageHeader/index.vue
@@ -0,0 +1,49 @@
+<!--
+ * @Descripttion: 页面头部样式组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月20日08:49:07
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-page-header">
+		<div v-if="icon" class="sc-page-header__icon">
+			<span>
+				<i :class="icon"></i>
+			</span>
+		</div>
+		<div class="sc-page-header__title">
+			<h2>{{ title }}</h2>
+			<p v-if="description || $slots.default">
+				<slot>
+				{{ description }}
+				</slot>
+			</p>
+		</div>
+		<div v-if="$slots.main" class="sc-page-header__main">
+			<slot name="main"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: { type: String, required: true, default: "" },
+			description: { type: String, default: "" },
+			icon: { type: String, default: "" },
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-page-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:20px 25px;display: flex;}
+	.sc-page-header__icon {width: 50px;}
+	.sc-page-header__icon span {display: inline-block;width: 30px;height: 30px;background: #409EFF;border-radius: 40%;display: flex;align-items: center;justify-content: center;}
+	.sc-page-header__icon span i {color: #fff;font-size: 14px;}
+	.sc-page-header__title {flex: 1;}
+	.sc-page-header__title h2 {font-size: 17px;color: #3c4a54;font-weight: bold;margin-top: 3px;}
+	.sc-page-header__title p {font-size: 13px;color: #999;margin-top: 15px;}
+</style>
diff --git a/src/main.js b/src/main.js
index c3ea1f0e..c0fc1c6b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import scUpload from './components/scUpload'
 import scUploadMultiple from './components/scUpload/multiple'
 import scFormTable from './components/scFormTable'
 import scTableSelect from './components/scTableSelect'
+import scPageHeader from './components/scPageHeader'
 import auth from './directives/auth'
 
 const app = createApp(App);
@@ -40,6 +41,7 @@ app.component('scUpload', scUpload);
 app.component('scUploadMultiple', scUploadMultiple);
 app.component('scFormTable', scFormTable);
 app.component('scTableSelect', scTableSelect);
+app.component('scPageHeader', scPageHeader);
 
 //注册全局指令
 app.directive('auth', auth)
diff --git a/src/views/template/list/save.vue b/src/views/template/list/save.vue
index e929858f..c53fdfab 100644
--- a/src/views/template/list/save.vue
+++ b/src/views/template/list/save.vue
@@ -1,24 +1,16 @@
 <!--
- * @Descripttion: 文件描述
+ * @Descripttion: 多路由复用一个路由组件DEMO文件
  * @version: 1.0
- * @Author: 编写作者
- * @Date: 创建时间
- * @LastEditors: 最后更新作者
- * @LastEditTime: 最后更新时间
+ * @Author: sakuya
+ * @Date: 2021年7月20日09:28:19
+ * @LastEditors:
+ * @LastEditTime:
 -->
 
 <template>
-	<div class="sc-page-header">
-		<div class="sc-page-header__icon">
-			<span><i class="el-icon-burger"></i></span>
-		</div>
-		<div class="sc-page-header__title">
-			<h2 v-if="id">编辑页面 ID:{{id}}</h2>
-			<h2 v-else>新增页面</h2>
-			<p>可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适</p>
-		</div>
-	</div>
+	<sc-page-header title="页面标题" description="可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适" icon="el-icon-burger"></sc-page-header>
 	<el-main>
+		<el-alert title="因为keep-alive只接受组件name,导致多路由共用组件时,关闭或刷新一个标签导致其他同一组件的页面缓存失效,后续还在寻找完美的解决方案." type="error" style="margin-bottom: 15px;"></el-alert>
 		<el-card shadow="never">
 			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
 				<el-form-item label="名称" prop="name">
@@ -83,13 +75,3 @@
 		}
 	}
 </script>
-
-<style>
-	.sc-page-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:20px 25px;display: flex;}
-	.sc-page-header__icon {width: 50px;}
-	.sc-page-header__icon span {display: inline-block;width: 30px;height: 30px;background: #409EFF;border-radius: 40%;display: flex;align-items: center;justify-content: center;}
-	.sc-page-header__icon span i {color: #fff;font-size: 14px;}
-	.sc-page-header__title {flex: 1;}
-	.sc-page-header__title h2 {font-size: 17px;color: #3c4a54;font-weight: bold;margin-top: 3px;}
-	.sc-page-header__title p {font-size: 13px;color: #999;margin-top: 15px;}
-</style>