ele-admin-plus 1.4.1-beta.1 → 1.4.1

package/lib/ele-cron-panel/index.cjs

@@ -0,0 +1,347 @@
+"use strict";
+const vue = require("vue");
+const receiver = require("../ele-config-provider/receiver");
+const EleTabs = require("../ele-tabs/index");
+const CronSecond = require("./components/cron-second");
+const CronMinute = require("./components/cron-minute");
+const CronHour = require("./components/cron-hour");
+const CronDay = require("./components/cron-day");
+const CronMonth = require("./components/cron-month");
+const CronWeek = require("./components/cron-week");
+const CronYear = require("./components/cron-year");
+const util = require("./util");
+const props = require("./props");
+const _hoisted_1 = { class: "ele-cron-panel" };
+const _hoisted_2 = { class: "ele-cron-panel-main" };
+const _hoisted_3 = { class: "ele-cron-panel-extra" };
+const _hoisted_4 = { class: "ele-cron-panel-extra-item" };
+const _hoisted_5 = { class: "ele-cron-panel-extra-header" };
+const _hoisted_6 = { class: "ele-cron-panel-extra-body" };
+const _hoisted_7 = { class: "ele-cron-panel-result" };
+const _hoisted_8 = { class: "ele-cron-panel-result-item" };
+const _hoisted_9 = { class: "ele-cron-panel-result-title" };
+const _hoisted_10 = { class: "ele-cron-panel-result-text" };
+const _hoisted_11 = { class: "ele-cron-panel-result-item" };
+const _hoisted_12 = { class: "ele-cron-panel-result-title" };
+const _hoisted_13 = { class: "ele-cron-panel-result-text" };
+const _hoisted_14 = { class: "ele-cron-panel-result-item" };
+const _hoisted_15 = { class: "ele-cron-panel-result-title" };
+const _hoisted_16 = { class: "ele-cron-panel-result-text" };
+const _hoisted_17 = { class: "ele-cron-panel-result-item" };
+const _hoisted_18 = { class: "ele-cron-panel-result-title" };
+const _hoisted_19 = { class: "ele-cron-panel-result-text" };
+const _hoisted_20 = { class: "ele-cron-panel-result-item" };
+const _hoisted_21 = { class: "ele-cron-panel-result-title" };
+const _hoisted_22 = { class: "ele-cron-panel-result-text" };
+const _hoisted_23 = { class: "ele-cron-panel-result-item" };
+const _hoisted_24 = { class: "ele-cron-panel-result-title" };
+const _hoisted_25 = { class: "ele-cron-panel-result-text" };
+const _hoisted_26 = { class: "ele-cron-panel-result-item" };
+const _hoisted_27 = { class: "ele-cron-panel-result-title" };
+const _hoisted_28 = { class: "ele-cron-panel-result-text" };
+const _hoisted_29 = { class: "ele-cron-panel-result" };
+const _hoisted_30 = { class: "ele-cron-panel-result-item" };
+const _hoisted_31 = { class: "ele-cron-panel-result-title" };
+const _hoisted_32 = { class: "ele-cron-panel-result-text ele-cron-panel-result-value" };
+const _hoisted_33 = { class: "ele-cron-panel-extra-item" };
+const _hoisted_34 = { class: "ele-cron-panel-extra-header" };
+const _hoisted_35 = { class: "ele-cron-panel-extra-body" };
+const _hoisted_36 = { class: "ele-cron-panel-test" };
+const _hoisted_37 = ["onClick"];
+const _hoisted_38 = { class: "ele-cron-panel-list-item-value" };
+const _hoisted_39 = { class: "ele-cron-panel-list-item-label" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleCronPanel" },
+  __name: "index",
+  props: props.cronPanelProps,
+  emits: props.cronPanelEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props2 = __props;
+    const emit = __emit;
+    const { lang } = receiver.useLocale("cronPanel", props2);
+    const second = vue.ref("*");
+    const minute = vue.ref("*");
+    const hour = vue.ref("*");
+    const day = vue.ref("*");
+    const month = vue.ref("*");
+    const week = vue.ref("?");
+    const year = vue.ref("");
+    const resultItems = vue.ref([]);
+    const tabActive = vue.ref("second");
+    const tabItems = vue.computed(() => {
+      return [
+        { name: "second", label: lang.value.second },
+        { name: "minute", label: lang.value.minute },
+        { name: "hour", label: lang.value.hour },
+        { name: "day", label: lang.value.day },
+        { name: "month", label: lang.value.month },
+        { name: "week", label: lang.value.week },
+        { name: "year", label: lang.value.year }
+      ];
+    });
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const updateCron = () => {
+      const values = [
+        second.value,
+        minute.value,
+        hour.value,
+        day.value,
+        month.value,
+        week.value
+      ];
+      if (year.value != null && year.value !== "") {
+        values.push(year.value);
+      }
+      const cron = values.join(" ");
+      updateModelValue(cron);
+      return cron;
+    };
+    vue.watch(hour, (h) => {
+      if (h !== "*" && second.value === "*") {
+        second.value = "0";
+      }
+      if (h !== "*" && minute.value === "*") {
+        minute.value = "0";
+      }
+    });
+    vue.watch(day, (d) => {
+      if (d !== "?" && week.value !== "?") {
+        week.value = "?";
+      }
+    });
+    vue.watch(week, (w) => {
+      if (w !== "?" && day.value !== "?") {
+        day.value = "?";
+      }
+    });
+    vue.watch(
+      [second, minute, hour, day, month, week, year],
+      () => {
+        updateCron();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props2.modelValue,
+      (cron) => {
+        if (!cron) {
+          tabActive.value = "second";
+          second.value = "*";
+          minute.value = "*";
+          hour.value = "*";
+          day.value = "*";
+          month.value = "*";
+          week.value = "?";
+          year.value = "";
+          const str = updateCron();
+          resultItems.value = util.getResultItems(
+            str,
+            lang.value.resultNoData,
+            lang.value.resultNoMore
+          );
+          return;
+        }
+        const [s, m, h, d, m2, w, y] = cron.split(" ");
+        second.value = s;
+        minute.value = m;
+        hour.value = h;
+        day.value = d;
+        month.value = m2;
+        week.value = w;
+        year.value = y || "";
+        resultItems.value = util.getResultItems(
+          cron,
+          lang.value.resultNoData,
+          lang.value.resultNoMore
+        );
+      }
+    );
+    vue.watch(lang, () => {
+      resultItems.value = util.getResultItems(
+        props2.modelValue,
+        lang.value.resultNoData,
+        lang.value.resultNoMore
+      );
+    });
+    const cronListVisible = vue.ref(false);
+    const cronList = vue.computed(() => {
+      return [
+        { cron: "0 * * * * ?", label: lang.value.common01 },
+        { cron: "0 0 * * * ?", label: lang.value.common02 },
+        { cron: "0 0/30 * * * ?", label: lang.value.common03 },
+        { cron: "0 0/30 8-9 * * ?", label: lang.value.common04 },
+        { cron: "0 0 0 * * ?", label: lang.value.common05 },
+        { cron: "0 30 8 * * ?", label: lang.value.common06 },
+        { cron: "0 0 8,14,19 * * ?", label: lang.value.common07 },
+        { cron: "0 0 0 1 * ?", label: lang.value.common08 },
+        { cron: "0 0 2 1 * ?", label: lang.value.common09 },
+        { cron: "0 30 8 15 * ?", label: lang.value.common10 },
+        { cron: "0 0 0 L * ?", label: lang.value.common11 },
+        { cron: "0 30 8 L * ?", label: lang.value.common12 },
+        { cron: "0 30 8 ? * 6L", label: lang.value.common13 },
+        { cron: "0 0 0 ? * 1", label: lang.value.common14 },
+        { cron: "0 0 8 ? * 2-4", label: lang.value.common15 },
+        { cron: "0 0 0 1 10 ? 2025-2028", label: lang.value.common16 }
+      ];
+    });
+    const handleItemClick = (item) => {
+      hideCronList();
+      updateModelValue(item.cron);
+    };
+    const openCronList = () => {
+      cronListVisible.value = true;
+    };
+    const hideCronList = () => {
+      cronListVisible.value = false;
+    };
+    __expose({ hideCronList });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(EleTabs, {
+            addable: true,
+            type: "border-card",
+            items: tabItems.value,
+            modelValue: tabActive.value,
+            "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => tabActive.value = $event),
+            onTabAdd: openCronList
+          }, {
+            second: vue.withCtx(() => [
+              vue.createVNode(CronSecond, {
+                modelValue: second.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => second.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            minute: vue.withCtx(() => [
+              vue.createVNode(CronMinute, {
+                modelValue: minute.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => minute.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            hour: vue.withCtx(() => [
+              vue.createVNode(CronHour, {
+                modelValue: hour.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hour.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            day: vue.withCtx(() => [
+              vue.createVNode(CronDay, {
+                modelValue: day.value,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => day.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            month: vue.withCtx(() => [
+              vue.createVNode(CronMonth, {
+                modelValue: month.value,
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => month.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            week: vue.withCtx(() => [
+              vue.createVNode(CronWeek, {
+                modelValue: week.value,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => week.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            year: vue.withCtx(() => [
+              vue.createVNode(CronYear, {
+                modelValue: year.value,
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => year.value = $event),
+                lang: vue.unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            "add-icon": vue.withCtx(() => [
+              vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(lang).common), 1)
+            ]),
+            _: 1
+          }, 8, ["items", "modelValue"])
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(vue.unref(lang).result), 1),
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createElementVNode("div", _hoisted_7, [
+                vue.createElementVNode("div", _hoisted_8, [
+                  vue.createElementVNode("div", _hoisted_9, vue.toDisplayString(vue.unref(lang).resultSecond), 1),
+                  vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(second.value), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_11, [
+                  vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(vue.unref(lang).resultMinute), 1),
+                  vue.createElementVNode("div", _hoisted_13, vue.toDisplayString(minute.value), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_14, [
+                  vue.createElementVNode("div", _hoisted_15, vue.toDisplayString(vue.unref(lang).resultHour), 1),
+                  vue.createElementVNode("div", _hoisted_16, vue.toDisplayString(hour.value), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_17, [
+                  vue.createElementVNode("div", _hoisted_18, vue.toDisplayString(vue.unref(lang).resultDay), 1),
+                  vue.createElementVNode("div", _hoisted_19, vue.toDisplayString(day.value), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_20, [
+                  vue.createElementVNode("div", _hoisted_21, vue.toDisplayString(vue.unref(lang).resultMonth), 1),
+                  vue.createElementVNode("div", _hoisted_22, vue.toDisplayString(month.value), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_23, [
+                  vue.createElementVNode("div", _hoisted_24, vue.toDisplayString(vue.unref(lang).resultWeek), 1),
+                  vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(week.value), 1)
+                ]),
+                vue.createElementVNode("div", _hoisted_26, [
+                  vue.createElementVNode("div", _hoisted_27, vue.toDisplayString(vue.unref(lang).resultYear), 1),
+                  vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(year.value), 1)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_29, [
+                vue.createElementVNode("div", _hoisted_30, [
+                  vue.createElementVNode("div", _hoisted_31, vue.toDisplayString(vue.unref(lang).resultName), 1),
+                  vue.createElementVNode("div", _hoisted_32, vue.toDisplayString(_ctx.modelValue), 1)
+                ])
+              ])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_33, [
+            vue.createElementVNode("div", _hoisted_34, vue.toDisplayString(vue.unref(lang).resultTest), 1),
+            vue.createElementVNode("div", _hoisted_35, [
+              vue.createElementVNode("ul", _hoisted_36, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(resultItems.value, (item) => {
+                  return vue.openBlock(), vue.createElementBlock("li", {
+                    key: item,
+                    class: "ele-cron-panel-test-item"
+                  }, vue.toDisplayString(item), 1);
+                }), 128))
+              ])
+            ])
+          ])
+        ]),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["ele-cron-panel-list-mask", { "is-show": cronListVisible.value }]),
+          onClick: hideCronList
+        }, [
+          vue.createElementVNode("div", {
+            class: "ele-cron-panel-list-wrapper",
+            onClick: _cache[8] || (_cache[8] = vue.withModifiers(() => {
+            }, ["stop"]))
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cronList.value, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.cron,
+                class: "ele-cron-panel-list-item",
+                onClick: ($event) => handleItemClick(item)
+              }, [
+                vue.createElementVNode("div", _hoisted_38, vue.toDisplayString(item.cron), 1),
+                vue.createElementVNode("div", _hoisted_39, vue.toDisplayString(item.label), 1)
+              ], 8, _hoisted_37);
+            }), 128))
+          ])
+        ], 2)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-cron-panel/index.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: StringConstructor;
+    locale: import('vue').PropType<Partial<import('./types').CronPanelLocale>>;
+}>, {
+    hideCronList: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (_value?: string | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: StringConstructor;
+    locale: import('vue').PropType<Partial<import('./types').CronPanelLocale>>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value?: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-cron-panel/props.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cronPanelProps = {
+  /** 绑定值 */
+  modelValue: String,
+  /** 国际化 */
+  locale: Object
+};
+const cronPanelEmits = {
+  /** 更新绑定值 */
+  "update:modelValue": (_value) => true
+};
+exports.cronPanelEmits = cronPanelEmits;
+exports.cronPanelProps = cronPanelProps;

package/lib/ele-cron-panel/props.d.ts

@@ -0,0 +1,20 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { CronPanelLocale } from './types';
+
+/**
+ * 属性
+ */
+export declare const cronPanelProps: {
+    /** 绑定值 */
+    modelValue: StringConstructor;
+    /** 国际化 */
+    locale: PropType<Partial<CronPanelLocale>>;
+};
+export type CronPanelProps = ExtractPropTypes<typeof cronPanelProps>;
+/**
+ * 事件
+ */
+export declare const cronPanelEmits: {
+    /** 更新绑定值 */
+    'update:modelValue': (_value?: string) => boolean;
+};

package/lib/ele-cron-panel/style/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+require("element-plus/es/components/radio-group/style/index");
+require("element-plus/es/components/radio/style/index");
+require("element-plus/es/components/input-number/style/index");
+require("element-plus/es/components/checkbox-group/style/index");
+require("element-plus/es/components/checkbox/style/index");
+require("../../ele-tabs/style/index");
+require("./index.scss");

package/lib/ele-cron-panel/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-cron-panel/style/index.scss

@@ -0,0 +1,282 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-cron-panel {
+  position: relative;
+}
+
+.ele-cron-panel-main > .ele-tabs {
+  #{eleVarName('tab', 'height')}: 32px;
+
+  .el-tabs__content {
+    padding: 0;
+  }
+
+  .el-tabs__new-tab {
+    flex-shrink: 0;
+    min-width: 36px;
+    width: max-content;
+    box-sizing: border-box;
+    margin: 0 6px 0 0;
+    padding: 0 4px;
+  }
+}
+
+/* 内容 */
+.ele-cron-panel-content {
+  height: 360px;
+  padding: 12px 20px 0 20px;
+  overflow: auto;
+  box-sizing: border-box;
+
+  .el-radio-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: min-content;
+    min-width: 100%;
+
+    & > .el-radio {
+      margin: 0;
+
+      & + .el-radio {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  /* 指定选择项 */
+  .ele-cron-panel-options-wrapper {
+    padding: 4px 0 0 0;
+    align-items: flex-start;
+  }
+
+  .ele-cron-panel-options {
+    white-space: normal;
+    padding: 6px 0 0 2px;
+    box-sizing: border-box;
+
+    .el-checkbox {
+      margin: 0;
+      width: 66px;
+      height: 26px;
+    }
+  }
+
+  /* 范围输入项 */
+  .ele-cron-panel-item-wrapper {
+    height: auto;
+  }
+
+  .ele-cron-panel-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .ele-cron-panel-item-input > .el-input-number {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .ele-cron-panel-item-input,
+  .ele-cron-panel-item-input.el-checkbox {
+    width: 98px;
+  }
+}
+
+/* 底栏 */
+.ele-cron-panel-extra {
+  border: 1px solid elVar('border-color', 'light');
+  border-top: none;
+  display: flex;
+}
+
+.ele-cron-panel-extra-item {
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &:first-child {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  & + .ele-cron-panel-extra-item {
+    min-width: 220px;
+    border-left: 1px solid elVar('border-color', 'light');
+  }
+}
+
+/* 结果 */
+.ele-cron-panel-result {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+  min-width: max-content;
+
+  & + .ele-cron-panel-result {
+    margin: 12px 0 8px 0;
+  }
+}
+
+.ele-cron-panel-result-item {
+  flex-shrink: 0;
+}
+
+.ele-cron-panel-result-title {
+  font-size: 12px;
+  text-align: center;
+  margin-bottom: 2px;
+}
+
+.ele-cron-panel-result-text {
+  font-size: 12px;
+  text-align: center;
+  min-width: 32px;
+  max-width: 100%;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  border-radius: 4px;
+  border: 1px solid elVar('border-color');
+  box-sizing: border-box;
+}
+
+.ele-cron-panel-result-value {
+  min-width: 270px;
+}
+
+/* 最近运行时间 */
+.ele-cron-panel-extra-header {
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+  padding: 0 16px;
+  background: elVar('fill-color', 'lighter');
+  border-bottom: 1px solid elVar('border-color', 'light');
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.ele-cron-panel-extra-body {
+  padding: 6px 12px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  .ele-cron-panel-test {
+    padding: 0;
+    margin: 0 auto;
+    width: max-content;
+    box-sizing: border-box;
+    list-style: none;
+  }
+
+  .ele-cron-panel-test-item {
+    line-height: 22px;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 4px;
+      margin: 0 6px 0 0;
+      vertical-align: 3px;
+      display: inline-block;
+      background: elVar('text-color', 'regular');
+      border-radius: 50%;
+    }
+  }
+}
+
+/* 常用列表 */
+.ele-cron-panel-list-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+
+  &:not(.is-show) {
+    pointer-events: none;
+
+    .ele-cron-panel-list-wrapper {
+      opacity: 0;
+      transform: scale(0.6);
+      pointer-events: none;
+      visibility: hidden;
+    }
+  }
+}
+
+.ele-cron-panel-list-wrapper {
+  width: max-content;
+  max-height: calc(100% - 36px);
+  margin: 36px 0 0 auto;
+  padding: 8px;
+  border-radius: 6px;
+  background: elVar('bg-color', 'overlay');
+  box-shadow: elVar('box-shadow', 'light');
+  transition: all $transition-slow;
+  transform-origin: top right;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-cron-panel-list-item {
+  padding: 6px 8px 2px 8px;
+  border: 1px solid elVar('border-color');
+  border-radius: 4px;
+  transition: all $transition-base;
+  cursor: pointer;
+
+  & + .ele-cron-panel-list-item {
+    margin-top: 8px;
+  }
+
+  &:hover {
+    background: elVar('fill-color', 'lighter');
+  }
+}
+
+.ele-cron-panel-list-item-label {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 2px;
+  opacity: 0.8;
+}
+
+.ele-cron-panel-list-item-value {
+  height: 18px;
+  line-height: 18px;
+  font-size: 12px;
+  border-radius: 4px;
+  padding: 0 6px;
+  width: max-content;
+  background: elVar('color-info', 'light-9');
+  border: 1px solid elVar('border-color');
+}
+
+/* 小屏幕 */
+@media screen and (max-width: 768px) {
+  .ele-cron-panel-content {
+    height: 220px;
+  }
+
+  .ele-cron-panel-extra {
+    flex-direction: column;
+
+    .ele-cron-panel-extra-item {
+      flex: none;
+
+      & + .ele-cron-panel-extra-item {
+        border-top: 1px solid elVar('border-color', 'light');
+        border-left: none;
+      }
+    }
+  }
+
+  .ele-cron-panel-result {
+    gap: 2px;
+  }
+}