@xilonglab/vue-main 0.7.8

package/packages/main/XlNavBar.vue

@@ -0,0 +1,89 @@
+<script setup>
+defineOptions({ name: "XlNavBar" })
+
+// 添加props以支持自定义配置
+const props = defineProps({
+  // 允许自定义左右列�?
+  leftSpan: {
+    type: Number,
+    default: 12
+  },
+  rightSpan: {
+    type: Number,
+    default: 12
+  },
+  // 是否固定在顶�?
+  fixed: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义高�?
+  height: {
+    type: [Number, String],
+    default: 59
+  }
+})
+
+// 计算样式
+const barStyle = computed(() => ({
+  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+  position: props.fixed ? 'fixed' : 'relative',
+  top: props.fixed ? '0' : 'auto',
+  zIndex: props.fixed ? 1000 : 'auto'
+}))
+</script>
+
+<template>
+  <div class="xl-nav-bar" :style="barStyle">
+    <el-col :span="leftSpan" class="left">
+      <slot name="left" />
+    </el-col>
+    <el-col :span="rightSpan" class="right">
+      <slot name="right" />
+    </el-col>
+    <!-- 添加中间插槽 -->
+    <slot />
+  </div>
+</template>
+
+<style lang="less">
+.xl-nav-bar {
+  width: 100%;
+  background: #fff;
+  color: #000;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 4px rgba(222, 222, 222, 0.08);
+  
+  // 增加过渡效果
+  transition: all 0.3s;
+
+  .left {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    padding-left: 20px;
+    height: 100%;
+  }
+
+  .right {
+    display: flex;
+    align-items: center; // 添加垂直居中
+    justify-content: flex-end;
+    padding-right: 40px;
+    height: 100%;
+  }
+}
+
+// 添加响应式样�?
+@media screen and (max-width: 768px) {
+  .xl-nav-bar {
+    .left {
+      padding-left: 10px;
+    }
+    .right {
+      padding-right: 20px;
+    }
+  }
+}
+</style>

package/packages/main/XlStatusIndicator.vue

@@ -0,0 +1,36 @@
+<script setup>
+defineOptions({ name: "XlStatusIndicator" })
+
+const props = defineProps({
+    index: {
+        type: Number,
+    },
+    data: {
+        type: Array,
+        required: true,
+    },
+})
+</script>
+
+<template>
+    <span :class="['xl-status-indicator', data[index].class]">{{ data[index].text }}</span>
+</template>
+
+<style lang="less">
+.xl-status-indicator {
+    margin-right: 15px;
+    color: black; 
+
+    &.red {
+        color: red;
+    }
+
+    &.blue {
+        color: blue;
+    }
+
+    &.green {
+        color: green;
+    }
+}
+</style>

package/packages/main/XlTabView.vue

@@ -0,0 +1,81 @@
+<script setup>
+defineOptions({ name: "XlTabView" })
+
+import { ref, watch } from 'vue'
+
+const emits = defineEmits(['change'])
+
+const props = defineProps({
+    index: {
+        type: Number,
+        default: 0,
+    },
+    frames: {
+        type: Array,
+        default: () => [],
+        required: true
+    },
+    data: {
+        type: Object,
+        default: () => ({})
+    }
+})
+
+const tabIndex = ref(String(props.index))
+
+watch(tabIndex, (newVal) => {
+    emits('change', newVal)
+})
+</script>
+
+<template>
+    <div class="xl-tab-view">
+        <el-tabs class="tabs" v-model="tabIndex">
+            <el-tab-pane 
+                v-for="(frame, index) in props.frames" 
+                :key="frame.label"
+                :label="frame.label" 
+                :name="String(index)"
+            />
+        </el-tabs>
+        <component 
+            v-for="(frame, index) in frames"
+            :key="frame.label"
+            v-show="tabIndex === String(index)"
+            :is="frame.entity"
+            :tab-index="tabIndex"
+            :data="data"
+            class="frame"
+        />
+    </div>
+</template>
+
+<style lang="less" scoped>
+.xl-tab-view {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    position: relative;
+    background: #fff;
+    color: #000;
+
+    .tabs {
+        height: 40px;
+
+        :deep(.el-tabs__nav-wrap) {
+            padding-left: 10px;
+        }
+
+        :deep(.el-tabs__header) {
+            margin: 0;
+        }
+    }
+
+    .frame {
+        flex-grow: 1;
+        overflow-y: scroll;
+        display: flex;
+        flex-flow: column;
+    }
+}
+</style>

package/packages/main/XlToolBar.vue

