初始化

frontend/packages/BasicComponents/HorizontalLine/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div style="width: 100%; height: 100%" class="bs-design-wrap">
+    <div :key="updateKey" class="custom-border-box" :style="{
+      height: lineHeight + 'px',
+      opacity: opacity,
+      'background-image': `linear-gradient(to right, ${gradientColor0 ? gradientColor0 : gradientColor1
+        } , ${gradientColor1 ? gradientColor1 : gradientColor0})`
+    }" />
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'HorizontalLine',
+  components: {},
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    lineHeight() {
+      return this.config.customize.height || 40
+    },
+    gradientColor0() {
+      return this.config.customize.gradientColor0 || ''
+    },
+    gradientColor1() {
+      return this.config.customize.gradientColor1 || ''
+    },
+    opacity() {
+      return this.config.customize.opacity || 100
+    }
+  },
+  watch: {},
+  mounted() { },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+
+  .custom-border-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/BasicComponents/HorizontalLine/setting.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form ref="form" :model="config" label-width="90px" label-position="left" class="setting-body bs-el-form">
+      <div>
+        <slot name="top" />
+        <el-form :model="config.customize" label-position="left" class="setting-body bs-el-form" label-width="90px">
+          <SettingTitle>标题</SettingTitle>
+          <div class="lc-field-body">
+            <el-form-item label="标题">
+              <el-input v-model="config.title" clearable />
+            </el-form-item>
+          </div>
+          <SettingTitle>位置</SettingTitle>
+          <div class="lc-field-body">
+            <PosWhSetting :config="config" />
+          </div>
+          <SettingTitle>旋转</SettingTitle>
+          <div class="lc-field-body">
+            <RotateSetting :config="config" />
+          </div>
+          <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting v-if="config.border" label-width="100px" :bigTitle='config.title' :config="config.border" />
+          </div>
+          <SettingTitle>基础</SettingTitle>
+          <div class="lc-field-body">
+            <el-form-item label="背景色一">
+              <ColorPicker v-model="config.customize.gradientColor0" placeholder="请选择背景色"
+                :predefine-colors="predefineThemeColors" />
+            </el-form-item>
+            <el-form-item label="背景色二">
+              <ColorPicker v-model="config.customize.gradientColor1" placeholder="请选择背景色"
+                :predefine-colors="predefineThemeColors" />
+            </el-form-item>
+            <el-form-item label="高度">
+              <el-input-number v-model="config.customize.height" class="bs-el-input-number" :min="0" :max="30"
+                :step="1" />
+            </el-form-item>
+            <el-form-item label="不透明度" label-width="100px">
+              <el-input-number v-model="config.customize.opacity" class="bs-el-input-number" placeholder="请输入不透明度"
+                :min="0.01" :max="1" :precision="2" :step="0.01" />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import { predefineColors } from "data-room-ui/js/utils/colorList";
+
+export default {
+  name: 'Border14Setting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    predefineThemeColors: {
+      type: Array,
+      default: () => predefineColors
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() { },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/BasicComponents/HorizontalLine/settingConfig.js

@@ -0,0 +1,49 @@
+import { commonConfig } from "../../js/config";
+
+export const settingConfig = {
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false,
+    },
+  },
+};
+const customConfig = {
+  type: "horizontalLine",
+  root: {
+    version: "2023071001",
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0,
+  },
+  customize: {
+    // 边框线颜色
+    borderColor: "rgba(131, 191, 246, 0)",
+    // 边框线宽度
+    borderWidth: 1,
+    // 边框背景颜色
+    backgroundColor: "#007aff",
+    colorType: "single",
+    // 渐变色0值
+    gradientColor0: "#83bff6",
+    // 渐变色1值
+    gradientColor1: "#188df0",
+    // 渐变色色值改变方向
+    gradientDirection: "to right",
+    // 透明度
+    opacity: 100,
+    // 长度
+    height: 4,
+  },
+};
+export const dataConfig = {
+  ...commonConfig(customConfig),
+};