update 重构 将scss文件拆解 按具体功能细分文件 便于后续维护

This commit is contained in:
疯狂的狮子Li
2026-03-25 12:06:46 +08:00
parent 1fb116f059
commit 9f577be6ff
52 changed files with 2830 additions and 2987 deletions
+20 -20
View File
@@ -1,26 +1,26 @@
<template>
<div class="p-2 page-shell demo-demo-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
<div><h3>筛选条件</h3></div>
</div>
</template>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
<el-form-item label="key键" prop="testKey">
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="值" prop="value">
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
<div><h3>筛选条件</h3></div>
</div>
</template>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
<el-form-item label="key键" prop="testKey">
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="值" prop="value">
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<el-card shadow="hover" class="table-panel">
<template #header>
+17 -17
View File
@@ -1,23 +1,23 @@
<template>
<div class="p-2 page-shell demo-tree-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
<div><h3>筛选条件</h3></div>
</div>
</template>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
<el-form-item label="树节点名" prop="treeName">
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
<div><h3>筛选条件</h3></div>
</div>
</template>
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
<el-form-item label="树节点名" prop="treeName">
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<el-card shadow="hover" class="table-panel">
<template #header>
+2 -18
View File
@@ -215,23 +215,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+2 -12
View File
@@ -135,17 +135,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@include pageShell.table-crud-page;
</style>
+2 -18
View File
@@ -269,23 +269,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+2 -18
View File
@@ -265,23 +265,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+2 -18
View File
@@ -330,23 +330,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+3 -17
View File
@@ -562,10 +562,9 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
@include pageShell.table-crud-page;
.data-table {
.menu-name-cell {
@@ -578,19 +577,6 @@ onMounted(() => {
.menu-name-text {
min-width: 0;
}
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
</style>
+2 -18
View File
@@ -253,23 +253,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+2 -18
View File
@@ -349,23 +349,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+2 -18
View File
@@ -336,23 +336,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+2 -28
View File
@@ -374,33 +374,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.content-main {
display: flex;
flex-direction: column;
gap: 12px;
}
.dept-tree {
padding-top: 6px;
}
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.tree-table-crud-page;
</style>
+2 -18
View File
@@ -508,23 +508,7 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.table-crud-page;
</style>
+4 -7
View File
@@ -143,15 +143,12 @@ defineExpose({
</script>
<style lang="scss" scoped>
.select-user-shell {
gap: 12px;
}
@use '@/assets/styles/components/selector-dialog' as selectorDialog;
@include selectorDialog.shell-gap('.select-user-shell');
@include selectorDialog.dialog-body-padding('select-user-dialog');
.select-user-card :deep(.el-card__body) {
padding: 14px 16px !important;
}
.select-user-dialog :deep(.el-dialog__body) {
padding-top: 12px;
}
</style>
+2 -28
View File
@@ -703,33 +703,7 @@ async function handleDeptChange(value: number | string) {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.content-main {
display: flex;
flex-direction: column;
gap: 12px;
}
.dept-tree {
padding-top: 6px;
}
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
@include pageShell.tree-table-crud-page;
</style>
+2 -18
View File
@@ -255,19 +255,9 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.page-shell {
display: flex;
flex-direction: column;
}
@use '@/assets/styles/components/page-shell' as pageShell;
.data-table {
:deep(.el-button.is-link) {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(53, 109, 255, 0.08);
}
}
@include pageShell.table-crud-page;
.el-tab-pane {
background-color: #282c34;
@@ -275,10 +265,4 @@ onMounted(() => {
color: #fff;
}
}
@media (max-width: 900px) {
.toolbar-shell {
align-items: flex-start;
}
}
</style>