diff --git a/apps/web-antd/src/components/cron-tab/cron-tab.vue b/apps/web-antd/src/components/cron-tab/cron-tab.vue
new file mode 100644
index 000000000..2bae0c7db
--- /dev/null
+++ b/apps/web-antd/src/components/cron-tab/cron-tab.vue
@@ -0,0 +1,1225 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  Button,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Modal,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Tabs,
+} from 'ant-design-vue';
+
+defineOptions({ name: 'Crontab' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * * ?',
+  },
+  shortcuts: {
+    type: Array as PropType<ShortcutsType[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+interface ShortcutsType {
+  text: string;
+  value: string;
+}
+
+interface CronRange {
+  start: number | string | undefined;
+  end: number | string | undefined;
+}
+
+interface CronLoop {
+  start: number | string | undefined;
+  end: number | string | undefined;
+}
+
+interface CronItem {
+  type: string;
+  range: CronRange;
+  loop: CronLoop;
+  appoint: string[];
+  last?: string;
+}
+
+interface CronValue {
+  second: CronItem;
+  minute: CronItem;
+  hour: CronItem;
+  day: CronItem;
+  month: CronItem;
+  week: CronItem & { last: string };
+  year: CronItem;
+}
+
+interface WeekOption {
+  value: string;
+  label: string;
+}
+
+interface CronData {
+  second: string[];
+  minute: string[];
+  hour: string[];
+  day: string[];
+  month: string[];
+  week: WeekOption[];
+  year: number[];
+}
+
+const defaultValue = ref('');
+const dialogVisible = ref(false);
+
+const getYear = (): number[] => {
+  const v: number[] = [];
+  const y = new Date().getFullYear();
+  for (let i = 0; i < 11; i++) {
+    v.push(y + i);
+  }
+  return v;
+};
+
+const cronValue = reactive<CronValue>({
+  second: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [],
+  },
+  minute: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [],
+  },
+  hour: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [],
+  },
+  day: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [],
+  },
+  month: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [],
+  },
+  week: {
+    type: '5',
+    range: {
+      start: '2',
+      end: '3',
+    },
+    loop: {
+      start: 0,
+      end: '2',
+    },
+    last: '2',
+    appoint: [],
+  },
+  year: {
+    type: '-1',
+    range: {
+      start: getYear()[0],
+      end: getYear()[1],
+    },
+    loop: {
+      start: getYear()[0],
+      end: 1,
+    },
+    appoint: [],
+  },
+});
+
+const data = reactive<CronData>({
+  second: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  minute: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  hour: [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+  ],
+  day: [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
+    '25',
+    '26',
+    '27',
+    '28',
+    '29',
+    '30',
+    '31',
+  ],
+  month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+  week: [
+    {
+      value: '1',
+      label: '周日',
+    },
+    {
+      value: '2',
+      label: '周一',
+    },
+    {
+      value: '3',
+      label: '周二',
+    },
+    {
+      value: '4',
+      label: '周三',
+    },
+    {
+      value: '5',
+      label: '周四',
+    },
+    {
+      value: '6',
+      label: '周五',
+    },
+    {
+      value: '7',
+      label: '周六',
+    },
+  ],
+  year: getYear(),
+});
+
+const value_second = computed(() => {
+  const v = cronValue.second;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_minute = computed(() => {
+  const v = cronValue.minute;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_hour = computed(() => {
+  const v = cronValue.hour;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_day = computed(() => {
+  const v = cronValue.day;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return 'L';
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_month = computed(() => {
+  const v = cronValue.month;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_week = computed(() => {
+  const v = cronValue.week;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.end}#${v.loop.start}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return `${v.last}L`;
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_year = computed(() => {
+  const v = cronValue.year;
+  switch (v.type) {
+    case '-1': {
+      return '';
+    }
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+watch(
+  () => cronValue.week.type,
+  (val: string) => {
+    if (val !== '5') {
+      cronValue.day.type = '5';
+    }
+  },
+);
+
+watch(
+  () => cronValue.day.type,
+  (val: string) => {
+    if (val !== '5') {
+      cronValue.week.type = '5';
+    }
+  },
+);
+
+watch(
+  () => props.modelValue,
+  () => {
+    defaultValue.value = props.modelValue;
+  },
+);
+
+onMounted(() => {
+  defaultValue.value = props.modelValue;
+});
+
+const select = ref<string>();
+
+watch(
+  () => select.value,
+  () => {
+    if (select.value === 'custom') {
+      open();
+    } else {
+      defaultValue.value = select.value || '';
+      emit('update:modelValue', defaultValue.value);
+    }
+  },
+);
+
+function open() {
+  set();
+  dialogVisible.value = true;
+}
+
+function set() {
+  defaultValue.value = props.modelValue;
+  let arr = (props.modelValue || '* * * * * ?').split(' ');
+
+  /** 简单检查 */
+  if (arr.length < 6) {
+    message.warning('cron表达式错误，已转换为默认表达式');
+    arr = '* * * * * ?'.split(' ');
+  }
+
+  /** 秒 */
+  if (arr[0] === '*') {
+    cronValue.second.type = '0';
+  } else if (arr[0]?.includes('-')) {
+    cronValue.second.type = '1';
+    cronValue.second.range.start = Number(arr[0].split('-')[0]);
+    cronValue.second.range.end = Number(arr[0].split('-')[1]);
+  } else if (arr[0]?.includes('/')) {
+    cronValue.second.type = '2';
+    cronValue.second.loop.start = Number(arr[0].split('/')[0]);
+    cronValue.second.loop.end = Number(arr[0].split('/')[1]);
+  } else {
+    cronValue.second.type = '3';
+    cronValue.second.appoint = arr[0]?.split(',') || [];
+  }
+
+  /** 分 */
+  if (arr[1] === '*') {
+    cronValue.minute.type = '0';
+  } else if (arr[1]?.includes('-')) {
+    cronValue.minute.type = '1';
+    cronValue.minute.range.start = Number(arr[1].split('-')[0]);
+    cronValue.minute.range.end = Number(arr[1].split('-')[1]);
+  } else if (arr[1]?.includes('/')) {
+    cronValue.minute.type = '2';
+    cronValue.minute.loop.start = Number(arr[1].split('/')[0]);
+    cronValue.minute.loop.end = Number(arr[1].split('/')[1]);
+  } else {
+    cronValue.minute.type = '3';
+    cronValue.minute.appoint = arr[1]?.split(',') || [];
+  }
+
+  /** 小时 */
+  if (arr[2] === '*') {
+    cronValue.hour.type = '0';
+  } else if (arr[2]?.includes('-')) {
+    cronValue.hour.type = '1';
+    cronValue.hour.range.start = Number(arr[2].split('-')[0]);
+    cronValue.hour.range.end = Number(arr[2].split('-')[1]);
+  } else if (arr[2]?.includes('/')) {
+    cronValue.hour.type = '2';
+    cronValue.hour.loop.start = Number(arr[2].split('/')[0]);
+    cronValue.hour.loop.end = Number(arr[2].split('/')[1]);
+  } else {
+    cronValue.hour.type = '3';
+    cronValue.hour.appoint = arr[2]?.split(',') || [];
+  }
+
+  /** 日 */
+  switch (arr[3]) {
+    case '*': {
+      cronValue.day.type = '0';
+
+      break;
+    }
+    case '?': {
+      cronValue.day.type = '5';
+
+      break;
+    }
+    case 'L': {
+      cronValue.day.type = '4';
+
+      break;
+    }
+    default: {
+      if (arr[3]?.includes('-')) {
+        cronValue.day.type = '1';
+        cronValue.day.range.start = Number(arr[3].split('-')[0]);
+        cronValue.day.range.end = Number(arr[3].split('-')[1]);
+      } else if (arr[3]?.includes('/')) {
+        cronValue.day.type = '2';
+        cronValue.day.loop.start = Number(arr[3].split('/')[0]);
+        cronValue.day.loop.end = Number(arr[3].split('/')[1]);
+      } else {
+        cronValue.day.type = '3';
+        cronValue.day.appoint = arr[3]?.split(',') || [];
+      }
+    }
+  }
+
+  /** 月 */
+  if (arr[4] === '*') {
+    cronValue.month.type = '0';
+  } else if (arr[4]?.includes('-')) {
+    cronValue.month.type = '1';
+    cronValue.month.range.start = Number(arr[4].split('-')[0]);
+    cronValue.month.range.end = Number(arr[4].split('-')[1]);
+  } else if (arr[4]?.includes('/')) {
+    cronValue.month.type = '2';
+    cronValue.month.loop.start = Number(arr[4].split('/')[0]);
+    cronValue.month.loop.end = Number(arr[4].split('/')[1]);
+  } else {
+    cronValue.month.type = '3';
+    cronValue.month.appoint = arr[4]?.split(',') || [];
+  }
+
+  /** 周 */
+  if (arr[5] === '*') {
+    cronValue.week.type = '0';
+  } else if (arr[5] === '?') {
+    cronValue.week.type = '5';
+  } else if (arr[5]?.includes('-')) {
+    cronValue.week.type = '1';
+    cronValue.week.range.start = arr[5].split('-')[0] || '';
+    cronValue.week.range.end = arr[5].split('-')[1] || '';
+  } else if (arr[5]?.includes('#')) {
+    cronValue.week.type = '2';
+    cronValue.week.loop.start = Number(arr[5].split('#')[1]);
+    cronValue.week.loop.end = arr[5].split('#')[0] || '';
+  } else if (arr[5]?.includes('L')) {
+    cronValue.week.type = '4';
+    cronValue.week.last = arr[5].split('L')[0] || '';
+  } else {
+    cronValue.week.type = '3';
+    cronValue.week.appoint = arr[5]?.split(',') || [];
+  }
+
+  /** 年 */
+  if (!arr[6]) {
+    cronValue.year.type = '-1';
+  } else if (arr[6] === '*') {
+    cronValue.year.type = '0';
+  } else if (arr[6]?.includes('-')) {
+    cronValue.year.type = '1';
+    cronValue.year.range.start = Number(arr[6].split('-')[0]);
+    cronValue.year.range.end = Number(arr[6].split('-')[1]);
+  } else if (arr[6]?.includes('/')) {
+    cronValue.year.type = '2';
+    cronValue.year.loop.start = Number(arr[6].split('/')[1]);
+    cronValue.year.loop.end = Number(arr[6].split('/')[0]);
+  } else {
+    cronValue.year.type = '3';
+    cronValue.year.appoint = arr[6]?.split(',') || [];
+  }
+}
+
+function submit() {
+  const year = value_year.value ? ` ${value_year.value}` : '';
+  defaultValue.value = `${value_second.value} ${value_minute.value} ${
+    value_hour.value
+  } ${value_day.value} ${value_month.value} ${value_week.value}${year}`;
+  emit('update:modelValue', defaultValue.value);
+  dialogVisible.value = false;
+}
+
+function inputChange() {
+  emit('update:modelValue', defaultValue.value);
+}
+</script>
+
+<template>
+  <Input
+    v-model:value="defaultValue"
+    class="input-with-select"
+    v-bind="$attrs"
+    @input="inputChange"
+  >
+    <template #addonAfter>
+      <Select v-model:value="select" placeholder="生成器" style="width: 115px">
+        <Select.Option value="0 * * * * ?">每分钟</Select.Option>
+        <Select.Option value="0 0 * * * ?">每小时</Select.Option>
+        <Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
+        <Select.Option value="0 0 0 1 * ?">每月一号零点</Select.Option>
+        <Select.Option value="0 0 0 L * ?">每月最后一天零点</Select.Option>
+        <Select.Option value="0 0 0 ? * 1">每周星期日零点</Select.Option>
+        <Select.Option
+          v-for="(item, index) in shortcuts"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </Select.Option>
+        <Select.Option value="custom">自定义</Select.Option>
+      </Select>
+    </template>
+  </Input>
+
+  <Modal
+    v-model:open="dialogVisible"
+    :width="720"
+    destroy-on-close
+    title="cron规则生成器"
+  >
+    <div class="sc-cron">
+      <Tabs>
+        <Tabs.TabPane key="second">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>秒</h2>
+              <h4>{{ value_second }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.second.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.second.type === '1'" label="范围">
+              <InputNumber
+                v-model:value="cronValue.second.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model:value="cronValue.second.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.second.type === '2'" label="间隔">
+              <InputNumber
+                v-model:value="cronValue.second.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒开始，每
+              <InputNumber
+                v-model:value="cronValue.second.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.second.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.second.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.second"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="minute">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>分钟</h2>
+              <h4>{{ value_minute }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.minute.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.minute.type === '1'" label="范围">
+              <InputNumber
+                v-model:value="cronValue.minute.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model:value="cronValue.minute.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.minute.type === '2'" label="间隔">
+              <InputNumber
+                v-model:value="cronValue.minute.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟开始，每
+              <InputNumber
+                v-model:value="cronValue.minute.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.minute.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.minute.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.minute"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="hour">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>小时</h2>
+              <h4>{{ value_hour }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.hour.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.hour.type === '1'" label="范围">
+              <InputNumber
+                v-model:value="cronValue.hour.range.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model:value="cronValue.hour.range.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.hour.type === '2'" label="间隔">
+              <InputNumber
+                v-model:value="cronValue.hour.loop.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时开始，每
+              <InputNumber
+                v-model:value="cronValue.hour.loop.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.hour.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.hour.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.hour"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="day">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>日</h2>
+              <h4>{{ value_day }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.day.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+                <RadioButton value="4">本月最后一天</RadioButton>
+                <RadioButton value="5">不指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.day.type === '1'" label="范围">
+              <InputNumber
+                v-model:value="cronValue.day.range.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model:value="cronValue.day.range.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.day.type === '2'" label="间隔">
+              <InputNumber
+                v-model:value="cronValue.day.loop.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              号开始，每
+              <InputNumber
+                v-model:value="cronValue.day.loop.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              天执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.day.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.day.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.day"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="month">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>月</h2>
+              <h4>{{ value_month }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.month.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.month.type === '1'" label="范围">
+              <InputNumber
+                v-model:value="cronValue.month.range.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model:value="cronValue.month.range.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.month.type === '2'" label="间隔">
+              <InputNumber
+                v-model:value="cronValue.month.loop.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月开始，每
+              <InputNumber
+                v-model:value="cronValue.month.loop.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.month.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.month.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.month"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="week">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>周</h2>
+              <h4>{{ value_week }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.week.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+                <RadioButton value="4">本月最后一周</RadioButton>
+                <RadioButton value="5">不指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '1'" label="范围">
+              <Select v-model:value="cronValue.week.range.start">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+              <span style="padding: 0 15px">-</span>
+              <Select v-model:value="cronValue.week.range.end">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '2'" label="间隔">
+              第
+              <InputNumber
+                v-model:value="cronValue.week.loop.start"
+                :max="4"
+                :min="1"
+                controls-position="right"
+              />
+              周的星期
+              <Select v-model:value="cronValue.week.loop.end">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+              执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.week.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '4'" label="最后一周">
+              <Select v-model:value="cronValue.week.last">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="year">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>年</h2>
+              <h4>{{ value_year }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model:value="cronValue.year.type">
+                <RadioButton value="-1">忽略</RadioButton>
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '1'" label="范围">
+              <InputNumber
+                v-model:value="cronValue.year.range.start"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model:value="cronValue.year.range.end"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '2'" label="间隔">
+              <InputNumber
+                v-model:value="cronValue.year.loop.start"
+                controls-position="right"
+              />
+              年开始，每
+              <InputNumber
+                v-model:value="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '3'" label="指定">
+              <Select
+                v-model:value="cronValue.year.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.year"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+
+    <template #footer>
+      <Button @click="dialogVisible = false">取 消</Button>
+      <Button type="primary" @click="submit()">确 认</Button>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+.sc-cron :deep(.ant-tabs-tab) {
+  height: auto;
+  padding: 0 7px;
+  line-height: 1;
+  vertical-align: bottom;
+}
+
+.sc-cron-num {
+  width: 100%;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.sc-cron-num h2 {
+  margin-bottom: 15px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.sc-cron-num h4 {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 15px;
+  font-size: 12px;
+  line-height: 30px;
+  background: var(--ant-primary-color-active-bg);
+  border-radius: 4px;
+}
+
+.sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
+  color: #fff;
+  background: var(--ant-primary-color);
+}
+
+[data-theme='dark'] .sc-cron-num h4 {
+  background: var(--ant-color-white);
+}
+
+.input-with-select .ant-input-group-addon {
+  background-color: var(--ant-color-fill-alter);
+}
+</style>
diff --git a/apps/web-antd/src/components/cron-tab/index.ts b/apps/web-antd/src/components/cron-tab/index.ts
new file mode 100644
index 000000000..8f4baae59
--- /dev/null
+++ b/apps/web-antd/src/components/cron-tab/index.ts
@@ -0,0 +1 @@
+export { default as CronTab } from './cron-tab.vue';
diff --git a/apps/web-antd/src/components/cropper/cropper-avatar.vue b/apps/web-antd/src/components/cropper/cropper-avatar.vue
index 2c9e5703d..11873aa90 100644
--- a/apps/web-antd/src/components/cropper/cropper-avatar.vue
+++ b/apps/web-antd/src/components/cropper/cropper-avatar.vue
@@ -75,7 +75,7 @@ defineExpose({
   <div class="inline-block text-center" :style="getStyle">
     <!-- 图片包装器 -->
     <div
-      class="group relative cursor-pointer overflow-hidden rounded-full border border-gray-200 bg-white"
+      class="bg-card group relative cursor-pointer overflow-hidden rounded-full border border-gray-200"
       :style="getImageWrapperStyle"
       @click="openModal"
     >
diff --git a/apps/web-antd/src/components/dict-tag/dict-tag.vue b/apps/web-antd/src/components/dict-tag/dict-tag.vue
index 8aba7d261..c51b523c8 100644
--- a/apps/web-antd/src/components/dict-tag/dict-tag.vue
+++ b/apps/web-antd/src/components/dict-tag/dict-tag.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { isValidColor, TinyColor } from '@vben/utils';
+
 import { Tag } from 'ant-design-vue';
 
-// import { isHexColor } from '@/utils/color' // TODO @芋艿：【可优化】增加 cssClass 的处理 https://gitee.com/yudaocode/yudao-ui-admin-vben/blob/v2.4.1/src/components/DictTag/src/DictTag.vue#L60
 import { getDictObj } from '#/utils';
 
 interface DictTagProps {
@@ -23,11 +24,6 @@ interface DictTagProps {
 
 const props = defineProps<DictTagProps>();
 
-function isHexColor(color: string) {
-  const reg = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
-  return reg.test(color);
-}
-
 /** 获取字典标签 */
 const dictTag = computed(() => {
   // 校验参数有效性
@@ -63,6 +59,10 @@ const dictTag = computed(() => {
     }
   }
 
+  if (isValidColor(dict.cssClass)) {
+    colorType = new TinyColor(dict.cssClass).toHexString();
+  }
+
   return {
     label: dict.label || '',
     colorType,
@@ -74,13 +74,7 @@ const dictTag = computed(() => {
 <template>
   <Tag
     v-if="dictTag"
-    :color="
-      dictTag.colorType
-        ? dictTag.colorType
-        : dictTag.cssClass && isHexColor(dictTag.cssClass)
-          ? dictTag.cssClass
-          : ''
-    "
+    :color="dictTag.colorType ? dictTag.colorType : dictTag.cssClass"
   >
     {{ dictTag.label }}
   </Tag>
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
index 14ebe84eb..dcee1a80b 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-designer.vue
@@ -238,7 +238,7 @@ defineExpose({ validate });
     <ErrorModal title="流程设计校验不通过" class="w-2/5">
       <div class="mb-2 text-base">以下节点配置不完善，请修改相关配置</div>
       <div
-        class="mb-3 rounded-md bg-gray-100 p-2 text-sm"
+        class="mb-3 rounded-md p-2 text-sm"
         v-for="(item, index) in errorModalApi.getData()"
         :key="index"
       >
diff --git a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
index d50bd9d12..dc2be9d05 100644
--- a/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue
@@ -201,7 +201,7 @@ onMounted(() => {
 </script>
 <template>
   <div class="simple-process-model-container">
-    <div class="absolute right-0 top-0 bg-white">
+    <div class="bg-card absolute right-0 top-0">
       <Row type="flex" justify="end">
         <ButtonGroup key="scale-control">
           <Button v-if="!readonly" @click="exportJson">
@@ -258,7 +258,7 @@ onMounted(() => {
   >
     <div class="mb-2">以下节点内容不完善，请修改后保存</div>
     <div
-      class="line-height-normal mb-3 rounded bg-gray-100 p-2"
+      class="line-height-normal mb-3 rounded p-2"
       v-for="(item, index) in errorNodes"
       :key="index"
     >
diff --git a/apps/web-antd/src/components/table-action/table-action.vue b/apps/web-antd/src/components/table-action/table-action.vue
index 21c8197df..88e47d356 100644
--- a/apps/web-antd/src/components/table-action/table-action.vue
+++ b/apps/web-antd/src/components/table-action/table-action.vue
@@ -237,7 +237,7 @@ function getTooltipProps(tooltip: any | string) {
 }
 
 function handleMenuClick(e: any) {
-  const action = unref(getDropdownList)[e.key];
+  const action = getDropdownList.value[e.key];
   if (action.onClick && isFunction(action.onClick)) {
     action.onClick();
   }
@@ -293,10 +293,12 @@ function getActionKey(action: ActionItem, index: number) {
         </Button>
       </slot>
       <template #overlay>
-        <Menu @click="handleMenuClick">
+        <Menu>
           <Menu.Item
             v-for="(action, index) in getDropdownList"
-            :key="`dropdown-${index}`"
+            :key="index"
+            :disabled="action.disabled"
+            @click="!action.popConfirm && handleMenuClick({ key: index })"
           >
             <template v-if="action.popConfirm">
               <Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
diff --git a/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue b/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
index 23b81ce47..1b9c10b77 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
@@ -66,7 +66,7 @@ function handleClick(doc: any) {
       <div
         v-for="(doc, index) in documentList"
         :key="index"
-        class="cursor-pointer rounded-lg bg-white p-2 px-3 transition-all hover:bg-blue-50"
+        class="bg-card cursor-pointer rounded-lg p-2 px-3 transition-all hover:bg-blue-50"
         @click="handleClick(doc)"
       >
         <div class="mb-1 text-sm text-gray-600">
@@ -89,7 +89,7 @@ function handleClick(doc: any) {
           class="border-b-solid border-b-gray-200 p-3 last:border-b-0"
         >
           <div
-            class="mb-2 block w-fit rounded-sm bg-gray-50 px-2 py-1 text-xs text-gray-400"
+            class="mb-2 block w-fit rounded-sm px-2 py-1 text-xs text-gray-400"
           >
             分段 {{ segment.id }}
           </div>
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
index 95ccbe729..3daa16865 100644
--- a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
@@ -204,7 +204,7 @@ onUnmounted(async () => {
     </div>
 
     <div
-      class="sticky bottom-0 z-50 flex h-16 items-center justify-center bg-white shadow-sm"
+      class="bg-card sticky bottom-0 z-50 flex h-16 items-center justify-center shadow-sm"
     >
       <Pagination
         :total="pageTotal"
diff --git a/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue b/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
index f3354bd19..4c59c08a3 100644
--- a/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
@@ -231,7 +231,7 @@ defineExpose({ settingValues });
         @click="handleSizeClick(imageSize)"
       >
         <div
-          class="flex h-12 w-12 flex-col items-center justify-center rounded-lg border bg-white p-0"
+          class="bg-card flex h-12 w-12 flex-col items-center justify-center rounded-lg border p-0"
           :class="[
             selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
           ]"
diff --git a/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue b/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
index 0e565a6dd..d50c7ba4c 100644
--- a/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
@@ -182,7 +182,7 @@ defineExpose({ settingValues });
         @click="handleSizeClick(imageSize)"
       >
         <div
-          class="flex h-12 w-12 items-center justify-center rounded-lg border bg-white p-0"
+          class="bg-card flex h-12 w-12 items-center justify-center rounded-lg border p-0"
           :class="[
             selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
           ]"
diff --git a/apps/web-antd/src/views/ai/image/index/index.vue b/apps/web-antd/src/views/ai/image/index/index.vue
index bc7ab901a..0d8203cb8 100644
--- a/apps/web-antd/src/views/ai/image/index/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/index.vue
@@ -90,13 +90,12 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <div class="absolute inset-0 flex h-full w-full flex-row bg-gray-50">
+    <div class="bg-card absolute inset-0 flex h-full w-full flex-row">
       <div class="left-0 flex w-96 flex-col p-4">
         <div class="segmented flex justify-center">
           <Segmented
             v-model:value="selectPlatform"
             :options="platformOptions"
-            class="bg-gray-100"
           />
         </div>
         <div class="mt-8 h-full overflow-y-auto">
@@ -126,7 +125,7 @@ onMounted(async () => {
           />
         </div>
       </div>
-      <div class="ml-4 flex-1 bg-white">
+      <div class="bg-card ml-4 flex-1">
         <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
       </div>
     </div>
diff --git a/apps/web-antd/src/views/ai/image/square/index.vue b/apps/web-antd/src/views/ai/image/square/index.vue
index d92fb65c5..24b9af530 100644
--- a/apps/web-antd/src/views/ai/image/square/index.vue
+++ b/apps/web-antd/src/views/ai/image/square/index.vue
@@ -45,7 +45,7 @@ onMounted(async () => {
 </script>
 <template>
   <Page auto-content-height>
-    <div class="bg-white p-5">
+    <div class="bg-card p-5">
       <Input.Search
         v-model="queryParams.prompt"
         class="mb-5 w-full"
@@ -54,12 +54,12 @@ onMounted(async () => {
         @keyup.enter="handleQuery"
       />
       <div
-        class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 bg-white shadow-sm"
+        class="bg-card grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 shadow-sm"
       >
         <div
           v-for="item in list"
           :key="item.id"
-          class="relative cursor-pointer overflow-hidden bg-white transition-transform duration-300 hover:scale-105"
+          class="bg-card relative cursor-pointer overflow-hidden transition-transform duration-300 hover:scale-105"
         >
           <Image
             :src="item.picUrl"
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue b/apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue
index 15ea0b33e..ae18c5699 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue
@@ -237,7 +237,7 @@ onMounted(async () => {
         <div v-else class="text-gray-400">暂无上传文件</div>
       </div>
       <!-- 文件内容预览 -->
-      <div class="max-h-[600px] overflow-y-auto rounded-md bg-gray-50 p-4">
+      <div class="max-h-[600px] overflow-y-auto rounded-md p-4">
         <div v-if="splitLoading" class="flex items-center justify-center py-5">
           <IconifyIcon icon="lucide:loader" class="is-loading" />
           <span class="ml-2.5">正在加载分段内容...</span>
@@ -258,7 +258,7 @@ onMounted(async () => {
               分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
               {{ segment.tokens || 0 }} Token
             </div>
-            <div class="rounded-md bg-white p-2">
+            <div class="bg-card rounded-md p-2">
               {{ segment.content }}
             </div>
           </div>
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/index.vue b/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
index 19eb88ecf..d0dc83ca5 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
@@ -131,7 +131,7 @@ defineExpose({
     <div class="mx-auto">
       <!-- 头部导航栏 -->
       <div
-        class="absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b bg-white px-4"
+        class="bg-card absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b px-4"
       >
         <!-- 左侧标题 -->
         <div class="flex w-48 items-center overflow-hidden">
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/index.vue b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
index 963728abc..b33bcbd1c 100644
--- a/apps/web-antd/src/views/ai/knowledge/segment/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
@@ -147,7 +147,7 @@ onMounted(() => {
       </template>
       <template #expand_content="{ row }">
         <div
-          class="whitespace-pre-wrap border-l-4 border-blue-500 bg-gray-100 px-2.5 py-5 leading-5"
+          class="whitespace-pre-wrap border-l-4 border-blue-500 px-2.5 py-5 leading-5"
         >
           <div class="mb-2 text-sm font-bold text-gray-600">完整内容：</div>
           {{ row.content }}
diff --git a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue b/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
index c3cc28149..a7e33828c 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
@@ -23,7 +23,7 @@ defineExpose({
 });
 </script>
 <template>
-  <div class="flex w-80 flex-col bg-gray-50 p-5">
+  <div class="bg-card flex w-80 flex-col rounded-lg p-5">
     <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
       思维导图创作中心
     </h3>
diff --git a/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue b/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
index 3fced3605..3a2b7df9a 100644
--- a/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
+++ b/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
@@ -40,7 +40,7 @@ function audioTimeUpdate(args: any) {
 
 <template>
   <div
-    class="b-1 b-l-none h-18 flex items-center justify-between border border-solid border-rose-100 bg-white px-2"
+    class="b-1 b-l-none h-18 bg-card flex items-center justify-between border border-solid border-rose-100 px-2"
   >
     <!-- 歌曲信息 -->
     <div class="flex gap-2.5">
diff --git a/apps/web-antd/src/views/ai/workflow/form/index.vue b/apps/web-antd/src/views/ai/workflow/form/index.vue
index af48158b5..29e23179e 100644
--- a/apps/web-antd/src/views/ai/workflow/form/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/form/index.vue
@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
     <div class="mx-auto">
       <!-- 头部导航栏 -->
       <div
-        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
+        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
       >
         <!-- 左侧标题 -->
         <div class="flex w-48 items-center overflow-hidden">
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 77e77225d..82dd908c8 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -400,7 +400,7 @@ onBeforeUnmount(() => {
     <div class="mx-auto">
       <!-- 头部导航栏 -->
       <div
-        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
+        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
       >
         <!-- 左侧标题 -->
         <div class="flex w-48 items-center overflow-hidden">
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 9c1fd181e..7eacfdae7 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -335,7 +335,7 @@ defineExpose({ validate });
           <div
             v-for="user in selectedStartUsers"
             :key="user.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200"
+            class="relative flex h-9 items-center rounded-full pr-2 hover:bg-gray-200"
           >
             <Avatar
               class="m-1"
@@ -371,7 +371,7 @@ defineExpose({ validate });
           <div
             v-for="dept in selectedStartDepts"
             :key="dept.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200"
+            class="relative flex h-9 items-center rounded-full pr-2 shadow-sm hover:bg-gray-200"
           >
             <IconifyIcon icon="lucide:building" class="size-6 px-1" />
             {{ dept.name }}
@@ -398,7 +398,7 @@ defineExpose({ validate });
           <div
             v-for="user in selectedManagerUsers"
             :key="user.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200"
+            class="hover:bg-primary-500 relative flex h-9 items-center rounded-full pr-2"
           >
             <Avatar
               class="m-1"
diff --git a/apps/web-antd/src/views/infra/codegen/edit/index.vue b/apps/web-antd/src/views/infra/codegen/edit/index.vue
index 7b06dcf32..35afb2463 100644
--- a/apps/web-antd/src/views/infra/codegen/edit/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/edit/index.vue
@@ -122,13 +122,11 @@ getDetail();
 
 <template>
   <Page auto-content-height v-loading="loading">
-    <div
-      class="flex h-[95%] flex-col rounded-md bg-white p-4 dark:bg-gray-800 dark:text-gray-300"
-    >
+    <div class="bg-card flex h-[95%] flex-col rounded-md p-4">
       <Steps
         type="navigation"
         v-model:current="currentStep"
-        class="mb-8 rounded shadow-sm dark:bg-gray-700"
+        class="mb-8 rounded shadow-sm"
       >
         <Steps.Step
           v-for="(step, index) in steps"
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index 0f1e663d7..1fa6b2d5a 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -2,12 +2,13 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { formatDateTime } from '@vben/utils';
 
 import { Timeline } from 'ant-design-vue';
 
+import { CronTab } from '#/components/cron-tab';
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions } from '#/utils';
 
@@ -37,10 +38,12 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入处理器的名字',
-        // readonly: ({ values }) => !!values.id,
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !!values.id,
       },
       rules: 'required',
-      // TODO @芋艿：在修改场景下，禁止调整
     },
     {
       fieldName: 'handlerParam',
@@ -53,12 +56,8 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'cronExpression',
       label: 'CRON 表达式',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入 CRON 表达式',
-      },
+      component: markRaw(CronTab),
       rules: 'required',
-      // TODO @芋艿：未来支持动态的 CRON 表达式选择
     },
     {
       fieldName: 'retryCount',
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index f1d46c2f8..36c6148ab 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -317,10 +317,12 @@ export function useDataGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'colorType',
       title: '颜色类型',
+      slots: { default: 'colorType' },
     },
     {
       field: 'cssClass',
       title: 'CSS Class',
+      slots: { default: 'cssClass' },
     },
     {
       title: '创建时间',
diff --git a/apps/web-antd/src/views/system/dict/modules/data-grid.vue b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
index 7079c8adb..58a6158fb 100644
--- a/apps/web-antd/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
@@ -7,7 +7,7 @@ import { ref, watch } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { message, Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -177,6 +177,12 @@ watch(
           ]"
         />
       </template>
+      <template #colorType="{ row }">
+        <Tag :color="row.colorType">{{ row.colorType }}</Tag>
+      </template>
+      <template #cssClass="{ row }">
+        <Tag :color="row.cssClass">{{ row.cssClass }}</Tag>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[