feat(ui): 新增自定义样式和组件

- 添加自定义按钮、对话框样式
- 新增 RenderDialog 组件
- 更新公共样式，引入新的 renderUi 样式
- 在主入口文件中注册 RenderDialog 组件

src/assets/sass/common.scss

@@ -5,6 +5,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './public.scss';
+@import './renderUi.scss';
 
 * {
   margin: 0;

src/assets/sass/renderSass/button.scss

@@ -0,0 +1,99 @@
+@import 'theme';
+.render-button {
+  padding: 8px 21px;
+  border-radius: 8px;
+}
+
+.el-button {
+  &:hover {
+    border-color: var(--color-primary-light);
+    background: transparent;
+    color: var(--color-primary);
+  }
+  &:focus {
+    border-color: $--color-primary-light;
+    background: transparent;
+    color: var(--color-primary);
+  }
+  &:active {
+    border-color: $--color-primary-light;
+    background: transparent;
+    color: var(--color-primary);
+  }
+}
+
+.el-button--text {
+  color: var(--color-primary);
+  border: none;
+  &:hover {
+    color: $--color-primary-light;
+    border: none;
+  }
+  &:focus {
+    color: $--color-primary-light;
+    border: none;
+  }
+  &:active {
+    color: $--color-primary-light;
+    border: none;
+  }
+}
+
+.el-button--primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+  &.is-disabled {
+    background-color: var(--color-primary-disabled);
+    border-color: transparent;
+    &:hover {
+      background-color: var(--color-primary-disabled);
+      border-color: transparent;
+    }
+  }
+  &:hover {
+    background-color: $--color-primary-light;
+    border-color: $--color-primary-light;
+    color: #fff;
+  }
+  &:active {
+    background-color: darken($--color-primary, 5%);
+    border-color: $--color-primary-light;
+    color: #fff;
+  }
+  &:focus {
+    background-color: darken($--color-primary, 5%);
+    border-color: $--color-primary-light;
+    color: #fff;
+  }
+}
+
+.el-button--danger {
+  background: var(--color-primary-danger);
+  color: #fff;
+  &:hover {
+    background: $--color-primary-danger-light;
+    color: #fff;
+    border-color: $--color-primary-danger-light;
+  }
+  &:active {
+    background: $--color-primary-danger-light;
+    color: #fff;
+    border-color: $--color-primary-danger-light;
+  }
+  &:focus {
+    background: $--color-primary-danger-light;
+    color: #fff;
+    border-color: $--color-primary-danger-light;
+  }
+  &.is-disabled {
+    background: $--color-primary-danger-disabled;
+    color: #fff;
+    border-color: transparent;
+    &:hover {
+      background: $--color-primary-danger-disabled;
+      color: #fff;
+      border-color: transparent;
+    }
+  }
+}

src/assets/sass/renderSass/dialog.scss

@@ -0,0 +1,36 @@
+//新版本ui
+.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 15px 15px 0 15px;
+    color: #000000;
+    font-size: 16px;
+    font-weight: 600;
+    font-family: PingFangSC, PingFang SC;
+    .el-dialog__headerbtn {
+      &:hover {
+        .el-dialog__close {
+          color: $--color-primary;
+        }
+      }
+      &:focus {
+        .el-dialog__close {
+          color: $--color-primary;
+        }
+      }
+    }
+  }
+  .el-dialog__body {
+    padding: 15px;
+    .render-dialog-body {
+      max-height: 50vh;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0 15px 15px 15px;
+  }
+}

src/assets/sass/renderSass/theme.scss

@@ -0,0 +1,13 @@
+//主题色
+$--color-primary: #0a6dff; //主题色
+$--color-primary-light: lighten($--color-primary, 5%); //高亮颜色
+$--color-primary-disabled: #155aef24;
+$--color-primary-danger: #ff0000;
+$--color-primary-danger-light: lighten($--color-primary-danger, 5%); //高亮颜色
+$--color-primary-danger-disabled: #ff000024;
+:root {
+  --swiper-theme-color: #0a6dff;
+  --color-primary: #0a6dff;
+  --color-primary-disabled: #155aef24;
+  --color-primary-danger: #ff0000;
+}

src/assets/sass/renderUi.scss

@@ -0,0 +1,3 @@
+@import 'renderSass/theme';
+@import 'renderSass/button';
+@import 'renderSass/dialog';

src/components/RenderDialog/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="title">
+    <div slot="default">
+      <div class="render-dialog-body">
+        <slot></slot>
+      </div>
+    </div>
+    <div slot="footer">
+      <slot name="footer">
+        <el-button size="medium" class="render-button" @click="cancel">{{ cancelButtonText }}</el-button>
+        <el-button size="medium" class="render-button" type="primary" @click="confirm">{{ confirmButtonText }}</el-button>
+      </slot>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  name: 'index',
+  data() {
+    return {}
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    confirmButtonText: {
+      type: String,
+      default: '确定'
+    },
+    cancelButtonText: {
+      type: String,
+      default: '取消'
+    }
+  },
+  watch: {},
+  components: {},
+  filters: {},
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+      this.$emit('update:visible', false)
+    },
+    confirm() {
+      this.$emit('confirm')
+      this.$emit('update:visible', false)
+    }
+  },
+  created() {},
+  mounted() {},
+  computed: {}
+}
+</script>
+<style scoped lang="scss">
+#index-container {
+}
+</style>

src/main.js

@@ -16,6 +16,7 @@ import utils from '@/assets/js/common'
 // 生成的数据交互api
 import generatedFormat from '@/assets/js/generatedFormat'
 import generatedComponents from './generatedComponents'
+import RenderDialog from '@/components/RenderDialog/index.vue'
 Vue.prototype.$generatedFormat = generatedFormat
 Vue.prototype.$utils = utils
 Vue.prototype.$generatedDictList = generatedFormat.formatList
@@ -30,6 +31,7 @@ import '@/assets/js/utils/permission' // permission control
 Vue.use(ElementUI, { locale })
 //二次封装的el-table
 Vue.component('RTable', RenderTable)
+Vue.component('RDialog', RenderDialog)
 Vue.component('RSwiper', RenderSwiper)
 Vue.component('RMinerU', RenderMinerU)
 // 富文本编辑器