style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable,将全局 样式拆分为组件级独立 CSS 文件(侧边栏、顶栏、工作台等), 统一色彩变量和间距规范,重构所有视图和组件样式以适配新 主题系统,优化图表和知识图谱组件视觉表现,提取审计和差 旅报销相关子组件。
This commit is contained in:
72
web/src/components/shared/EnterpriseSelect.vue
Normal file
72
web/src/components/shared/EnterpriseSelect.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<ElSelect
|
||||
class="enterprise-select"
|
||||
popper-class="enterprise-select-popper"
|
||||
:model-value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:clearable="clearable"
|
||||
:filterable="filterable"
|
||||
:size="size"
|
||||
:teleported="teleported"
|
||||
@change="handleChange"
|
||||
>
|
||||
<ElOption
|
||||
v-for="option in normalizedOptions"
|
||||
:key="option.key"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
:disabled="option.disabled"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: [String, Number, Boolean], default: '' },
|
||||
options: { type: Array, required: true },
|
||||
placeholder: { type: String, default: '请选择' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
clearable: { type: Boolean, default: false },
|
||||
filterable: { type: Boolean, default: false },
|
||||
size: { type: String, default: 'default' },
|
||||
teleported: { type: Boolean, default: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
||||
const normalizedOptions = computed(() =>
|
||||
props.options.map((option, index) => {
|
||||
if (option && typeof option === 'object') {
|
||||
const value = option.value ?? option.label ?? ''
|
||||
|
||||
return {
|
||||
key: `${value}-${index}`,
|
||||
label: String(option.label ?? value),
|
||||
value,
|
||||
disabled: Boolean(option.disabled)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
key: `${option}-${index}`,
|
||||
label: String(option),
|
||||
value: option,
|
||||
disabled: false
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
function handleChange(value) {
|
||||
emit('update:modelValue', value)
|
||||
emit('change', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.enterprise-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user