chore:规范名字

src/packages/components/Charts/PublicSmallBorder/index.vue

@@ -6,67 +6,59 @@
         {{ titleText }}
       </span>
       <span class="right-select">
-        <ConsumSelect v-show="selectOption.show" :options="selectOption.dataset"
+        <ConsumSelect v-if="shouldShowSelect" :options="selectOption?.dataset || []"
-          :selectedValue="selectOption.selectValue" @change="handleSelectChange"
+          :selectedValue="selectOption?.selectValue" @change="handleSelectChange"
           :select-style-config="selectStyleConfig" />
       </span>
     </div>
     <div class="content flex">
       <img src="./assets/Background.svg" alt="" class="svg ic">
-      <slot>
+      <slot></slot>
-      </slot>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed, PropType } from 'vue'
 import ConsumSelect from './select.vue'
 
+
+interface SelectOption {
+  selectValue: string
+  dataset: Array<{
+    label: string
+    value: string
+  }>
+}
 const props = defineProps({
   titleText: {
     type: String,
     required: true
   },
   selectOption: {
-    type: Object,
+    type: Object as PropType<SelectOption | null>,
-    default: () => ({
+    default: null
-      show: false,
+  },
-      selectValue: 'day',
+  selectStyleConfig: {
-      dataset: [
-        {
-          label: '当天',
-          value: 'day'
-        },
-        {
-          label: '本周',
-          value: 'week'
-        },
-        {
-          label: '当月',
-          value: 'month'
-        },
-        {
-          label: '本季度',
-          value: 'quarter'
-        },
-        {
-          label: '当年',
-          value: 'year'
-        }
-      ]
-    })
-  }, selectStyleConfig: {
     default: () => ({
       showAngle: true
     }),
     required: false
   }
 })
+
 const emits = defineEmits(['change'])
+
+const shouldShowSelect = computed(() => {
+  return props.selectOption !== null &&
+    props.selectOption !== undefined &&
+    Array.isArray(props.selectOption.dataset) &&
+    props.selectOption.dataset.length > 0
+})
+
 const handleSelectChange = (value: any) => {
   emits('change', value)
 }
-
 </script>
 
 <style scoped>
@@ -107,7 +99,18 @@ const handleSelectChange = (value: any) => {
       text-shadow: 1px 3px 10px #000000;
       font-size: 16px;
       /* background-color: #eee; */
+      max-width: 16em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      /* background-color: aliceblue; */
     }
+
+    .right-select {
+      margin-left: 70px;
+      margin-top: 8px;
+      z-index: 10;
+    }
+
   }
 
   .content {

src/packages/components/Charts/PublicSmallBorder/select.vue

@@ -76,7 +76,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .custom-select {
     position: absolute;
-    top: 8px;
+    top: 12px;
     right: 14px;
     font-size: 12px;
     z-index: 1000;