@@ -0,0 +1,132 @@
+<script setup>
+defineOptions({ name: "XlToolBar" })
+
+import { onMounted } from 'vue';
+
+
+const emits = defineEmits(['query', 'clear'])
+
+const props = defineProps({
+    type: {},
+    table: {},
+    params: {
+        type: Object,
+        default: () => ({})
+    },
+});
+
+const defaultFilter = { ...props.params }
+
+
+const handlers = {
+    query() {
+        if (props.table) {
+            props.table.value.query()
+        }
+        emits('query')
+    },
+    clear() {
+        if (props.table) {
+            reset(props.params, defaultFilter)
+            props.table.value.query()
+        }
+        emits('clear')
+    }
+}
+
+function reset(a, b) {
+    for (const key in a) {
+        delete a[key];
+    }
+    for (const key in b) {
+        a[key] = b[key];
+    }
+}
+
+onMounted(() => {
+    props.params.view = 'table'
+})
+</script>
+
+
+<template>
+    <div class="xl-tool-bar">
+        <el-radio-group v-if="type == 'view'" class="xl-radio" v-model="params.view">
+            <el-radio-button label="table">
+                <el-icon>
+                    <Grid />
+                </el-icon>
+            </el-radio-button>
+            <el-radio-button label="chart">
+                <el-icon>
+                    <TrendCharts />
+                </el-icon>
+
+            </el-radio-button>
+        </el-radio-group>
+        <div class="inputs" @keyup.enter="handlers.query">
+            <slot name="inputs" />
+            <xl-button class="query-btn" type="primary" @click="handlers.query">查询</xl-button>
+            <xl-button class="reset-btn" @click="handlers.clear">重置</xl-button>
+        </div>
+        <div class="buttons">
+            <slot name="buttons" />
+        </div>
+    </div>
+</template>
+
+
+<style lang="less">
+.xl-tool-bar {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    width: 100%;
+    padding: 3px 0;
+    background: #fff !important;
+
+    .el-tabs__header {
+        background: #fff !important;
+    }
+
+    .el-icon {
+        font-size: 20px;
+    }
+
+    .el-radio-button__inner {
+        padding: 4px 10px;
+    }
+
+    .inputs {
+        text-align: left;
+
+        >* {
+            margin-right: 5px !important;
+        }
+    }
+
+    .xl-radio {
+        margin-right: 5px;
+        margin-left: 3px;
+    }
+
+    .buttons {
+        flex-grow: 1;
+        padding: 0 5px;
+        width: 150px;
+        text-align: right;
+
+        .xl-button {
+            display: inline-block !important;
+        }
+
+        >* {
+            margin-right: 5px !important;
+        }
+    }
+
+    .el-button+.el-button {
+        margin: 0;
+    }
+}
+</style>

package/packages/main/XlUpdateIndicator.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineOptions({ name: "XlUpdateIndicator" })
+
+import { computed } from 'vue'
+
+
+const props = defineProps({
+    state: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const formatDatetime = (date) => {
+    const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
+    return new Intl.DateTimeFormat('zh-CN', options).format(date);
+}
+
+const text = computed(() => {
+    const { lastUpdateTime } = props.state
+    return lastUpdateTime ? `上次保存时间:${formatDatetime(lastUpdateTime)}` : "";
+})
+</script>
+
+
+<template>
+    <span class="xl-update-indicator">
+        <span v-if="props.state.saving">保存中...</span>
+        <span v-else>{{ text }}</span>
+    </span>
+</template>
+
+
+<style lang="less">
+.xl-update-indicator {
+    color: grey;
+    font-size: 10px;
+    margin-right: 15px;
+}
+</style>

package/packages/main/XlVerticalMenu.vue

@@ -0,0 +1,72 @@
+<script setup>
+defineOptions({ name: "XlVerticalMenu" })
+
+import { ref } from 'vue'
+
+
+const emits = defineEmits(['change', 'item-contextmenu'])
+
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    name: {
+        type: String,
+        default: "label",
+    },
+    width: {
+        default: 200,
+    },
+    loading: {
+        default: false,
+    },
+})
+
+const activeIndex = ref(0)
+
+
+function handleClickItem(index, item) {
+    activeIndex.value = index;
+    emits('change', item)
+}
+
+function handleContextMenu(e, item) {
+    emits('item-contextmenu', e, item)
+}
+</script>
+
+
+<template>
+    <div class="xl-vertical-menu" :style="{ width: `${width}px` }" v-loading="loading">
+        <div class="item" v-for="(item, index) in items" :key="index" :class="{ active: activeIndex == index }"
+            @click="handleClickItem(index, item)" @contextmenu="handleContextMenu($event, item)">
+            <span :title="item[name]">{{ item[name] }}</span>
+        </div>
+    </div>
+</template>
+
+
+<style lang="less" scoped>
+.xl-vertical-menu {
+    font-size: 13px;
+    border-right: 1px solid rgb(240, 240, 240);
+    overflow-y: scroll;
+    background: #fff;
+
+    .active {
+        background: rgb(26, 157, 255);
+        color: rgb(240, 240, 240);
+    }
+
+    &>div {
+        padding: 10px 7px;
+        color: rgb(70, 100, 150);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        text-align: left;
+    }
+}
+</style>