初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/BasicComponents/Input/index.vue
+++ b/frontend/packages/BasicComponents/Input/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="basic-component-input">
+    <span
+      v-if="config.customize.showTitle"
+      class="title-left"
+      :style="{ marginRight: config.customize.titleStyle.marginRight + 'px', fontSize: config.customize.titleStyle.fontSize + 'px', color: config.customize.titleStyle.color }"
+    >
+      {{ config.customize.title }}
+    </span>
+    <el-input
+      :id="`el-input-${config.code}`"
+      v-model="value"
+      type="text"
+      resize="both"
+      class="input-component"
+      :placeholder="config.customize.placeholderStyle.placeholder"
+      :style="{ backgroundColor: config.customize.backgroundStyle.backgroundColor,'--input-placeholder-color': config.customize.placeholderStyle.placeholderColor, '--input-placeholder-font-size': config.customize.placeholderStyle.placeholderFontSize + 'px' }"
+      @input="handleInput"
+      @keyup.enter.native="keyupEnter"
+    >
+      <i
+        v-if="config.customize.icon.position === 'left' && config.customize.icon.name"
+        slot="prefix"
+        class="el-input__icon"
+        :class="config.customize.icon.position === 'left' ? config.customize.icon.name : ''"
+      />
+      <i
+        v-if="config.customize.icon.position === 'right' && config.customize.icon.name"
+        slot="suffix"
+        class="el-input__icon"
+        :class="config.customize.icon.position === 'right' ? config.customize.icon.name : ''"
+      />
+    </el-input>
+  </div>
+</template>
+
+<script>
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import _ from 'lodash'
+export default {
+  name: 'BasicComponentInput',
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      value: '',
+      timer: null
+    }
+  },
+  watch: {
+    'config.customize': {
+      handler () {
+        this.changeStyle(this.config, true)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.chartInit()
+    this.changeStyle(this.config)
+  },
+  beforeDestroy () {
+    // 销毁时清除定时器
+    clearTimeout(this.timer)
+  },
+  methods: {
+    changeStyle (config, isUpdateTheme) {
+      config = { ...this.config, ...config }
+      const input = document.querySelector(`#el-input-${config.code}`)
+      // const inputIcon = input.querySelector(`.${this.config.customize.icon.name}`)
+      input.style.backgroundColor = config.customize.backgroundStyle.backgroundColor
+      input.style.fontSize = config.customize.inputStyle.fontSize + 'px'
+      input.style.color = config.customize.inputStyle.color
+      input.style.borderColor = config.customize.borderStyle.borderColor
+      input.style.borderWidth = config.customize.borderStyle.borderWidth + 'px'
+      input.style.borderStyle = config.customize.borderStyle.borderStyle
+      input.style.borderRadius = config.customize.borderStyle.borderRadius + 'px'
+      // inputIcon.style.fontSize = this.config.customize.inputStyle.fontSize + 'px'
+      if (config.customize.icon.name) {
+        const inputIcon = document.querySelector(`.${config.customize.icon.name}`)
+        inputIcon.style.fontSize = config.customize.inputStyle.fontSize + 'px'
+      }
+      // 只有样式改变时更新主题配置，切换主题时不需要保存
+      if (!isUpdateTheme) {
+        config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+        this.changeChartConfig(config)
+        if (config.code === this.activeCode) {
+          this.changeActiveItemConfig(config)
+        }
+      }
+    },
+    handleInput (val) {
+      // 提供一个防抖的方法
+      this.debounce(() => {
+        this.linkage({ [this.config.code]: val })
+      })
+    },
+    keyupEnter () {
+      this.linkage({ [this.config.code]: this.value })
+    },
+    debounce (fn, delay = 500) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        fn()
+      }, delay)
+    }
+  }
+}
+</script>
+
+<style>
+/* 修改输入框的 placeholder 文字颜色 */
+input::placeholder {
+  color: red; /* 设置占位文字颜色为灰色 */
+}
+
+</style>
+
+<style lang="scss" scoped>
+.basic-component-input {
+  width: 100%;
+  display: flex;
+  .title-left {
+    display: block;
+    white-space: nowrap;
+    align-self: center;
+  }
+  .el-input {
+    height: 100%;
+    width: 100%;
+
+    ::v-deep .el-input__inner {
+      height: 100%;
+      width: 100%;
+      background-color:#151a26;
+      border: 1px solid #DCDFE6;
+    }
+  }
+  ::v-deep .el-input__inner::placeholder {
+   color: var(--input-placeholder-color);
+   font-size: var(--input-placeholder-font-size);
+ }
+}
+
+</style>