diff --git a/apps/web-tdesign/src/components/cron-tab/cron-tab.vue b/apps/web-tdesign/src/components/cron-tab/cron-tab.vue
new file mode 100644
index 000000000..d6dfaef44
--- /dev/null
+++ b/apps/web-tdesign/src/components/cron-tab/cron-tab.vue
@@ -0,0 +1,966 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import type { CronData, CronValue, ShortcutsType } from './types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  Button,
+  Dialog,
+  Form,
+  Input,
+  InputNumber,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import { CronDataDefault, CronValueDefault } from './types';
+
+defineOptions({ name: 'Crontab' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * * ?',
+  },
+  shortcuts: {
+    type: Array as PropType<ShortcutsType[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const defaultValue = ref('');
+const dialogVisible = ref(false);
+
+const cronValue = reactive<CronValue>(CronValueDefault);
+
+const data = reactive<CronData>(CronDataDefault);
+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="defaultValue"
+    class="input-with-select"
+    v-bind="$attrs"
+    @input="inputChange"
+  >
+    <template #addonAfter>
+      <Select v-model="select" placeholder="生成器" class="w-36">
+        <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>
+
+  <Dialog
+    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="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="cronValue.second.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="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="cronValue.second.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒开始，每
+              <InputNumber
+                v-model="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="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="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="cronValue.minute.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="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="cronValue.minute.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟开始，每
+              <InputNumber
+                v-model="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="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="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="cronValue.hour.range.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="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="cronValue.hour.loop.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时开始，每
+              <InputNumber
+                v-model="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="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="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="cronValue.day.range.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="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="cronValue.day.loop.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              号开始，每
+              <InputNumber
+                v-model="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="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="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="cronValue.month.range.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="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="cronValue.month.loop.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月开始，每
+              <InputNumber
+                v-model="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="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="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="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="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="cronValue.week.loop.start"
+                :max="4"
+                :min="1"
+                controls-position="right"
+              />
+              周的星期
+              <Select v-model="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="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="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="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="cronValue.year.range.start"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.year.range.end"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.year.loop.start"
+                controls-position="right"
+              />
+              年开始，每
+              <InputNumber
+                v-model="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '3'" label="指定">
+              <Select
+                v-model="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 theme="primary" @click="submit()">确 认</Button>
+    </template>
+  </Dialog>
+</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: hsl(var(--primary) / 10%);
+  border-radius: 4px;
+}
+
+.sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
+  color: #fff;
+  background: hsl(var(--primary));
+}
+
+[data-theme='dark'] .sc-cron-num h4 {
+  background: hsl(var(--white));
+}
+
+.input-with-select .ant-input-group-addon {
+  background-color: hsl(var(--muted));
+}
+</style>
diff --git a/apps/web-tdesign/src/components/cron-tab/index.ts b/apps/web-tdesign/src/components/cron-tab/index.ts
new file mode 100644
index 000000000..8f4baae59
--- /dev/null
+++ b/apps/web-tdesign/src/components/cron-tab/index.ts
@@ -0,0 +1 @@
+export { default as CronTab } from './cron-tab.vue';
diff --git a/apps/web-tdesign/src/components/cron-tab/types.ts b/apps/web-tdesign/src/components/cron-tab/types.ts
new file mode 100644
index 000000000..2adf942b7
--- /dev/null
+++ b/apps/web-tdesign/src/components/cron-tab/types.ts
@@ -0,0 +1,266 @@
+export interface ShortcutsType {
+  text: string;
+  value: string;
+}
+
+export interface CronRange {
+  start: number | string | undefined;
+  end: number | string | undefined;
+}
+
+export interface CronLoop {
+  start: number | string | undefined;
+  end: number | string | undefined;
+}
+
+export interface CronItem {
+  type: string;
+  range: CronRange;
+  loop: CronLoop;
+  appoint: string[];
+  last?: string;
+}
+
+export interface CronValue {
+  second: CronItem;
+  minute: CronItem;
+  hour: CronItem;
+  day: CronItem;
+  month: CronItem;
+  week: CronItem & { last: string };
+  year: CronItem;
+}
+
+export interface WeekOption {
+  value: string;
+  label: string;
+}
+
+export interface CronData {
+  second: string[];
+  minute: string[];
+  hour: string[];
+  day: string[];
+  month: string[];
+  week: WeekOption[];
+  year: number[];
+}
+
+const getYear = (): number[] => {
+  const v: number[] = [];
+  const y = new Date().getFullYear();
+  for (let i = 0; i < 11; i++) {
+    v.push(y + i);
+  }
+  return v;
+};
+
+export const CronValueDefault: 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: [],
+  },
+};
+
+export const CronDataDefault: 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(),
+};
diff --git a/apps/web-tdesign/src/components/cropper/cropper-avatar.vue b/apps/web-tdesign/src/components/cropper/cropper-avatar.vue
new file mode 100644
index 000000000..5acb23fdc
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/cropper-avatar.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import type { CropperAvatarProps } from './typing';
+
+import { computed, ref, unref, watch, watchEffect } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { Button } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import cropperModal from './cropper-modal.vue';
+
+defineOptions({ name: 'CropperAvatar' });
+
+const props = withDefaults(defineProps<CropperAvatarProps>(), {
+  width: 200,
+  value: '',
+  showBtn: true,
+  btnProps: () => ({}),
+  btnText: '',
+  uploadApi: () => Promise.resolve(),
+  size: 5,
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const sourceValue = ref(props.value || '');
+const [CropperModal, modalApi] = useVbenModal({
+  connectedComponent: cropperModal,
+});
+
+const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
+
+const getIconWidth = computed(
+  () => `${Number.parseInt(`${props.width}`.replace(/px/, '')) / 2}px`,
+);
+
+const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+const getImageWrapperStyle = computed(
+  (): CSSProperties => ({ height: unref(getWidth), width: unref(getWidth) }),
+);
+
+watchEffect(() => {
+  sourceValue.value = props.value || '';
+});
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v);
+  },
+);
+
+function handleUploadSuccess({ data, source }: any) {
+  sourceValue.value = source;
+  emit('change', { data, source });
+  message.success($t('ui.cropper.uploadSuccess'));
+}
+
+const closeModal = () => modalApi.close();
+const openModal = () => modalApi.open();
+
+defineExpose({
+  closeModal,
+  openModal,
+});
+</script>
+
+<template>
+  <!-- 头像容器 -->
+  <div class="inline-block text-center" :style="getStyle">
+    <!-- 图片包装器 -->
+    <div
+      class="bg-card group relative cursor-pointer overflow-hidden rounded-full border border-gray-200"
+      :style="getImageWrapperStyle"
+      @click="openModal"
+    >
+      <!-- 遮罩层 -->
+      <div
+        class="duration-400 absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-40 opacity-0 transition-opacity group-hover:opacity-100"
+        :style="getImageWrapperStyle"
+      >
+        <IconifyIcon
+          icon="lucide:cloud-upload"
+          class="m-auto text-gray-400"
+          :style="{
+            ...getImageWrapperStyle,
+            width: getIconWidth,
+            height: getIconWidth,
+            lineHeight: getIconWidth,
+          }"
+        />
+      </div>
+      <!-- 头像图片 -->
+      <img
+        v-if="sourceValue"
+        :src="sourceValue"
+        alt="avatar"
+        class="h-full w-full object-cover"
+      />
+    </div>
+    <!-- 上传按钮 -->
+    <Button
+      v-if="showBtn"
+      class="mx-auto mt-2"
+      @click="openModal"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : $t('ui.cropper.selectImage') }}
+    </Button>
+
+    <CropperModal
+      :size="size"
+      :src="sourceValue"
+      :upload-api="uploadApi"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/components/cropper/cropper-modal.vue b/apps/web-tdesign/src/components/cropper/cropper-modal.vue
new file mode 100644
index 000000000..35e827a23
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/cropper-modal.vue
@@ -0,0 +1,304 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'tdesign-vue-next';
+
+import type { CropendResult, CropperModalProps, CropperType } from './typing';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { dataURLtoBlob, isFunction, isNumber } from '@vben/utils';
+
+import { Avatar, Button, Space, Tooltip, Upload } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import CropperImage from './cropper.vue';
+
+defineOptions({ name: 'CropperModal' });
+
+const props = withDefaults(defineProps<CropperModalProps>(), {
+  circled: true,
+  size: 0,
+  src: '',
+  uploadApi: () => Promise.resolve(),
+});
+
+const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
+
+let filename = '';
+const src = ref(props.src || '');
+const previewSource = ref('');
+const cropper = ref<CropperType>();
+let scaleX = 1;
+let scaleY = 1;
+
+const [Modal, modalApi] = useVbenModal({
+  onConfirm: handleOk,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // 打开时，进行 loading 加载。后续 CropperImage 组件加载完毕，会自动关闭 loading（通过 handleReady）
+      modalLoading(true);
+      const img = new Image();
+      img.src = src.value;
+      img.addEventListener('load', () => {
+        modalLoading(false);
+      });
+      img.addEventListener('error', () => {
+        modalLoading(false);
+      });
+    } else {
+      // 关闭时，清空右侧预览
+      previewSource.value = '';
+      modalLoading(false);
+    }
+  },
+});
+
+function modalLoading(loading: boolean) {
+  modalApi.setState({ confirmLoading: loading, loading });
+}
+
+// Block upload
+function handleBeforeUpload(file: UploadFile) {
+  if (
+    file &&
+    props.size > 0 &&
+    isNumber(file.size) &&
+    file.size > 1024 * 1024 * props.size
+  ) {
+    emit('uploadError', { msg: $t('ui.cropper.imageTooBig') });
+    return false;
+  }
+  const reader = new FileReader();
+  reader.readAsDataURL(file.raw as Blob);
+  src.value = '';
+  previewSource.value = '';
+  reader.addEventListener('load', (e) => {
+    src.value = (e.target?.result as string) ?? '';
+    filename = file.name ?? '';
+  });
+  return false;
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64;
+}
+
+function handleReady(cropperInstance: CropperType) {
+  cropper.value = cropperInstance;
+  // 画布加载完毕 关闭 loading
+  modalLoading(false);
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1;
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1;
+  }
+  (cropper?.value as any)?.[event]?.(arg);
+}
+
+async function handleOk() {
+  const uploadApi = props.uploadApi;
+  if (uploadApi && isFunction(uploadApi)) {
+    if (!previewSource.value) {
+      message.warning('未选择图片');
+      return;
+    }
+    const blob = dataURLtoBlob(previewSource.value);
+    try {
+      modalLoading(true);
+      const url = await uploadApi({ file: blob, filename, name: 'file' });
+      emit('uploadSuccess', { data: url, source: previewSource.value });
+      await modalApi.close();
+    } finally {
+      modalLoading(false);
+    }
+  }
+}
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :confirm-text="$t('ui.cropper.okText')"
+    :fullscreen-button="false"
+    :title="$t('ui.cropper.modalTitle')"
+    class="w-2/3"
+  >
+    <div class="flex h-96">
+      <!-- 左侧区域 -->
+      <div class="h-full w-3/5">
+        <!-- 裁剪器容器 -->
+        <div
+          class="relative h-[300px] bg-gradient-to-b from-neutral-50 to-neutral-200"
+        >
+          <CropperImage
+            v-if="src"
+            :circled="circled"
+            :src="src"
+            height="300px"
+            @cropend="handleCropend"
+            @ready="handleReady"
+          />
+        </div>
+
+        <!-- 工具栏 -->
+        <div class="mt-4 flex items-center justify-between">
+          <Upload
+            :before-upload="handleBeforeUpload"
+            :file-list="[]"
+            accept="image/*"
+          >
+            <Tooltip :title="$t('ui.cropper.selectImage')" placement="bottom">
+              <Button size="small" theme="primary">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:upload" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip :title="$t('ui.cropper.btn_reset')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('reset')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:rotate-ccw" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip
+              :title="$t('ui.cropper.btn_rotate_left')"
+              placement="bottom"
+            >
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('rotate', -45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="ant-design:rotate-left-outlined" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip
+              :title="$t('ui.cropper.btn_rotate_right')"
+              placement="bottom"
+            >
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('rotate', 45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="ant-design:rotate-right-outlined" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_scale_x')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('scaleX')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="vaadin:arrows-long-h" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_scale_y')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('scaleY')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="vaadin:arrows-long-v" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_zoom_in')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('zoom', 0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:zoom-in" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_zoom_out')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('zoom', -0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:zoom-out" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+
+      <!-- 右侧区域 -->
+      <div class="h-full w-2/5">
+        <!-- 预览区域 -->
+        <div
+          class="mx-auto h-56 w-56 overflow-hidden rounded-full border border-gray-200"
+        >
+          <img
+            v-if="previewSource"
+            :alt="$t('ui.cropper.preview')"
+            :src="previewSource"
+            class="h-full w-full object-cover"
+          />
+        </div>
+
+        <!-- 头像组合预览 -->
+        <template v-if="previewSource">
+          <div
+            class="mt-2 flex items-center justify-around border-t border-gray-200 pt-2"
+          >
+            <Avatar :src="previewSource" size="large" />
+            <Avatar size="48" :src="previewSource" />
+            <Avatar size="64" :src="previewSource" />
+            <Avatar size="80" :src="previewSource" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/components/cropper/cropper.vue b/apps/web-tdesign/src/components/cropper/cropper.vue
new file mode 100644
index 000000000..cc8836c9f
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/cropper.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import type { CropperProps } from './typing';
+
+import { computed, onMounted, onUnmounted, ref, unref, useAttrs } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+import Cropper from 'cropperjs';
+
+import { defaultOptions } from './typing';
+
+import 'cropperjs/dist/cropper.css';
+
+defineOptions({ name: 'CropperImage' });
+
+const props = withDefaults(defineProps<CropperProps>(), {
+  src: '',
+  alt: '',
+  circled: false,
+  realTimePreview: true,
+  height: '360px',
+  crossorigin: undefined,
+  imageStyle: () => ({}),
+  options: () => ({}),
+});
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError']);
+const attrs = useAttrs();
+
+type ElRef<T extends HTMLElement = HTMLDivElement> = null | T;
+const imgElRef = ref<ElRef<HTMLImageElement>>();
+const cropper = ref<Cropper | null>();
+const isReady = ref(false);
+
+const debounceRealTimeCropped = useDebounceFn(realTimeCropped, 80);
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle,
+  };
+});
+
+const getClass = computed(() => {
+  return [
+    attrs.class,
+    {
+      'cropper-image--circled': props.circled,
+    },
+  ];
+});
+
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${`${props.height}`.replace(/px/, '')}px` };
+});
+
+onMounted(init);
+
+onUnmounted(() => {
+  cropper.value?.destroy();
+});
+
+async function init() {
+  const imgEl = unref(imgElRef);
+  if (!imgEl) {
+    return;
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    ready: () => {
+      isReady.value = true;
+      realTimeCropped();
+      emit('ready', cropper.value);
+    },
+    crop() {
+      debounceRealTimeCropped();
+    },
+    zoom() {
+      debounceRealTimeCropped();
+    },
+    cropmove() {
+      debounceRealTimeCropped();
+    },
+    ...props.options,
+  });
+}
+
+// Real-time display preview
+function realTimeCropped() {
+  props.realTimePreview && cropped();
+}
+
+// event: return base64 and width and height information after cropping
+function cropped() {
+  if (!cropper.value) {
+    return;
+  }
+  const imgInfo = cropper.value.getData();
+  const canvas = props.circled
+    ? getRoundedCanvas()
+    : cropper.value.getCroppedCanvas();
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+    const fileReader: FileReader = new FileReader();
+    fileReader.readAsDataURL(blob);
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo,
+      });
+    };
+    fileReader.addEventListener('error', () => {
+      emit('cropendError');
+    });
+  }, 'image/png');
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas();
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  const width = sourceCanvas.width;
+  const height = sourceCanvas.height;
+  canvas.width = width;
+  canvas.height = height;
+  context.imageSmoothingEnabled = true;
+  context.drawImage(sourceCanvas, 0, 0, width, height);
+  context.globalCompositeOperation = 'destination-in';
+  context.beginPath();
+  context.arc(
+    width / 2,
+    height / 2,
+    Math.min(width, height) / 2,
+    0,
+    2 * Math.PI,
+    true,
+  );
+  context.fill();
+  return canvas;
+}
+</script>
+
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :src="src"
+      :style="getImageStyle"
+      class="h-auto max-w-full"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.cropper-image {
+  &--circled {
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-tdesign/src/components/cropper/index.ts b/apps/web-tdesign/src/components/cropper/index.ts
new file mode 100644
index 000000000..43fd89ff3
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/index.ts
@@ -0,0 +1,3 @@
+export { default as CropperAvatar } from './cropper-avatar.vue';
+export { default as CropperImage } from './cropper.vue';
+export type { CropperType } from './typing';
diff --git a/apps/web-tdesign/src/components/cropper/typing.ts b/apps/web-tdesign/src/components/cropper/typing.ts
new file mode 100644
index 000000000..8293079b3
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/typing.ts
@@ -0,0 +1,68 @@
+import type Cropper from 'cropperjs';
+import type { ButtonProps } from 'tdesign-vue-next';
+
+import type { CSSProperties } from 'vue';
+
+export interface apiFunParams {
+  file: Blob;
+  filename: string;
+  name: string;
+}
+
+export interface CropendResult {
+  imgBase64: string;
+  imgInfo: Cropper.Data;
+}
+
+export interface CropperProps {
+  src?: string;
+  alt?: string;
+  circled?: boolean;
+  realTimePreview?: boolean;
+  height?: number | string;
+  crossorigin?: '' | 'anonymous' | 'use-credentials' | undefined;
+  imageStyle?: CSSProperties;
+  options?: Cropper.Options;
+}
+
+export interface CropperAvatarProps {
+  width?: number | string;
+  value?: string;
+  showBtn?: boolean;
+  btnProps?: ButtonProps;
+  btnText?: string;
+  uploadApi?: (params: apiFunParams) => Promise<any>;
+  size?: number;
+}
+
+export interface CropperModalProps {
+  circled?: boolean;
+  uploadApi?: (params: apiFunParams) => Promise<any>;
+  src?: string;
+  size?: number;
+}
+
+export const defaultOptions: Cropper.Options = {
+  aspectRatio: 1,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  toggleDragModeOnDblclick: true,
+  autoCrop: true,
+  background: true,
+  highlight: true,
+  center: true,
+  responsive: true,
+  restore: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  scalable: true,
+  modal: true,
+  guides: true,
+  movable: true,
+  rotatable: true,
+};
+
+export type { Cropper as CropperType };
diff --git a/apps/web-tdesign/src/components/description/description.vue b/apps/web-tdesign/src/components/description/description.vue
new file mode 100644
index 000000000..5cfc75d65
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/description.vue
@@ -0,0 +1,195 @@
+<script lang="tsx">
+import type { DescriptionsProps } from 'tdesign-vue-next';
+
+import type { CSSProperties, PropType, Slots } from 'vue';
+
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
+
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
+
+import { get, getNestedValue, isFunction } from '@vben/utils';
+
+import { Card, Descriptions } from 'tdesign-vue-next';
+
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
+    },
+    type: [Number, Object],
+  },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCard: { default: true, type: Boolean },
+};
+
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
+      }
+
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              span={span}
+            >
+              {() => {
+                if (item.slot) {
+                  return getSlot(slots, item.slot, data);
+                }
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      return (
+        <Descriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </Descriptions>
+      );
+    }
+
+    function renderCard() {
+      const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
+      // Reduce the dom level
+      if (!props.useCard) {
+        return content;
+      }
+
+      const { title } = unref(getMergeProps);
+      const extraSlot = getSlot(slots, 'extra');
+
+      return (
+        <Card
+          bodyStyle={{ padding: '8px 0' }}
+          headerStyle={{
+            padding: '8px 16px',
+            fontSize: '14px',
+            minHeight: '24px',
+          }}
+          style={{ margin: 0 }}
+          title={title}
+        >
+          {{
+            default: () => content,
+            extra: () => extraSlot && <div>{extraSlot}</div>,
+          }}
+        </Card>
+      );
+    }
+
+    return () => (unref(useWrapper) ? renderCard() : renderDesc());
+  },
+});
+</script>
diff --git a/apps/web-tdesign/src/components/description/index.ts b/apps/web-tdesign/src/components/description/index.ts
new file mode 100644
index 000000000..a707c4865
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/index.ts
@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';
diff --git a/apps/web-tdesign/src/components/description/typing.ts b/apps/web-tdesign/src/components/description/typing.ts
new file mode 100644
index 000000000..d73a067c5
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/typing.ts
@@ -0,0 +1,45 @@
+import type { DescriptionsProps as TdDescriptionsProps } from 'tdesign-vue-next';
+import type { JSX } from 'vue/jsx-runtime';
+
+import type { CSSProperties, VNode } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+export interface DescriptionItemSchema {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
+}
+
+export interface DescriptionProps extends TdDescriptionsProps {
+  // 是否包含卡片组件
+  useCard?: boolean;
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+  // 标题
+  title?: string;
+  // 是否包含边框
+  bordered?: boolean;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
+}
diff --git a/apps/web-tdesign/src/components/description/use-description.ts b/apps/web-tdesign/src/components/description/use-description.ts
new file mode 100644
index 000000000..fd24920f0
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/use-description.ts
@@ -0,0 +1,31 @@
+import type { Component } from 'vue';
+
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
+
+import Description from './description.vue';
+
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
+
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
+
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...attrs }, slots);
+      };
+    },
+  };
+
+  return [DescriptionWrapper, api] as const;
+}
diff --git a/apps/web-tdesign/src/components/dict-tag/dict-tag.vue b/apps/web-tdesign/src/components/dict-tag/dict-tag.vue
new file mode 100644
index 000000000..c40ed80e4
--- /dev/null
+++ b/apps/web-tdesign/src/components/dict-tag/dict-tag.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getDictObj } from '@vben/hooks';
+import { isValidColor, TinyColor } from '@vben/utils';
+
+import { Tag } from 'tdesign-vue-next';
+
+interface DictTagProps {
+  /**
+   * 字典类型
+   */
+  type: string;
+  /**
+   * 字典值
+   */
+  value: any;
+  /**
+   * 图标
+   */
+  icon?: string;
+}
+
+const props = defineProps<DictTagProps>();
+
+/** 获取字典标签 */
+const dictTag = computed(() => {
+  // 校验参数有效性
+  if (!props.type || props.value === undefined || props.value === null) {
+    return null;
+  }
+
+  // 获取字典对象
+  const dict = getDictObj(props.type, String(props.value));
+  if (!dict) {
+    return null;
+  }
+
+  // 处理颜色类型
+  let colorType = dict.colorType;
+  switch (colorType) {
+    case 'danger': {
+      colorType = 'danger';
+      break;
+    }
+    case 'info': {
+      colorType = 'success';
+      break;
+    }
+    case 'primary': {
+      colorType = 'primary';
+      break;
+    }
+    default: {
+      if (!colorType) {
+        colorType = 'default';
+      }
+    }
+  }
+
+  if (isValidColor(dict.cssClass)) {
+    colorType = new TinyColor(dict.cssClass).toHexString();
+  }
+
+  return {
+    label: dict.label || '',
+    theme: colorType as
+      | 'danger'
+      | 'default'
+      | 'primary'
+      | 'success'
+      | 'warning',
+    cssClass: dict.cssClass,
+  };
+});
+</script>
+
+<template>
+  <Tag v-if="dictTag" :theme="dictTag.theme" :color="dictTag.cssClass">
+    {{ dictTag.label }}
+  </Tag>
+</template>
diff --git a/apps/web-tdesign/src/components/dict-tag/index.ts b/apps/web-tdesign/src/components/dict-tag/index.ts
new file mode 100644
index 000000000..881265a39
--- /dev/null
+++ b/apps/web-tdesign/src/components/dict-tag/index.ts
@@ -0,0 +1 @@
+export { default as DictTag } from './dict-tag.vue';
diff --git a/apps/web-tdesign/src/components/table-action/icons.ts b/apps/web-tdesign/src/components/table-action/icons.ts
new file mode 100644
index 000000000..df5bf1a77
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/icons.ts
@@ -0,0 +1,14 @@
+export const ACTION_ICON = {
+  DOWNLOAD: 'lucide:download',
+  UPLOAD: 'lucide:upload',
+  ADD: 'lucide:plus',
+  EDIT: 'lucide:edit',
+  DELETE: 'lucide:trash-2',
+  REFRESH: 'lucide:refresh-cw',
+  SEARCH: 'lucide:search',
+  FILTER: 'lucide:filter',
+  MORE: 'lucide:ellipsis-vertical',
+  VIEW: 'lucide:eye',
+  COPY: 'lucide:copy',
+  CLOSE: 'lucide:x',
+};
diff --git a/apps/web-tdesign/src/components/table-action/index.ts b/apps/web-tdesign/src/components/table-action/index.ts
new file mode 100644
index 000000000..672c0a533
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/index.ts
@@ -0,0 +1,4 @@
+export * from './icons';
+
+export { default as TableAction } from './table-action.vue';
+export * from './typing';
diff --git a/apps/web-tdesign/src/components/table-action/table-action.vue b/apps/web-tdesign/src/components/table-action/table-action.vue
new file mode 100644
index 000000000..8c4fda41a
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/table-action.vue
@@ -0,0 +1,282 @@
+<!-- add by 星语：参考 vben2 的方式，增加 TableAction 组件 -->
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { ActionItem, PopConfirm } from './typing';
+
+import { computed, unref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isBoolean, isFunction } from '@vben/utils';
+
+import {
+  Button,
+  Dropdown,
+  Menu,
+  Popconfirm,
+  Space,
+  Tooltip,
+} from 'tdesign-vue-next';
+
+const props = defineProps({
+  actions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  dropDownActions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { hasAccessByCodes } = useAccess();
+
+/** 检查是否显示 */
+function isIfShow(action: ActionItem): boolean {
+  const ifShow = action.ifShow;
+  let isIfShow = true;
+  if (isBoolean(ifShow)) {
+    isIfShow = ifShow;
+  }
+  if (isFunction(ifShow)) {
+    isIfShow = ifShow(action);
+  }
+  if (isIfShow) {
+    isIfShow =
+      hasAccessByCodes(action.auth || []) || (action.auth || []).length === 0;
+  }
+  return isIfShow;
+}
+
+/** 处理按钮 actions */
+const getActions = computed(() => {
+  const actions = props.actions || [];
+  return actions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** 处理下拉菜单 actions */
+const getDropdownList = computed(() => {
+  const dropDownActions = props.dropDownActions || [];
+  return dropDownActions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** Space 组件的 size */
+const spaceSize = computed(() => {
+  const actions = unref(getActions);
+  return actions?.some(
+    (item: ActionItem) => item.type === 'primary' && item.variant === 'text',
+  )
+    ? 4
+    : 8;
+});
+
+/** 获取 PopConfirm 属性 */
+function getPopConfirmProps(popConfirm: PopConfirm) {
+  if (!popConfirm) return {};
+
+  const attrs: Record<string, any> = {};
+
+  // 复制基本属性，排除函数
+  Object.keys(popConfirm).forEach((key) => {
+    if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
+      attrs[key] = popConfirm[key as keyof PopConfirm];
+    }
+  });
+
+  // 单独处理事件函数
+  if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
+    attrs.onConfirm = popConfirm.confirm;
+  }
+  if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
+    attrs.onCancel = popConfirm.cancel;
+  }
+
+  return attrs;
+}
+
+/** 获取 Button 属性 */
+function getButtonProps(action: ActionItem) {
+  return {
+    theme: action.type || 'primary',
+    variant: action.variant || 'text',
+    disabled: action.disabled,
+    loading: action.loading,
+    size: action.size,
+  };
+}
+
+/** 获取 Tooltip 属性 */
+function getTooltipProps(tooltip: any | string) {
+  if (!tooltip) return {};
+  return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
+}
+
+/** 处理菜单点击 */
+function handleMenuClick(e: any) {
+  const action = getDropdownList.value[e.key];
+  if (action && action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+/** 生成稳定的 key */
+function getActionKey(action: ActionItem, index: number) {
+  return `${action.label || ''}-${action.type || ''}-${index}`;
+}
+
+/** 处理按钮点击 */
+function handleButtonClick(action: ActionItem) {
+  if (action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+/** 监听props变化，强制重新计算 */
+watch(
+  () => [props.actions, props.dropDownActions],
+  () => {
+    // 这里不需要额外处理，computed会自动重新计算
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div class="table-actions">
+    <Space :size="spaceSize">
+      <template
+        v-for="(action, index) in getActions"
+        :key="getActionKey(action, index)"
+      >
+        <Popconfirm
+          v-if="action.popConfirm"
+          v-bind="getPopConfirmProps(action.popConfirm)"
+        >
+          <template v-if="action.popConfirm.icon" #icon>
+            <IconifyIcon :icon="action.popConfirm.icon" />
+          </template>
+          <Tooltip v-bind="getTooltipProps(action.tooltip)">
+            <Button v-bind="getButtonProps(action)">
+              <template v-if="action.icon" #icon>
+                <IconifyIcon :icon="action.icon" />
+              </template>
+              {{ action.label }}
+            </Button>
+          </Tooltip>
+        </Popconfirm>
+        <Tooltip v-else v-bind="getTooltipProps(action.tooltip)">
+          <Button
+            v-bind="getButtonProps(action)"
+            @click="handleButtonClick(action)"
+          >
+            <template v-if="action.icon" #icon>
+              <IconifyIcon :icon="action.icon" />
+            </template>
+            {{ action.label }}
+          </Button>
+        </Tooltip>
+      </template>
+    </Space>
+
+    <Dropdown v-if="getDropdownList.length > 0" trigger="hover">
+      <slot name="more">
+        <Button theme="primary" variant="text">
+          <template #icon>
+            {{ $t('page.action.more') }}
+            <IconifyIcon icon="lucide:ellipsis-vertical" />
+          </template>
+        </Button>
+      </slot>
+      <template #overlay>
+        <Menu>
+          <Menu.Item
+            v-for="(action, index) in getDropdownList"
+            :key="index"
+            :disabled="action.disabled"
+            @click="!action.popConfirm && handleMenuClick({ key: index })"
+          >
+            <template v-if="action.popConfirm">
+              <Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
+                <template v-if="action.popConfirm.icon" #icon>
+                  <IconifyIcon :icon="action.popConfirm.icon" />
+                </template>
+                <div
+                  :class="
+                    action.disabled === true
+                      ? 'cursor-not-allowed text-gray-300'
+                      : ''
+                  "
+                >
+                  <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                  <span :class="action.icon ? 'ml-1' : ''">
+                    {{ action.label }}
+                  </span>
+                </div>
+              </Popconfirm>
+            </template>
+            <template v-else>
+              <div
+                :class="
+                  action.disabled === true
+                    ? 'cursor-not-allowed text-gray-300'
+                    : ''
+                "
+              >
+                <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                {{ action.label }}
+              </div>
+            </template>
+          </Menu.Item>
+        </Menu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<style lang="scss">
+.table-actions {
+  .ant-btn-link {
+    padding: 4px;
+    margin-left: 0;
+  }
+
+  .ant-btn > .iconify + span,
+  .ant-btn > span + .iconify {
+    margin-inline-start: 4px;
+  }
+
+  .iconify {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    font-style: normal;
+    line-height: 0;
+    vertical-align: -0.125em;
+    color: inherit;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.ant-popconfirm {
+  .ant-popconfirm-buttons {
+    .ant-btn {
+      margin-inline-start: 4px !important;
+    }
+  }
+}
+</style>
diff --git a/apps/web-tdesign/src/components/table-action/typing.ts b/apps/web-tdesign/src/components/table-action/typing.ts
new file mode 100644
index 000000000..a54e58468
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/typing.ts
@@ -0,0 +1,32 @@
+import type { TdButtonProps, TooltipProps } from 'tdesign-vue-next';
+
+export interface PopConfirm {
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: () => void;
+  cancel?: () => void;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface ActionItem {
+  onClick?: () => void;
+  type?: TdButtonProps['theme'];
+  label?: string;
+  icon?: string;
+  color?: 'error' | 'success' | 'warning';
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: string[];
+  // 业务控制是否显示
+  ifShow?: ((action: ActionItem) => boolean) | boolean;
+  tooltip?: string | TooltipProps;
+  loading?: boolean;
+  size?: TdButtonProps['size'];
+  shape?: TdButtonProps['shape'];
+  variant?: TdButtonProps['variant'];
+  danger?: boolean;
+}
diff --git a/apps/web-tdesign/src/components/tinymce/editor.vue b/apps/web-tdesign/src/components/tinymce/editor.vue
new file mode 100644
index 000000000..722073cf7
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/editor.vue
@@ -0,0 +1,344 @@
+<script lang="ts" setup>
+import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
+import type { Editor as EditorType } from 'tinymce/tinymce';
+
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  ref,
+  unref,
+  useAttrs,
+  watch,
+} from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { buildShortUUID, isNumber } from '@vben/utils';
+
+import Editor from '@tinymce/tinymce-vue';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+import { bindHandlers } from './helper';
+import ImgUpload from './img-upload.vue';
+import {
+  plugins as defaultPlugins,
+  toolbar as defaultToolbar,
+} from './tinymce';
+
+type InitOptions = IPropTypes['init'];
+
+defineOptions({ name: 'Tinymce', inheritAttrs: false });
+
+const props = withDefaults(defineProps<TinymacProps>(), {
+  height: 400,
+  width: 'auto',
+  options: () => ({}),
+  plugins: defaultPlugins,
+  toolbar: defaultToolbar,
+  showImageUpload: true,
+});
+
+const emit = defineEmits(['change']);
+
+interface TinymacProps {
+  options?: Partial<InitOptions>;
+  toolbar?: string;
+  plugins?: string;
+  height?: number | string;
+  width?: number | string;
+  showImageUpload?: boolean;
+}
+
+/** 外部使用 v-model 绑定值 */
+const modelValue = defineModel('modelValue', { default: '', type: String });
+
+/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const attrs = useAttrs();
+const editorRef = ref<EditorType>();
+const fullscreen = ref(false); // 图片上传，是否放到全屏的位置
+const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
+const elRef = ref<HTMLElement | null>(null);
+
+const containerWidth = computed(() => {
+  const width = props.width;
+  if (isNumber(width)) {
+    return `${width}px`;
+  }
+  return width;
+});
+
+/** 主题皮肤 */
+const { isDark } = usePreferences();
+const skinName = computed(() => {
+  return isDark.value ? 'oxide-dark' : 'oxide';
+});
+
+const contentCss = computed(() => {
+  return isDark.value ? 'dark' : 'default';
+});
+
+/** 国际化：需要在 langs 目录下，放好语言包 */
+const { locale } = usePreferences();
+const langName = computed(() => {
+  if (locale.value === 'en-US') {
+    return 'en';
+  }
+  return 'zh_CN';
+});
+
+/** 监听 mode、locale 进行主题、语言切换 */
+const init = ref(true);
+watch(
+  () => [preferences.theme.mode, preferences.app.locale],
+  async () => {
+    if (!editorRef.value) {
+      return;
+    }
+    // 通过 init + v-if 来挂载/卸载组件
+    destroy();
+    init.value = false;
+    await nextTick();
+    init.value = true;
+    // 等待加载完成
+    await nextTick();
+    setEditorMode();
+  },
+);
+
+const initOptions = computed((): InitOptions => {
+  const { height, options, plugins, toolbar } = props;
+  return {
+    height,
+    toolbar,
+    menubar: 'file edit view insert format tools table help',
+    plugins,
+    language: langName.value,
+    branding: false, // 禁止显示，右下角的“使用 TinyMCE 构建”
+    default_link_target: '_blank',
+    link_title: false,
+    object_resizing: true, // 和 vben2.0 不同，它默认是 false
+    auto_focus: undefined, // 和 vben2.0 不同，它默认是 true
+    skin: skinName.value,
+    content_css: contentCss.value,
+    content_style:
+      'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+    contextmenu: 'link image table',
+    image_advtab: true, // 图片高级选项
+    image_caption: true,
+    importcss_append: true,
+    noneditable_class: 'mceNonEditable',
+    paste_data_images: true, // 允许粘贴图片，默认 base64 格式，images_upload_handler 启用时为上传
+    quickbars_selection_toolbar:
+      'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+    toolbar_mode: 'sliding',
+    ...options,
+    images_upload_handler: (blobInfo: any) => {
+      return new Promise((resolve, reject) => {
+        const file = blobInfo.blob() as File;
+        const { httpRequest } = useUpload();
+        httpRequest(file)
+          .then((url) => {
+            resolve(url);
+          })
+          .catch((error) => {
+            console.error('tinymce 上传图片失败:', error);
+            reject(error.message);
+          });
+      });
+    },
+    setup: (editor: EditorType) => {
+      editorRef.value = editor;
+      editor.on('init', (e: any) => initSetup(e));
+    },
+  };
+});
+
+/** 监听 options.readonly 是否只读 */
+const disabled = computed(() => props.options.readonly ?? false);
+watch(
+  () => props.options,
+  (options) => {
+    const getDisabled = options && Reflect.get(options, 'readonly');
+    const editor = unref(editorRef);
+    if (editor) {
+      editor.mode.set(getDisabled ? 'readonly' : 'design');
+    }
+  },
+);
+
+onMounted(() => {
+  if (!initOptions.value.inline) {
+    tinymceId.value = buildShortUUID('tiny-vue');
+  }
+  nextTick(() => {
+    setTimeout(() => {
+      initEditor();
+      setEditorMode();
+    }, 30);
+  });
+});
+
+onBeforeUnmount(() => {
+  destroy();
+});
+
+onDeactivated(() => {
+  destroy();
+});
+
+onActivated(() => {
+  setEditorMode();
+});
+
+function setEditorMode() {
+  const editor = unref(editorRef);
+  if (editor) {
+    const mode = props.options.readonly ? 'readonly' : 'design';
+    editor.mode.set(mode);
+  }
+}
+
+function destroy() {
+  const editor = unref(editorRef);
+  editor?.destroy();
+}
+
+function initEditor() {
+  const el = unref(elRef);
+  if (el) {
+    el.style.visibility = '';
+  }
+}
+
+function initSetup(e: any) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const value = modelValue.value || '';
+
+  editor.setContent(value);
+  bindModelHandlers(editor);
+  bindHandlers(e, attrs, unref(editorRef));
+}
+
+function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
+  if (
+    editor &&
+    typeof val === 'string' &&
+    val !== prevVal &&
+    val !== editor.getContent({ format: attrs.outputFormat })
+  ) {
+    editor.setContent(val);
+  }
+}
+
+function bindModelHandlers(editor: any) {
+  const modelEvents = attrs.modelEvents ?? null;
+  const normalizedEvents = Array.isArray(modelEvents)
+    ? modelEvents.join(' ')
+    : modelEvents;
+
+  watch(
+    () => modelValue.value,
+    (val, prevVal) => {
+      setValue(editor, val, prevVal);
+    },
+  );
+
+  editor.on(normalizedEvents || 'change keyup undo redo', () => {
+    const content = editor.getContent({ format: attrs.outputFormat });
+    emit('change', content);
+  });
+
+  editor.on('FullscreenStateChanged', (e: any) => {
+    fullscreen.value = e.state;
+  });
+}
+
+function getUploadingImgName(name: string) {
+  return `[uploading:${name}]`;
+}
+
+function handleImageUploading(name: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
+  const content = editor?.getContent() ?? '';
+  setValue(editor, content);
+}
+
+function handleDone(name: string, url: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const content = editor?.getContent() ?? '';
+  const val =
+    content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
+  setValue(editor, val);
+}
+
+function handleError(name: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const content = editor?.getContent() ?? '';
+  const val = content?.replace(getUploadingImgName(name), '') ?? '';
+  setValue(editor, val);
+}
+</script>
+
+<template>
+  <div :style="{ width: containerWidth }" class="app-tinymce">
+    <ImgUpload
+      v-if="showImageUpload"
+      v-show="editorRef"
+      :disabled="disabled"
+      :fullscreen="fullscreen"
+      @done="handleDone"
+      @error="handleError"
+      @uploading="handleImageUploading"
+    />
+    <Editor
+      v-if="!initOptions.inline && init"
+      v-model="modelValue"
+      :init="initOptions"
+      :style="{ visibility: 'hidden', zIndex: 3000 }"
+      :tinymce-script-src="tinymceScriptSrc"
+      license-key="gpl"
+    />
+    <slot v-else></slot>
+  </div>
+</template>
+<style lang="scss">
+.tox.tox-silver-sink.tox-tinymce-aux {
+  z-index: 2025; /* 由于 vben modal/drawer 的 zIndex 为 2000，需要调整 z-index（默认 1300）超过它，避免遮挡 */
+}
+</style>
+
+<style lang="scss" scoped>
+.app-tinymce {
+  position: relative;
+  line-height: normal;
+
+  :deep(.textarea) {
+    z-index: -1;
+    visibility: hidden;
+  }
+}
+
+/* 隐藏右上角 tinymce upgrade 按钮 */
+:deep(.tox-promotion) {
+  display: none !important;
+}
+</style>
diff --git a/apps/web-tdesign/src/components/tinymce/helper.ts b/apps/web-tdesign/src/components/tinymce/helper.ts
new file mode 100644
index 000000000..1f98dda46
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/helper.ts
@@ -0,0 +1,85 @@
+const validEvents = new Set([
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforePaste',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResized',
+  'onObjectResizeStart',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid',
+]);
+
+const isValidKey = (key: string) => validEvents.has(key);
+
+export const bindHandlers = (
+  initEvent: Event,
+  listeners: any,
+  editor: any,
+): void => {
+  Object.keys(listeners)
+    .filter((element) => isValidKey(element))
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.slice(2), (e: any) => handler(e, editor));
+        }
+      }
+    });
+};
diff --git a/apps/web-tdesign/src/components/tinymce/img-upload.vue b/apps/web-tdesign/src/components/tinymce/img-upload.vue
new file mode 100644
index 000000000..ee300d1ae
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/img-upload.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { RequestMethodResponse, UploadFile } from 'tdesign-vue-next';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { Button, Upload } from 'tdesign-vue-next';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+defineOptions({ name: 'TinymceImageUpload' });
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  fullscreen: {
+    // 图片上传，是否放到全屏的位置
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['uploading', 'done', 'error']);
+
+const uploading = ref(false);
+
+const getButtonProps = computed(() => {
+  const { disabled } = props;
+  return {
+    disabled,
+  };
+});
+
+async function customRequest(
+  info: UploadFile | UploadFile[],
+): Promise<RequestMethodResponse> {
+  // 处理单个文件上传
+  const uploadFile = Array.isArray(info) ? info[0] : info;
+
+  if (!uploadFile) {
+    return {
+      status: 'fail',
+      error: 'No file provided',
+      response: {},
+    };
+  }
+
+  // 1. emit 上传中
+  const file = uploadFile.raw as File;
+  const name = file?.name;
+  if (!uploading.value) {
+    emit('uploading', name);
+    uploading.value = true;
+  }
+
+  // 2. 执行上传
+  const { httpRequest } = useUpload();
+  try {
+    const url = await httpRequest(file);
+    emit('done', name, url);
+    uploadFile.onSuccess?.(url);
+    return {
+      status: 'success',
+      response: {
+        url,
+      },
+    };
+  } catch (error) {
+    emit('error', name);
+    uploadFile.onError?.(error);
+    return {
+      status: 'fail',
+      error: error instanceof Error ? error.message : 'Upload failed',
+      response: {},
+    };
+  } finally {
+    uploading.value = false;
+  }
+}
+</script>
+<template>
+  <div :class="[{ fullscreen }]" class="tinymce-image-upload">
+    <Upload
+      :show-upload-list="false"
+      accept=".jpg,.jpeg,.gif,.png,.webp"
+      multiple
+      :request-method="customRequest"
+    >
+      <Button theme="primary" v-bind="{ ...getButtonProps }">
+        {{ $t('ui.upload.imgUpload') }}
+      </Button>
+    </Upload>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tinymce-image-upload {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  z-index: 20;
+
+  &.fullscreen {
+    position: fixed;
+    z-index: 10000;
+  }
+}
+</style>
diff --git a/apps/web-tdesign/src/components/tinymce/index.ts b/apps/web-tdesign/src/components/tinymce/index.ts
new file mode 100644
index 000000000..c277d781d
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/index.ts
@@ -0,0 +1 @@
+export { default as Tinymce } from './editor.vue';
diff --git a/apps/web-tdesign/src/components/tinymce/tinymce.ts b/apps/web-tdesign/src/components/tinymce/tinymce.ts
new file mode 100644
index 000000000..45a867b61
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/tinymce.ts
@@ -0,0 +1,17 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tiny.cloud/docs/plugins/
+// Custom builds see https://www.tiny.cloud/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+export const plugins =
+  'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons accordion';
+
+// 和 vben2.0 不同，从 https://www.tiny.cloud/ 拷贝 Vue 部分，然后去掉 importword exportword exportpdf | math 部分，并额外增加最后一行（来自 vben2.0 差异的部分）
+export const toolbar =
+  'undo redo | accordion accordionremove | \\\n' +
+  '          blocks fontfamily fontsize | bold italic underline strikethrough | \\\n' +
+  '          align numlist bullist | link image | table media | \\\n' +
+  '          lineheight outdent indent | forecolor backcolor removeformat | \\\n' +
+  '          charmap emoticons | code fullscreen preview | save print | \\\n' +
+  '          pagebreak anchor codesample | ltr rtl | \\\n' +
+  '          hr searchreplace alignleft aligncenter alignright blockquote subscript superscript';
diff --git a/apps/web-tdesign/src/components/upload/file-upload.vue b/apps/web-tdesign/src/components/upload/file-upload.vue
new file mode 100644
index 000000000..668197711
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/file-upload.vue
@@ -0,0 +1,381 @@
+<script lang="ts" setup>
+import type {
+  RequestMethodResponse,
+  UploadFile,
+  UploadProps,
+} from 'tdesign-vue-next';
+
+import type { FileUploadProps } from './typing';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+import { computed, ref, toRefs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isFunction, isNumber, isObject, isString } from '@vben/utils';
+
+import { Button, Upload } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import { checkFileType } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUpload, useUploadType } from './use-upload';
+
+defineOptions({ name: 'FileUpload', inheritAttrs: false });
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  modelValue: undefined,
+  directory: undefined,
+  disabled: false,
+  drag: false,
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => [],
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: false,
+});
+const emit = defineEmits([
+  'change',
+  'update:value',
+  'update:modelValue',
+  'delete',
+  'returnText',
+  'preview',
+]);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+// 计算当前绑定的值，优先使用 modelValue
+const currentValue = computed(() => {
+  return props.modelValue === undefined ? props.value : props.modelValue;
+});
+
+// 判断是否使用 modelValue
+const isUsingModelValue = computed(() => {
+  return props.modelValue !== undefined;
+});
+
+const fileList = ref<UploadProps['files']>([]);
+const isLtMsg = ref<boolean>(true); // 文件大小错误提示
+const isActMsg = ref<boolean>(true); // 文件类型错误提示
+const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0); // 上传文件计数器
+const uploadList = ref<any[]>([]); // 临时上传列表
+
+watch(
+  currentValue,
+  (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string[] = [];
+    if (v) {
+      if (Array.isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: UploadResultStatus.SUCCESS,
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['files'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+async function handleRemove(file: UploadFile) {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+}
+
+// 处理文件预览
+function handlePreview(file: UploadFile) {
+  emit('preview', file);
+}
+
+// 处理文件数量超限
+function handleExceed() {
+  message.error($t('ui.upload.maxNumber', [maxNumber.value]));
+}
+
+// 处理上传错误
+function handleUploadError(error: any) {
+  console.error('上传错误:', error);
+  message.error('上传失败');
+  // 上传失败时减少计数器
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+}
+
+async function beforeUpload(file: UploadFile) {
+  const fileContent = await file.text();
+  emit('returnText', fileContent);
+
+  // 检查文件数量限制
+  if (
+    isNumber(fileList.value!.length) &&
+    fileList.value!.length >= props.maxNumber
+  ) {
+    message.error($t('ui.upload.maxNumber', [props.maxNumber]));
+    return Upload.LIST_IGNORE;
+  }
+
+  const { maxSize, accept } = props;
+  const isAct = checkFileType(file.raw!, accept);
+  if (!isAct) {
+    message.error($t('ui.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt = file.size! / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
+  return true;
+}
+
+async function customRequest(
+  info: UploadFile | UploadFile[],
+): Promise<RequestMethodResponse> {
+  // 处理单个文件上传
+  const uploadFile = Array.isArray(info) ? info[0] : info;
+
+  if (!uploadFile) {
+    return {
+      status: 'fail' as const,
+      error: 'No file provided',
+      response: {},
+    };
+  }
+
+  let { api } = props;
+  if (!api || !isFunction(api)) {
+    api = useUpload(props.directory).httpRequest;
+  }
+  try {
+    // 上传文件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      uploadFile.onProgress?.({ percent });
+    };
+    const res = await api?.(uploadFile.raw!, progressEvent);
+
+    // 处理上传成功后的逻辑
+    handleUploadSuccess(res!, uploadFile.raw as File);
+
+    uploadFile.onSuccess!(res);
+    message.success($t('ui.upload.uploadSuccess'));
+
+    // 提取 URL，兼容不同的返回格式
+    const fileUrl = (res as any)?.url || (res as any)?.data || res;
+
+    return {
+      status: 'success' as const,
+      response: {
+        url: fileUrl,
+      },
+    };
+  } catch (error: any) {
+    console.error(error);
+    uploadFile.onError!(error);
+    handleUploadError(error);
+    return {
+      status: 'fail' as const,
+      error: error instanceof Error ? error.message : 'Upload failed',
+      response: {},
+    };
+  }
+}
+
+// 处理上传成功
+function handleUploadSuccess(res: any, file: File) {
+  // 删除临时文件
+  const index = fileList.value?.findIndex((item) => item.name === file.name);
+  if (index !== -1) {
+    fileList.value?.splice(index!, 1);
+  }
+
+  // 添加到临时上传列表
+  const fileUrl = res?.url || res?.data || res;
+  uploadList.value.push({
+    name: file.name,
+    url: fileUrl,
+    status: UploadResultStatus.SUCCESS,
+    uid: file.name + Date.now(),
+  });
+
+  // 检查是否所有文件都上传完成
+  if (uploadList.value.length >= uploadNumber.value) {
+    fileList.value?.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+
+    // 更新值
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.SUCCESS)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response;
+      }
+      return item?.url || item?.response?.url || item?.response;
+    });
+
+  // 单个文件的情况，根据输入参数类型决定返回格式
+  if (props.maxNumber === 1) {
+    const singleValue = list.length > 0 ? list[0] : '';
+    // 如果原始值是字符串或 modelValue 是字符串，返回字符串
+    if (
+      isString(props.value) ||
+      (isUsingModelValue.value && isString(props.modelValue))
+    ) {
+      return singleValue;
+    }
+    return singleValue;
+  }
+
+  // 多文件情况，根据输入参数类型决定返回格式
+  if (isUsingModelValue.value) {
+    return Array.isArray(props.modelValue) ? list : list.join(',');
+  }
+
+  return Array.isArray(props.value) ? list : list.join(',');
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :request-method="customRequest"
+      :disabled="disabled"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      list-type="text"
+      :progress="{ showInfo: true }"
+      :show-upload-list="{
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+        showDownloadIcon: true,
+      }"
+      @remove="handleRemove"
+      @preview="handlePreview"
+      @reject="handleExceed"
+    >
+      <div v-if="drag" class="upload-drag-area">
+        <p class="upload-drag-icon">
+          <IconifyIcon icon="lucide:cloud-upload" />
+        </p>
+        <p class="upload-text">点击或拖拽文件到此区域上传</p>
+        <p class="upload-hint">
+          支持{{ accept.join('/') }}格式文件，不超过{{ maxSize }}MB
+        </p>
+      </div>
+      <div v-else-if="fileList && fileList.length < maxNumber">
+        <Button>
+          <IconifyIcon icon="lucide:cloud-upload" />
+          {{ $t('ui.upload.upload') }}
+        </Button>
+      </div>
+      <div
+        v-if="showDescription && !drag"
+        class="mt-2 flex flex-wrap items-center"
+      >
+        请上传不超过
+        <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+        的
+        <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+        格式文件
+      </div>
+    </Upload>
+  </div>
+</template>
+
+<style scoped>
+.upload-drag-area {
+  padding: 20px;
+  text-align: center;
+  background-color: var(--td-bg-color-container, #fafafa);
+  border: 2px dashed var(--td-border-level-2-color, #d9d9d9);
+  border-radius: var(--td-radius-default, 8px);
+  transition: border-color 0.3s;
+}
+
+.upload-drag-area:hover {
+  border-color: var(--td-brand-color, #0052d9);
+}
+
+.upload-drag-icon {
+  margin-bottom: 16px;
+  font-size: 48px;
+  color: var(--td-text-color-placeholder, #d9d9d9);
+}
+
+.upload-text {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: var(--td-text-color-secondary, #666);
+}
+
+.upload-hint {
+  font-size: 14px;
+  color: var(--td-text-color-placeholder, #999);
+}
+</style>
diff --git a/apps/web-tdesign/src/components/upload/helper.ts b/apps/web-tdesign/src/components/upload/helper.ts
new file mode 100644
index 000000000..27313cea6
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/helper.ts
@@ -0,0 +1,20 @@
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+
+export function checkFileType(file: File, accepts: string[]) {
+  if (!accepts || accepts.length === 0) {
+    return true;
+  }
+  const newTypes = accepts.join('|');
+  const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
+  return reg.test(file.name);
+}
+
+export function checkImgType(
+  file: File,
+  accepts: string[] = defaultImageAccepts,
+) {
+  return checkFileType(file, accepts);
+}
diff --git a/apps/web-tdesign/src/components/upload/image-upload.vue b/apps/web-tdesign/src/components/upload/image-upload.vue
new file mode 100644
index 000000000..14e3776c4
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/image-upload.vue
@@ -0,0 +1,362 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'tdesign-vue-next';
+
+import type { FileUploadProps } from './typing';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+import { computed, ref, toRefs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isFunction, isNumber, isObject, isString } from '@vben/utils';
+
+import { Dialog, Upload } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import { checkImgType, defaultImageAccepts } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUpload, useUploadType } from './use-upload';
+
+defineOptions({ name: 'ImageUpload', inheritAttrs: false });
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  modelValue: undefined,
+  directory: undefined,
+  disabled: false,
+  listType: 'picture-card',
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => defaultImageAccepts,
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: true,
+});
+const emit = defineEmits([
+  'change',
+  'update:value',
+  'update:modelValue',
+  'delete',
+]);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+// 计算当前绑定的值，优先使用 modelValue
+const currentValue = computed(() => {
+  return props.modelValue === undefined ? props.value : props.modelValue;
+});
+
+// 判断是否使用 modelValue
+const isUsingModelValue = computed(() => {
+  return props.modelValue !== undefined;
+});
+const previewOpen = ref<boolean>(false); // 是否展示预览
+const previewImage = ref<string>(''); // 预览图片
+const previewTitle = ref<string>(''); // 预览标题
+
+const fileList = ref<UploadProps['files']>([]);
+const isLtMsg = ref<boolean>(true); // 文件大小错误提示
+const isActMsg = ref<boolean>(true); // 文件类型错误提示
+const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0); // 上传文件计数器
+const uploadList = ref<any[]>([]); // 临时上传列表
+
+watch(
+  currentValue,
+  async (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string | string[] = [];
+    if (v) {
+      if (Array.isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: UploadResultStatus.SUCCESS,
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['files'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+function getBase64<T extends ArrayBuffer | null | string>(file: File) {
+  return new Promise<T>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => {
+      resolve(reader.result as T);
+    });
+    reader.addEventListener('error', (error) => reject(error));
+  });
+}
+
+async function handlePreview(file: UploadFile) {
+  if (!file.url && !file.preview) {
+    // TDesign 使用 raw 而不是 originFileObj
+    file.preview = await getBase64<string>(file.raw!);
+  }
+  previewImage.value = file.url || file.preview || '';
+  previewOpen.value = true;
+  previewTitle.value =
+    file.name ||
+    previewImage.value.slice(
+      Math.max(0, previewImage.value.lastIndexOf('/') + 1),
+    );
+}
+
+async function handleRemove(file: UploadFile) {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+}
+
+function handleCancel() {
+  previewOpen.value = false;
+  previewTitle.value = '';
+}
+
+async function beforeUpload(file: UploadFile) {
+  // 检查文件数量限制
+  if (
+    isNumber(fileList.value!.length) &&
+    fileList.value!.length >= props.maxNumber
+  ) {
+    message.error($t('ui.upload.maxNumber', [props.maxNumber]));
+    return Upload.LIST_IGNORE;
+  }
+
+  const { maxSize, accept } = props;
+  const isAct = checkImgType(file.raw!, accept);
+  if (!isAct) {
+    message.error($t('ui.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt = file.size! / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
+  return true;
+}
+
+async function customRequest(info: UploadFile | UploadFile[]) {
+  // 处理单个文件上传
+  const uploadFile = Array.isArray(info) ? info[0] : info;
+
+  if (!uploadFile) {
+    return {
+      status: 'fail' as const,
+      error: 'No file provided',
+      response: {},
+    };
+  }
+
+  let { api } = props;
+  if (!api || !isFunction(api)) {
+    api = useUpload(props.directory).httpRequest;
+  }
+  try {
+    // 上传文件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      uploadFile.onProgress!({ percent });
+    };
+    // TDesign 使用 raw 而不是 file
+    const res = await api?.(uploadFile.raw as File, progressEvent);
+
+    // 处理上传成功后的逻辑
+    handleUploadSuccess(res, uploadFile.raw as File);
+
+    uploadFile.onSuccess!(res);
+    message.success($t('ui.upload.uploadSuccess'));
+
+    // 提取 URL，兼容不同的返回格式
+    const fileUrl = (res as any)?.url || (res as any)?.data || res;
+
+    return {
+      status: 'success' as const,
+      response: {
+        url: fileUrl,
+      },
+    };
+  } catch (error: any) {
+    console.error(error);
+    uploadFile.onError!(error);
+    handleUploadError(error);
+    return {
+      status: 'fail' as const,
+      error: error instanceof Error ? error.message : 'Upload failed',
+      response: {},
+    };
+  }
+}
+
+// 处理上传成功
+function handleUploadSuccess(res: any, file: File) {
+  // 删除临时文件
+  const index = fileList.value?.findIndex((item) => item.name === file.name);
+  if (index !== -1) {
+    fileList.value?.splice(index!, 1);
+  }
+
+  // 添加到临时上传列表
+  const fileUrl = res?.url || res?.data || res;
+  uploadList.value.push({
+    name: file.name,
+    url: fileUrl,
+    status: UploadResultStatus.SUCCESS,
+    uid: file.name + Date.now(),
+  });
+
+  // 检查是否所有文件都上传完成
+  if (uploadList.value.length >= uploadNumber.value) {
+    fileList.value?.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+
+    // 更新值
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+}
+
+// 处理上传错误
+function handleUploadError(error: any) {
+  console.error('上传错误:', error);
+  // 上传失败时减少计数器
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.SUCCESS)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response;
+      }
+      return item?.url || item?.response?.url || item?.response;
+    });
+
+  // 单个文件的情况，根据输入参数类型决定返回格式
+  if (props.maxNumber === 1) {
+    const singleValue = list.length > 0 ? list[0] : '';
+    // 如果原始值是字符串或 modelValue 是字符串，返回字符串
+    if (
+      isString(props.value) ||
+      (isUsingModelValue.value && isString(props.modelValue))
+    ) {
+      return singleValue;
+    }
+    return singleValue;
+  }
+
+  // 多文件情况，根据输入参数类型决定返回格式
+  if (isUsingModelValue.value) {
+    return Array.isArray(props.modelValue) ? list : list.join(',');
+  }
+
+  return Array.isArray(props.value) ? list : list.join(',');
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :request-method="customRequest"
+      :disabled="disabled"
+      :list-type="listType"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      :progress="{ showInfo: true }"
+      @preview="handlePreview"
+      @remove="handleRemove"
+    >
+      <div
+        v-if="fileList && fileList.length < maxNumber"
+        class="flex flex-col items-center justify-center"
+      >
+        <IconifyIcon icon="lucide:cloud-upload" />
+        <div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
+      </div>
+    </Upload>
+    <div
+      v-if="showDescription"
+      class="mt-2 flex flex-wrap items-center text-sm"
+    >
+      请上传不超过
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+      的
+      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+      格式文件
+    </div>
+    <Dialog
+      :footer="false"
+      :visible="previewOpen"
+      :header="previewTitle"
+      @close="handleCancel"
+    >
+      <img :src="previewImage" alt="" class="w-full" />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped>
+/* TDesign 上传组件样式 */
+:deep(.t-upload__card-item) {
+  @apply flex items-center justify-center;
+}
+</style>
diff --git a/apps/web-tdesign/src/components/upload/index.ts b/apps/web-tdesign/src/components/upload/index.ts
new file mode 100644
index 000000000..14e57fede
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/index.ts
@@ -0,0 +1,3 @@
+export { default as FileUpload } from './file-upload.vue';
+export { default as ImageUpload } from './image-upload.vue';
+export { default as InputUpload } from './input-upload.vue';
diff --git a/apps/web-tdesign/src/components/upload/input-upload.vue b/apps/web-tdesign/src/components/upload/input-upload.vue
new file mode 100644
index 000000000..353e3c5d4
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/input-upload.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { InputProps, TextareaProps } from 'tdesign-vue-next';
+
+import type { FileUploadProps } from './typing';
+
+import { computed } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Col, Input, Row, Textarea } from 'tdesign-vue-next';
+
+import FileUpload from './file-upload.vue';
+
+const props = defineProps<{
+  defaultValue?: number | string;
+  fileUploadProps?: FileUploadProps;
+  inputProps?: InputProps;
+  inputType?: 'input' | 'textarea';
+  modelValue?: number | string;
+  textareaProps?: TextareaProps;
+}>();
+
+const emits = defineEmits<{
+  (e: 'change', payload: number | string): void;
+  (e: 'update:value', payload: number | string): void;
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+
+function handleReturnText(text: string) {
+  modelValue.value = text;
+  emits('change', modelValue.value);
+  emits('update:value', modelValue.value);
+  emits('update:modelValue', modelValue.value);
+}
+
+const inputProps = computed(() => {
+  return {
+    ...props.inputProps,
+    value: modelValue.value,
+  };
+});
+
+const textareaProps = computed(() => {
+  return {
+    ...props.textareaProps,
+    value: modelValue.value,
+  };
+});
+
+const fileUploadProps = computed(() => {
+  return {
+    ...props.fileUploadProps,
+  };
+});
+</script>
+<template>
+  <Row>
+    <Col :span="18">
+      <Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
+      <Textarea readonly v-else :row="4" v-bind="textareaProps" />
+    </Col>
+    <Col :span="6">
+      <FileUpload
+        class="ml-4"
+        v-bind="fileUploadProps"
+        @return-text="handleReturnText"
+      />
+    </Col>
+  </Row>
+</template>
diff --git a/apps/web-tdesign/src/components/upload/typing.ts b/apps/web-tdesign/src/components/upload/typing.ts
new file mode 100644
index 000000000..2488c4080
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/typing.ts
@@ -0,0 +1,39 @@
+import type { AxiosResponse } from '@vben/request';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+export enum UploadResultStatus {
+  ERROR = 'error',
+  PROGRESS = 'progress',
+  SUCCESS = 'success',
+  WAITING = 'waiting',
+}
+
+export type UploadListType = 'picture' | 'picture-card' | 'text';
+
+export interface FileUploadProps {
+  // 根据后缀，或者其他
+  accept?: string[];
+  api?: (
+    file: File,
+    onUploadProgress?: AxiosProgressEvent,
+  ) => Promise<AxiosResponse<any>>;
+  // 上传的目录
+  directory?: string;
+  disabled?: boolean;
+  drag?: boolean; // 是否支持拖拽上传
+  helpText?: string;
+  listType?: UploadListType;
+  // 最大数量的文件，Infinity不限制
+  maxNumber?: number;
+  modelValue?: string | string[]; // v-model 支持
+  // 文件最大多少MB
+  maxSize?: number;
+  // 是否支持多选
+  multiple?: boolean;
+  // support xxx.xxx.xx
+  resultField?: string;
+  // 是否显示下面的描述
+  showDescription?: boolean;
+  value?: string | string[];
+}
diff --git a/apps/web-tdesign/src/components/upload/use-upload.ts b/apps/web-tdesign/src/components/upload/use-upload.ts
new file mode 100644
index 000000000..2f46f9e98
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/use-upload.ts
@@ -0,0 +1,168 @@
+import type { Ref } from 'vue';
+
+import type { AxiosProgressEvent, InfraFileApi } from '#/api/infra/file';
+
+import { computed, unref } from 'vue';
+
+import { useAppConfig } from '@vben/hooks';
+import { $t } from '@vben/locales';
+
+import { createFile, getFilePresignedUrl, uploadFile } from '#/api/infra/file';
+import { baseRequestClient } from '#/api/request';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+
+/**
+ * 上传类型
+ */
+enum UPLOAD_TYPE {
+  // 客户端直接上传（只支持S3服务）
+  CLIENT = 'client',
+  // 客户端发送到后端上传
+  SERVER = 'server',
+}
+
+export function useUploadType({
+  acceptRef,
+  helpTextRef,
+  maxNumberRef,
+  maxSizeRef,
+}: {
+  acceptRef: Ref<string[]>;
+  helpTextRef: Ref<string>;
+  maxNumberRef: Ref<number>;
+  maxSizeRef: Ref<number>;
+}) {
+  // 文件类型限制
+  const getAccept = computed(() => {
+    const accept = unref(acceptRef);
+    if (accept && accept.length > 0) {
+      return accept;
+    }
+    return [];
+  });
+  const getStringAccept = computed(() => {
+    return unref(getAccept)
+      .map((item) => {
+        return item.indexOf('/') > 0 || item.startsWith('.')
+          ? item
+          : `.${item}`;
+      })
+      .join(',');
+  });
+
+  // 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。
+  const getHelpText = computed(() => {
+    const helpText = unref(helpTextRef);
+    if (helpText) {
+      return helpText;
+    }
+    const helpTexts: string[] = [];
+
+    const accept = unref(acceptRef);
+    if (accept.length > 0) {
+      helpTexts.push($t('ui.upload.accept', [accept.join(',')]));
+    }
+
+    const maxSize = unref(maxSizeRef);
+    if (maxSize) {
+      helpTexts.push($t('ui.upload.maxSize', [maxSize]));
+    }
+
+    const maxNumber = unref(maxNumberRef);
+    if (maxNumber && maxNumber !== Infinity) {
+      helpTexts.push($t('ui.upload.maxNumber', [maxNumber]));
+    }
+    return helpTexts.join('，');
+  });
+  return { getAccept, getStringAccept, getHelpText };
+}
+
+// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
+export function useUpload(directory?: string) {
+  // 后端上传地址
+  const uploadUrl = getUploadUrl();
+  // 是否使用前端直连上传
+  const isClientUpload =
+    UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
+  // 重写ElUpload上传方法
+  async function httpRequest(
+    file: File,
+    onUploadProgress?: AxiosProgressEvent,
+  ) {
+    // 模式一：前端上传
+    if (isClientUpload) {
+      // 1.1 生成文件名称
+      const fileName = await generateFileName(file);
+      // 1.2 获取文件预签名地址
+      const presignedInfo = await getFilePresignedUrl(fileName, directory);
+      // 1.3 上传文件
+      return baseRequestClient
+        .put(presignedInfo.uploadUrl, file, {
+          headers: {
+            'Content-Type': file.type,
+          },
+        })
+        .then(() => {
+          // 1.4. 记录文件信息到后端（异步）
+          createFile0(presignedInfo, file);
+          // 通知成功，数据格式保持与后端上传的返回结果一致
+          return { url: presignedInfo.url };
+        });
+    } else {
+      // 模式二：后端上传
+      return uploadFile({ file, directory }, onUploadProgress);
+    }
+  }
+
+  return {
+    uploadUrl,
+    httpRequest,
+  };
+}
+
+/**
+ * 获得上传 URL
+ */
+export function getUploadUrl(): string {
+  return `${apiURL}/infra/file/upload`;
+}
+
+/**
+ * 创建文件信息
+ *
+ * @param vo 文件预签名信息
+ * @param file 文件
+ */
+function createFile0(
+  vo: InfraFileApi.FilePresignedUrlRespVO,
+  file: File,
+): InfraFileApi.File {
+  const fileVO = {
+    configId: vo.configId,
+    url: vo.url,
+    path: vo.path,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+  };
+  createFile(fileVO);
+  return fileVO;
+}
+
+/**
+ * 生成文件名称（使用算法SHA256）
+ *
+ * @param file 要上传的文件
+ */
+async function generateFileName(file: File) {
+  // // 读取文件内容
+  // const data = await file.arrayBuffer();
+  // const wordArray = CryptoJS.lib.WordArray.create(data);
+  // // 计算SHA256
+  // const sha256 = CryptoJS.SHA256(wordArray).toString();
+  // // 拼接后缀
+  // const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
+  // return `${sha256}${ext}`;
+  return file.name;
+}
diff --git a/apps/web-tdesign/src/locales/langs/en-US/utils.json b/apps/web-tdesign/src/locales/langs/en-US/utils.json
new file mode 100644
index 000000000..b9206eff9
--- /dev/null
+++ b/apps/web-tdesign/src/locales/langs/en-US/utils.json
@@ -0,0 +1,14 @@
+{
+  "rangePicker": {
+    "today": "Today",
+    "last7Days": "Last 7 Days",
+    "last30Days": "Last 30 Days",
+    "yesterday": "Yesterday",
+    "thisWeek": "This Week",
+    "thisMonth": "This Month",
+    "lastWeek": "Last Week",
+    "lastMonth": "Last Month",
+    "beginTime": "Begin Time",
+    "endTime": "End Time"
+  }
+}
diff --git a/apps/web-tdesign/src/locales/langs/zh-CN/utils.json b/apps/web-tdesign/src/locales/langs/zh-CN/utils.json
new file mode 100644
index 000000000..d26f1f2cf
--- /dev/null
+++ b/apps/web-tdesign/src/locales/langs/zh-CN/utils.json
@@ -0,0 +1,14 @@
+{
+  "rangePicker": {
+    "today": "今天",
+    "last7Days": "最近 7 天",
+    "last30Days": "最近 30 天",
+    "yesterday": "昨天",
+    "thisWeek": "本周",
+    "thisMonth": "本月",
+    "lastWeek": "上周",
+    "lastMonth": "上月",
+    "beginTime": "开始时间",
+    "endTime": "结束时间"
+  }
+}
diff --git a/apps/web-tdesign/src/views/infra/apiAccessLog/data.ts b/apps/web-tdesign/src/views/infra/apiAccessLog/data.ts
new file mode 100644
index 000000000..83b2977c0
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiAccessLog/data.ts
@@ -0,0 +1,273 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { JsonViewer } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'applicationName',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      fieldName: 'beginTime',
+      label: '请求时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'duration',
+      label: '执行时长',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入执行时长',
+      },
+    },
+    {
+      fieldName: 'resultCode',
+      label: '结果码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入结果码',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'applicationName',
+      title: '应用名',
+      minWidth: 150,
+    },
+    {
+      field: 'requestMethod',
+      title: '请求方法',
+      minWidth: 80,
+    },
+    {
+      field: 'requestUrl',
+      title: '请求地址',
+      minWidth: 300,
+    },
+    {
+      field: 'beginTime',
+      title: '请求时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'duration',
+      title: '执行时长',
+      minWidth: 120,
+      formatter: ({ cellValue }) => `${cellValue} ms`,
+    },
+    {
+      field: 'resultCode',
+      title: '操作结果',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return row.resultCode === 0 ? '成功' : `失败(${row.resultMsg})`;
+      },
+    },
+    {
+      field: 'operateModule',
+      title: '操作模块',
+      minWidth: 150,
+    },
+    {
+      field: 'operateName',
+      title: '操作名',
+      minWidth: 220,
+    },
+    {
+      field: 'operateType',
+      title: '操作类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_OPERATE_TYPE },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'traceId',
+      label: '链路追踪',
+    },
+    {
+      field: 'applicationName',
+      label: '应用名',
+    },
+    {
+      field: 'userId',
+      label: '用户Id',
+    },
+    {
+      field: 'userType',
+      label: '用户类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.USER_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'userIp',
+      label: '用户 IP',
+    },
+    {
+      field: 'userAgent',
+      label: '用户 UA',
+    },
+    {
+      field: 'requestMethod',
+      label: '请求信息',
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'requestParams',
+      label: '请求参数',
+      render: (val) => {
+        if (val) {
+          return h(JsonViewer, {
+            value: JSON.parse(val),
+            previewMode: true,
+          });
+        }
+        return '';
+      },
+    },
+    {
+      field: 'responseBody',
+      label: '请求结果',
+    },
+    {
+      label: '请求时间',
+      field: 'beginTime',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
+        }
+        return '';
+      },
+    },
+    {
+      label: '请求耗时',
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
+      },
+    },
+    {
+      label: '操作结果',
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
+          return '正常';
+        } else if (val > 0 && data?.resultMsg) {
+          return `失败 | ${val} | ${data.resultMsg}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'operateModule',
+      label: '操作模块',
+    },
+    {
+      field: 'operateName',
+      label: '操作名',
+    },
+    {
+      field: 'operateType',
+      label: '操作类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_OPERATE_TYPE,
+          value: val,
+        });
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/apiAccessLog/index.vue b/apps/web-tdesign/src/views/infra/apiAccessLog/index.vue
new file mode 100644
index 000000000..251825e1e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiAccessLog/index.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  exportApiAccessLog,
+  getApiAccessLogPage,
+} from '#/api/infra/api-access-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportApiAccessLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: 'API 访问日志.xls', source: data });
+}
+
+/** 查看 API 访问日志详情 */
+function handleDetail(row: InfraApiAccessLogApi.ApiAccessLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getApiAccessLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraApiAccessLogApi.ApiAccessLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="API 访问日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:api-access-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:api-access-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-tdesign/src/views/infra/apiAccessLog/modules/detail.vue
new file mode 100644
index 000000000..badc9376c
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiAccessLog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraApiAccessLogApi.ApiAccessLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="API 访问日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/apiErrorLog/data.ts b/apps/web-tdesign/src/views/infra/apiErrorLog/data.ts
new file mode 100644
index 000000000..1a8c545fe
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiErrorLog/data.ts
@@ -0,0 +1,249 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { JsonViewer } from '@vben/common-ui';
+import { DICT_TYPE, InfraApiErrorLogProcessStatusEnum } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'applicationName',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      fieldName: 'exceptionTime',
+      label: '异常时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processStatus',
+      label: '处理状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
+          'number',
+        ),
+        allowClear: true,
+        placeholder: '请选择处理状态',
+      },
+      defaultValue: InfraApiErrorLogProcessStatusEnum.INIT,
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'applicationName',
+      title: '应用名',
+      minWidth: 150,
+    },
+    {
+      field: 'requestMethod',
+      title: '请求方法',
+      minWidth: 80,
+    },
+    {
+      field: 'requestUrl',
+      title: '请求地址',
+      minWidth: 200,
+    },
+    {
+      field: 'exceptionTime',
+      title: '异常发生时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'exceptionName',
+      title: '异常名',
+      minWidth: 180,
+    },
+    {
+      field: 'processStatus',
+      title: '处理状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      minWidth: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'traceId',
+      label: '链路追踪',
+    },
+    {
+      field: 'applicationName',
+      label: '应用名',
+    },
+    {
+      field: 'userId',
+      label: '用户Id',
+    },
+    {
+      field: 'userType',
+      label: '用户类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.USER_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'userIp',
+      label: '用户 IP',
+    },
+    {
+      field: 'userAgent',
+      label: '用户 UA',
+    },
+    {
+      field: 'requestMethod',
+      label: '请求信息',
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'requestParams',
+      label: '请求参数',
+      render: (val) => {
+        if (val) {
+          return h(JsonViewer, {
+            value: JSON.parse(val),
+            previewMode: true,
+          });
+        }
+        return '';
+      },
+    },
+    {
+      field: 'exceptionTime',
+      label: '异常时间',
+      render: (val) => {
+        return formatDateTime(val) as string;
+      },
+    },
+    {
+      field: 'exceptionName',
+      label: '异常名',
+    },
+    {
+      field: 'exceptionStackTrace',
+      label: '异常堆栈',
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
+          return h('textarea', {
+            value: val,
+            style:
+              'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
+            readonly: true,
+          });
+        }
+        return '';
+      },
+    },
+    {
+      field: 'processStatus',
+      label: '处理状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'processUserId',
+      label: '处理人',
+      show: (val) => !val,
+    },
+    {
+      field: 'processTime',
+      label: '处理时间',
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/apiErrorLog/index.vue b/apps/web-tdesign/src/views/infra/apiErrorLog/index.vue
new file mode 100644
index 000000000..df3c279d5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiErrorLog/index.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { InfraApiErrorLogProcessStatusEnum } from '@vben/constants';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  exportApiErrorLog,
+  getApiErrorLogPage,
+  updateApiErrorLogStatus,
+} from '#/api/infra/api-error-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportApiErrorLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: 'API 错误日志.xls', source: data });
+}
+
+/** 查看 API 错误日志详情 */
+function handleDetail(row: InfraApiErrorLogApi.ApiErrorLog) {
+  detailModalApi.setData(row).open();
+}
+
+/** 处理已处理 / 已忽略的操作 */
+async function handleProcess(id: number, processStatus: number) {
+  await confirm({
+    content: `确认标记为${InfraApiErrorLogProcessStatusEnum.DONE ? '已处理' : '已忽略'}?`,
+  });
+  const hideLoading = message.loading({
+    content: '正在处理中...',
+    duration: 0,
+  });
+  try {
+    await updateApiErrorLogStatus(id, processStatus);
+    message.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getApiErrorLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraApiErrorLogApi.ApiErrorLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="API 错误日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:api-error-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:api-error-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '已处理',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:api-error-log:update-status'],
+              ifShow:
+                row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT,
+              onClick: handleProcess.bind(
+                null,
+                row.id,
+                InfraApiErrorLogProcessStatusEnum.DONE,
+              ),
+            },
+            {
+              label: '已忽略',
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:api-error-log:update-status'],
+              ifShow:
+                row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT,
+              onClick: handleProcess.bind(
+                null,
+                row.id,
+                InfraApiErrorLogProcessStatusEnum.IGNORE,
+              ),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-tdesign/src/views/infra/apiErrorLog/modules/detail.vue
new file mode 100644
index 000000000..da52c17fa
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiErrorLog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraApiErrorLogApi.ApiErrorLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="API 错误日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/build/index.vue b/apps/web-tdesign/src/views/infra/build/index.vue
new file mode 100644
index 000000000..0a12d2721
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/build/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+</script>
+
+<template>
+  <Page> 待完成 </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/data.ts b/apps/web-tdesign/src/views/infra/codegen/data.ts
new file mode 100644
index 000000000..b07ea2a32
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/data.ts
@@ -0,0 +1,552 @@
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { getDataSourceConfigList } from '#/api/infra/data-source-config';
+import { getMenuList } from '#/api/system/menu';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 导入数据库表的表单 */
+export function useImportTableFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'dataSourceConfigId',
+      label: '数据源',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getDataSourceConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择数据源',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表名称',
+      },
+    },
+    {
+      fieldName: 'comment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表描述',
+      },
+    },
+  ];
+}
+
+/** 导入数据库表表格列定义 */
+export function useImportTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    { field: 'name', title: '表名称', minWidth: 200 },
+    { field: 'comment', title: '表描述', minWidth: 200 },
+  ];
+}
+
+/** 基本信息表单的 schema */
+export function useBasicInfoFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'tableName',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'tableComment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表描述',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'className',
+      label: '实体类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入实体类名称',
+      },
+      rules: 'required',
+      help: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。',
+    },
+    {
+      fieldName: 'author',
+      label: '作者',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入作者',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入备注',
+      },
+      formItemClass: 'md:col-span-2',
+    },
+  ];
+}
+
+/** 生成信息表单基础 schema */
+export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Select',
+      fieldName: 'templateType',
+      label: '生成模板',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE,
+          'number',
+        ),
+        class: 'w-full',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'frontType',
+      label: '前端类型',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE, 'number'),
+        class: 'w-full',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'scene',
+      label: '生成场景',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE, 'number'),
+        class: 'w-full',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'parentMenuId',
+      label: '上级菜单',
+      help: '分配到指定菜单下，例如 系统管理',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getMenuList();
+          data.unshift({
+            id: 0,
+            name: '顶级菜单',
+          } as SystemMenuApi.Menu);
+          return handleTree(data);
+        },
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级菜单',
+        filterTreeNode(input: string, node: Recordable<any>) {
+          if (!input || input.length === 0) {
+            return true;
+          }
+          const name: string = node.label ?? '';
+          if (!name) return false;
+          return name.includes(input) || $t(name).includes(input);
+        },
+        showSearch: true,
+        treeDefaultExpandedKeys: [0],
+      },
+      rules: 'selectRequired',
+      renderComponentContent() {
+        return {
+          title({ label, icon }: { icon: string; label: string }) {
+            const components = [];
+            if (!label) return '';
+            if (icon) {
+              components.push(h(IconifyIcon, { class: 'size-4', icon }));
+            }
+            components.push(h('span', { class: '' }, $t(label || '')));
+            return h('div', { class: 'flex items-center gap-1' }, components);
+          },
+        };
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'moduleName',
+      label: '模块名',
+      help: '模块名，即一级目录，例如 system、infra、tool 等等',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'businessName',
+      label: '业务名',
+      help: '业务名，即二级目录，例如 user、permission、dict 等等',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'className',
+      label: '类名称',
+      help: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'classComment',
+      label: '类描述',
+      help: '用作类描述，例如 用户',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 树表信息 schema */
+export function useGenerationInfoTreeFormSchema(
+  columns: InfraCodegenApi.CodegenColumn[] = [],
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Divider',
+      fieldName: 'treeDivider',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['树表信息'],
+        };
+      },
+      formItemClass: 'md:col-span-2',
+    },
+    {
+      component: 'Select',
+      fieldName: 'treeParentColumnId',
+      label: '父编号字段',
+      help: '树显示的父编码字段名，例如 parent_Id',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: columns.map((column) => ({
+          label: column.columnName,
+          value: column.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'treeNameColumnId',
+      label: '名称字段',
+      help: '树节点显示的名称字段，一般是 name',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择名称字段',
+        options: columns.map((column) => ({
+          label: column.columnName,
+          value: column.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+  ];
+}
+
+/** 主子表信息 schema */
+export function useGenerationInfoSubTableFormSchema(
+  columns: InfraCodegenApi.CodegenColumn[] = [],
+  tables: InfraCodegenApi.CodegenTable[] = [],
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Divider',
+      fieldName: 'subDivider',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['主子表信息'],
+        };
+      },
+      formItemClass: 'md:col-span-2',
+    },
+    {
+      component: 'Select',
+      fieldName: 'masterTableId',
+      label: '关联的主表',
+      help: '关联主表（父表）的表名， 如：system_user',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: tables.map((table) => ({
+          label: `${table.tableName}：${table.tableComment}`,
+          value: table.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'subJoinColumnId',
+      label: '子表关联的字段',
+      help: '子表关联的字段， 如：user_id',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: columns.map((column) => ({
+          label: `${column.columnName}:${column.columnComment}`,
+          value: column.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'subJoinMany',
+      label: '关联关系',
+      help: '主表与子表的关联关系',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: [
+          {
+            label: '一对多',
+            value: true,
+          },
+          {
+            label: '一对一',
+            value: false,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'tableName',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表名称',
+      },
+    },
+    {
+      fieldName: 'tableComment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表描述',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  getDataSourceConfigName?: (dataSourceConfigId: number) => string | undefined,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'dataSourceConfigId',
+      title: '数据源',
+      minWidth: 120,
+      formatter: ({ cellValue }) => getDataSourceConfigName?.(cellValue) || '-',
+    },
+    {
+      field: 'tableName',
+      title: '表名称',
+      minWidth: 200,
+    },
+    {
+      field: 'tableComment',
+      title: '表描述',
+      minWidth: 200,
+    },
+    {
+      field: 'className',
+      title: '实体',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 代码生成表格列定义 */
+export function useCodegenColumnTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { field: 'columnName', title: '字段列名', minWidth: 130 },
+    {
+      field: 'columnComment',
+      title: '字段描述',
+      minWidth: 100,
+      slots: { default: 'columnComment' },
+    },
+    { field: 'dataType', title: '物理类型', minWidth: 100 },
+    {
+      field: 'javaType',
+      title: 'Java 类型',
+      minWidth: 130,
+      slots: { default: 'javaType' },
+      params: {
+        options: [
+          { label: 'Long', value: 'Long' },
+          { label: 'String', value: 'String' },
+          { label: 'Integer', value: 'Integer' },
+          { label: 'Double', value: 'Double' },
+          { label: 'BigDecimal', value: 'BigDecimal' },
+          { label: 'LocalDateTime', value: 'LocalDateTime' },
+          { label: 'Boolean', value: 'Boolean' },
+        ],
+      },
+    },
+    {
+      field: 'javaField',
+      title: 'Java 属性',
+      minWidth: 100,
+      slots: { default: 'javaField' },
+    },
+    {
+      field: 'createOperation',
+      title: '插入',
+      width: 40,
+      slots: { default: 'createOperation' },
+    },
+    {
+      field: 'updateOperation',
+      title: '编辑',
+      width: 40,
+      slots: { default: 'updateOperation' },
+    },
+    {
+      field: 'listOperationResult',
+      title: '列表',
+      width: 40,
+      slots: { default: 'listOperationResult' },
+    },
+    {
+      field: 'listOperation',
+      title: '查询',
+      width: 40,
+      slots: { default: 'listOperation' },
+    },
+    {
+      field: 'listOperationCondition',
+      title: '查询方式',
+      minWidth: 100,
+      slots: { default: 'listOperationCondition' },
+      params: {
+        options: [
+          { label: '=', value: '=' },
+          { label: '!=', value: '!=' },
+          { label: '>', value: '>' },
+          { label: '>=', value: '>=' },
+          { label: '<', value: '<' },
+          { label: '<=', value: '<=' },
+          { label: 'LIKE', value: 'LIKE' },
+          { label: 'BETWEEN', value: 'BETWEEN' },
+        ],
+      },
+    },
+    {
+      field: 'nullable',
+      title: '允许空',
+      width: 60,
+      slots: { default: 'nullable' },
+    },
+    {
+      field: 'htmlType',
+      title: '显示类型',
+      width: 130,
+      slots: { default: 'htmlType' },
+      params: {
+        options: [
+          { label: '文本框', value: 'input' },
+          { label: '文本域', value: 'textarea' },
+          { label: '下拉框', value: 'select' },
+          { label: '单选框', value: 'radio' },
+          { label: '复选框', value: 'checkbox' },
+          { label: '日期控件', value: 'datetime' },
+          { label: '图片上传', value: 'imageUpload' },
+          { label: '文件上传', value: 'fileUpload' },
+          { label: '富文本控件', value: 'editor' },
+        ],
+      },
+    },
+    {
+      field: 'dictType',
+      title: '字典类型',
+      width: 120,
+      slots: { default: 'dictType' },
+    },
+    {
+      field: 'example',
+      title: '示例',
+      minWidth: 100,
+      slots: { default: 'example' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/codegen/edit/index.vue b/apps/web-tdesign/src/views/infra/codegen/edit/index.vue
new file mode 100644
index 000000000..dbec22cf5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/edit/index.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { ref, unref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Steps } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { getCodegenTable, updateCodegenTable } from '#/api/infra/codegen';
+import { $t } from '#/locales';
+
+import BasicInfo from '../modules/basic-info.vue';
+import ColumnInfo from '../modules/column-info.vue';
+import GenerationInfo from '../modules/generation-info.vue';
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const currentStep = ref(0);
+const formData = ref<InfraCodegenApi.CodegenDetail>({
+  table: {} as InfraCodegenApi.CodegenTable,
+  columns: [],
+});
+
+/** 表单引用 */
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
+const columnInfoRef = ref<InstanceType<typeof ColumnInfo>>();
+const generateInfoRef = ref<InstanceType<typeof GenerationInfo>>();
+
+/** 获取详情数据 */
+async function getDetail() {
+  const id = route.query.id as any;
+  if (!id) {
+    return;
+  }
+  loading.value = true;
+  try {
+    formData.value = await getCodegenTable(id);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 提交表单 */
+async function submitForm() {
+  // 表单验证
+  const basicInfoValid = await basicInfoRef.value?.validate();
+  if (!basicInfoValid) {
+    message.warning('保存失败，原因：基本信息表单校验失败请检查！！！');
+    return;
+  }
+  const generateInfoValid = await generateInfoRef.value?.validate();
+  if (!generateInfoValid) {
+    message.warning('保存失败，原因：生成信息表单校验失败请检查！！！');
+    return;
+  }
+
+  // 提交表单
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.updating'),
+    duration: 0,
+  });
+  try {
+    // 拼接相关信息
+    const basicInfo = await basicInfoRef.value?.getValues();
+    const columns = columnInfoRef.value?.getData() || unref(formData).columns;
+    const generateInfo = await generateInfoRef.value?.getValues();
+    await updateCodegenTable({
+      table: { ...unref(formData).table, ...basicInfo, ...generateInfo },
+      columns,
+    });
+    // 关闭并提示
+    message.success($t('ui.actionMessage.operationSuccess'));
+    close();
+  } catch (error) {
+    console.error('保存失败', error);
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 返回列表 */
+const tabs = useTabs();
+function close() {
+  tabs.closeCurrentTab();
+  router.push({ name: 'InfraCodegen' });
+}
+
+/** 下一步 */
+function nextStep() {
+  currentStep.value += 1;
+}
+
+/** 上一步 */
+function prevStep() {
+  if (currentStep.value > 0) {
+    currentStep.value -= 1;
+  }
+}
+
+/** 步骤配置 */
+const steps = [
+  {
+    title: '基本信息',
+  },
+  {
+    title: '字段信息',
+  },
+  {
+    title: '生成信息',
+  },
+];
+
+// 初始化
+getDetail();
+</script>
+
+<template>
+  <Page auto-content-height v-loading="loading">
+    <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"
+      >
+        <Steps.Step
+          v-for="(step, index) in steps"
+          :key="index"
+          :title="step.title"
+        />
+      </Steps>
+
+      <div class="flex-1 overflow-auto py-4">
+        <!-- 根据当前步骤显示对应的组件 -->
+        <BasicInfo
+          v-show="currentStep === 0"
+          ref="basicInfoRef"
+          :table="formData.table"
+        />
+        <ColumnInfo
+          v-show="currentStep === 1"
+          ref="columnInfoRef"
+          :columns="formData.columns"
+        />
+        <GenerationInfo
+          v-show="currentStep === 2"
+          ref="generateInfoRef"
+          :table="formData.table"
+          :columns="formData.columns"
+        />
+      </div>
+
+      <div class="mt-4 flex justify-end space-x-2">
+        <Button :disabled="currentStep === 0" @click="prevStep">上一步</Button>
+        <Button :disabled="currentStep === steps.length - 1" @click="nextStep">
+          下一步
+        </Button>
+        <Button theme="primary" :loading="loading" @click="submitForm">
+          保存
+        </Button>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/index.vue b/apps/web-tdesign/src/views/infra/codegen/index.vue
new file mode 100644
index 000000000..409861421
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/index.vue
@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCodegenTable,
+  deleteCodegenTableList,
+  downloadCodegen,
+  getCodegenTablePage,
+  syncCodegenFromDB,
+} from '#/api/infra/codegen';
+import { getDataSourceConfigList } from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import ImportTable from './modules/import-table.vue';
+import PreviewCode from './modules/preview-code.vue';
+
+const router = useRouter();
+const dataSourceConfigList = ref<InfraDataSourceConfigApi.DataSourceConfig[]>(
+  [],
+);
+
+/** 获取数据源名称 */
+const getDataSourceConfigName = (dataSourceConfigId: number) => {
+  return dataSourceConfigList.value.find(
+    (item) => item.id === dataSourceConfigId,
+  )?.name;
+};
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportTable,
+  destroyOnClose: true,
+});
+
+const [PreviewModal, previewModalApi] = useVbenModal({
+  connectedComponent: PreviewCode,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导入表格 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 预览代码 */
+function handlePreview(row: InfraCodegenApi.CodegenTable) {
+  previewModalApi.setData(row).open();
+}
+
+/** 编辑表格 */
+function handleEdit(row: InfraCodegenApi.CodegenTable) {
+  router.push({ name: 'InfraCodegenEdit', query: { id: row.id } });
+}
+
+/** 删除代码生成配置 */
+async function handleDelete(row: InfraCodegenApi.CodegenTable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.tableName]),
+    duration: 0,
+  });
+  try {
+    await deleteCodegenTable(row.id);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除代码生成配置 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteCodegenTableList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraCodegenApi.CodegenTable[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 同步数据库 */
+async function handleSync(row: InfraCodegenApi.CodegenTable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.updating', [row.tableName]),
+    duration: 0,
+  });
+  try {
+    await syncCodegenFromDB(row.id);
+    message.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 生成代码 */
+async function handleGenerate(row: InfraCodegenApi.CodegenTable) {
+  const hideLoading = message.loading({
+    content: '正在生成代码...',
+    duration: 0,
+  });
+  try {
+    const res = await downloadCodegen(row.id);
+    const blob = new Blob([res], { type: 'application/zip' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `codegen-${row.className}.zip`;
+    link.click();
+    window.URL.revokeObjectURL(url);
+    message.success('代码生成成功');
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(getDataSourceConfigName),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCodegenTablePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 获取数据源配置列表 */
+// TODO @芋艿：这种场景的最佳实践；
+async function initDataSourceConfig() {
+  try {
+    dataSourceConfigList.value = await getDataSourceConfigList();
+  } catch (error) {
+    console.error('获取数据源配置失败', error);
+  }
+}
+
+/** 初始化 */
+initDataSourceConfig();
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="代码生成（单表）"
+        url="https://doc.iocoder.cn/new-feature/"
+      />
+      <DocAlert
+        title="代码生成（树表）"
+        url="https://doc.iocoder.cn/new-feature/tree/"
+      />
+      <DocAlert
+        title="代码生成（主子表）"
+        url="https://doc.iocoder.cn/new-feature/master-sub/"
+      />
+      <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
+    </template>
+
+    <ImportModal @success="handleRefresh" />
+    <PreviewModal />
+    <Grid table-title="代码生成列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:codegen:create'],
+              onClick: handleImport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:codegen:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '预览',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:codegen:preview'],
+              onClick: handlePreview.bind(null, row),
+            },
+            {
+              label: '生成代码',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:codegen:download'],
+              onClick: handleGenerate.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              auth: ['infra:codegen:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '同步',
+              type: 'primary',
+              variant: 'text',
+              auth: ['infra:codegen:update'],
+              onClick: handleSync.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              auth: ['infra:codegen:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.tableName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/basic-info.vue b/apps/web-tdesign/src/views/infra/codegen/modules/basic-info.vue
new file mode 100644
index 000000000..00c49911b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/basic-info.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { watch } from 'vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { useBasicInfoFormSchema } from '../data';
+
+const props = defineProps<{
+  table: InfraCodegenApi.CodegenTable;
+}>();
+
+/** 表单实例 */
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  schema: useBasicInfoFormSchema(),
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+/** 动态更新表单值 */
+watch(
+  () => props.table,
+  (val: any) => {
+    if (!val) {
+      return;
+    }
+    formApi.setValues(val);
+  },
+  { immediate: true },
+);
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => {
+    const { valid } = await formApi.validate();
+    return valid;
+  },
+  getValues: formApi.getValues,
+});
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/column-info.vue b/apps/web-tdesign/src/views/infra/codegen/modules/column-info.vue
new file mode 100644
index 000000000..148e311d0
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/column-info.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { Checkbox, Input, Select } from 'tdesign-vue-next';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
+
+import { useCodegenColumnTableColumns } from '../data';
+
+const props = defineProps<{
+  columns?: InfraCodegenApi.CodegenColumn[];
+}>();
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useCodegenColumnTableColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.columns,
+  async (columns) => {
+    if (!columns) {
+      return;
+    }
+    await nextTick();
+    gridApi.grid?.loadData(columns);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): InfraCodegenApi.CodegenColumn[] => gridApi.grid.getData(),
+});
+
+/** 初始化 */
+const dictTypeOptions = ref<SystemDictTypeApi.DictType[]>([]); // 字典类型选项
+onMounted(async () => {
+  dictTypeOptions.value = await getSimpleDictTypeList();
+});
+</script>
+
+<template>
+  <Grid>
+    <!-- 字段描述 -->
+    <template #columnComment="{ row }">
+      <Input v-model="row.columnComment" />
+    </template>
+
+    <!-- Java 类型 -->
+    <template #javaType="{ row, column }">
+      <Select v-model="row.javaType" style="width: 100%">
+        <Select.Option
+          v-for="option in column.params.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </Select.Option>
+      </Select>
+    </template>
+    <!-- Java 属性 -->
+    <template #javaField="{ row }">
+      <Input v-model="row.javaField" />
+    </template>
+
+    <!-- 插入 -->
+    <template #createOperation="{ row }">
+      <Checkbox v-model:checked="row.createOperation" />
+    </template>
+    <!-- 编辑 -->
+    <template #updateOperation="{ row }">
+      <Checkbox v-model:checked="row.updateOperation" />
+    </template>
+    <!-- 列表 -->
+    <template #listOperationResult="{ row }">
+      <Checkbox v-model:checked="row.listOperationResult" />
+    </template>
+    <!-- 查询 -->
+    <template #listOperation="{ row }">
+      <Checkbox v-model:checked="row.listOperation" />
+    </template>
+
+    <!-- 查询方式 -->
+    <template #listOperationCondition="{ row, column }">
+      <Select v-model="row.listOperationCondition" class="w-full">
+        <Select.Option
+          v-for="option in column.params.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </Select.Option>
+      </Select>
+    </template>
+
+    <!-- 允许空 -->
+    <template #nullable="{ row }">
+      <Checkbox v-model:checked="row.nullable" />
+    </template>
+
+    <!-- 显示类型 -->
+    <template #htmlType="{ row, column }">
+      <Select v-model="row.htmlType" class="w-full">
+        <Select.Option
+          v-for="option in column.params.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </Select.Option>
+      </Select>
+    </template>
+
+    <!-- 字典类型 -->
+    <template #dictType="{ row }">
+      <Select v-model="row.dictType" class="w-full" allow-clear show-search>
+        <Select.Option
+          v-for="option in dictTypeOptions"
+          :key="option.type"
+          :value="option.type"
+        >
+          {{ option.name }}
+        </Select.Option>
+      </Select>
+    </template>
+
+    <!-- 示例 -->
+    <template #example="{ row }">
+      <Input v-model="row.example" />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/generation-info.vue b/apps/web-tdesign/src/views/infra/codegen/modules/generation-info.vue
new file mode 100644
index 000000000..56ffe616f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/generation-info.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { computed, ref, watch } from 'vue';
+
+import { InfraCodegenTemplateTypeEnum } from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { getCodegenTableList } from '#/api/infra/codegen';
+
+import {
+  useGenerationInfoBaseFormSchema,
+  useGenerationInfoSubTableFormSchema,
+  useGenerationInfoTreeFormSchema,
+} from '../data';
+
+const props = defineProps<{
+  columns?: InfraCodegenApi.CodegenColumn[];
+  table?: InfraCodegenApi.CodegenTable;
+}>();
+
+const tables = ref<InfraCodegenApi.CodegenTable[]>([]);
+
+/** 计算当前模板类型 */
+const currentTemplateType = ref<number>();
+const isTreeTable = computed(
+  () => currentTemplateType.value === InfraCodegenTemplateTypeEnum.TREE,
+);
+const isSubTable = computed(
+  () => currentTemplateType.value === InfraCodegenTemplateTypeEnum.SUB,
+);
+
+/** 基础表单实例 */
+const [BaseForm, baseFormApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: useGenerationInfoBaseFormSchema(),
+  handleValuesChange: (values) => {
+    // 监听模板类型变化
+    if (
+      values.templateType !== undefined &&
+      values.templateType !== currentTemplateType.value
+    ) {
+      currentTemplateType.value = values.templateType;
+    }
+  },
+});
+
+/** 树表信息表单实例 */
+const [TreeForm, treeFormApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: [],
+});
+
+/** 主子表信息表单实例 */
+const [SubForm, subFormApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: [],
+});
+
+/** 更新树表信息表单 schema */
+function updateTreeSchema(): void {
+  treeFormApi.setState({
+    schema: useGenerationInfoTreeFormSchema(props.columns),
+  });
+  // 树表信息回显
+  treeFormApi.setValues(props.table as any);
+}
+
+/** 更新主子表信息表单 schema */
+function updateSubSchema(): void {
+  subFormApi.setState({
+    schema: useGenerationInfoSubTableFormSchema(props.columns, tables.value),
+  });
+  // 主子表信息回显
+  subFormApi.setValues(props.table as any);
+}
+
+/** 获取合并的表单值 */
+async function getAllFormValues(): Promise<Record<string, any>> {
+  // 基础表单值
+  const baseValues = await baseFormApi.getValues();
+  // 根据模板类型获取对应的额外表单值
+  let extraValues = {};
+  if (isTreeTable.value) {
+    extraValues = await treeFormApi.getValues();
+  } else if (isSubTable.value) {
+    extraValues = await subFormApi.getValues();
+  }
+  // 合并表单值
+  return { ...baseValues, ...extraValues };
+}
+
+/** 验证所有表单 */
+async function validateAllForms() {
+  // 验证基础表单
+  const { valid: baseFormValid } = await baseFormApi.validate();
+  // 根据模板类型验证对应的额外表单
+  let extraValid = true;
+  if (isTreeTable.value) {
+    const { valid: treeFormValid } = await treeFormApi.validate();
+    extraValid = treeFormValid;
+  } else if (isSubTable.value) {
+    const { valid: subFormValid } = await subFormApi.validate();
+    extraValid = subFormValid;
+  }
+  return baseFormValid && extraValid;
+}
+
+/** 设置表单值 */
+function setAllFormValues(values: Record<string, any>): void {
+  if (!values) {
+    return;
+  }
+
+  // 记录模板类型
+  currentTemplateType.value = values.templateType;
+
+  // 设置基础表单值
+  baseFormApi.setValues(values);
+  // 根据模板类型设置对应的额外表单值
+  if (isTreeTable.value) {
+    treeFormApi.setValues(values);
+  } else if (isSubTable.value) {
+    subFormApi.setValues(values);
+  }
+}
+
+/** 监听表格数据变化 */
+watch(
+  () => props.table,
+  async (val) => {
+    if (!val || isEmpty(val)) {
+      return;
+    }
+
+    const table = val as InfraCodegenApi.CodegenTable;
+    // 初始化树表的 schema
+    updateTreeSchema();
+    // 设置表单值
+    setAllFormValues(table);
+    // 获取表数据，用于主子表选择
+    const dataSourceConfigId = table.dataSourceConfigId;
+    if (dataSourceConfigId === undefined) {
+      return;
+    }
+    tables.value = await getCodegenTableList(dataSourceConfigId);
+    // 初始化子表 schema
+    updateSubSchema();
+  },
+  { immediate: true },
+);
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: validateAllForms,
+  getValues: getAllFormValues,
+});
+</script>
+
+<template>
+  <div>
+    <!-- 基础表单 -->
+    <BaseForm />
+    <!-- 树表信息表单 -->
+    <TreeForm v-if="isTreeTable" />
+    <!-- 主子表信息表单 -->
+    <SubForm v-if="isSubTable" />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/import-table.vue b/apps/web-tdesign/src/views/infra/codegen/modules/import-table.vue
new file mode 100644
index 000000000..4e7bad180
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/import-table.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from '#/adapter/tdesign';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { createCodegenList, getSchemaTableList } from '#/api/infra/codegen';
+import { $t } from '#/locales';
+import {
+  useImportTableColumns,
+  useImportTableFormSchema,
+} from '#/views/infra/codegen/data';
+
+/** 定义组件事件 */
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const formData = reactive<InfraCodegenApi.CodegenCreateListReqVO>({
+  dataSourceConfigId: 0,
+  tableNames: [], // 已选择的表列表
+});
+
+/** 表格实例 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useImportTableFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useImportTableColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (formValues.dataSourceConfigId === undefined) {
+            return [];
+          }
+          formData.dataSourceConfigId = formValues.dataSourceConfigId;
+          return await getSchemaTableList({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'name',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<InfraCodegenApi.DatabaseTable>,
+  gridEvents: {
+    checkboxChange: ({
+      records,
+    }: {
+      records: InfraCodegenApi.DatabaseTable[];
+    }) => {
+      formData.tableNames = records.map((item) => item.name);
+    },
+  },
+});
+
+/** 模态框实例 */
+const [Modal, modalApi] = useVbenModal({
+  title: '导入表',
+  class: 'w-1/2',
+  async onConfirm() {
+    modalApi.lock();
+    // 1.1 获取表单值
+    if (formData?.dataSourceConfigId === undefined) {
+      message.error('请选择数据源');
+      return;
+    }
+    // 1.2 校验是否选择了表
+    if (formData.tableNames.length === 0) {
+      message.error('请选择需要导入的表');
+      return;
+    }
+
+    // 2. 提交请求
+    const hideLoading = message.loading({
+      content: '导入中...',
+      duration: 0,
+    });
+    try {
+      await createCodegenList(formData);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      message.close(hideLoading);
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal>
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/preview-code.vue b/apps/web-tdesign/src/views/infra/codegen/modules/preview-code.vue
new file mode 100644
index 000000000..7f6d86627
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/preview-code.vue
@@ -0,0 +1,262 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { CodeEditor } from '@vben/plugins/code-editor';
+
+import { useClipboard } from '@vueuse/core';
+import { Button, Tabs } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { previewCodegen } from '#/api/infra/codegen';
+
+/** 文件树类型 */
+interface FileNode {
+  key: string;
+  title: string;
+  parentKey: string;
+  isLeaf?: boolean;
+  children?: FileNode[];
+}
+
+/** 组件状态 */
+const loading = ref(false);
+const fileTree = ref<FileNode[]>([]);
+const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
+const activeKey = ref<string>('');
+
+/** 代码地图 */
+const codeMap = ref<Map<string, string>>(new Map<string, string>());
+function setCodeMap(key: string, code: string) {
+  // 处理可能的缩进问题，特别是对Java文件
+  const trimmedCode = code.trimStart();
+  // 如果已有缓存则不重新构建
+  if (codeMap.value.has(key)) {
+    return;
+  }
+  codeMap.value.set(key, trimmedCode);
+}
+
+/** 删除代码地图 */
+function removeCodeMapKey(targetKey: any) {
+  // 只有一个代码视图时不允许删除
+  if (codeMap.value.size === 1) {
+    return;
+  }
+  if (codeMap.value.has(targetKey)) {
+    codeMap.value.delete(targetKey);
+  }
+}
+
+/** 复制代码 */
+async function copyCode() {
+  const { copy } = useClipboard();
+  const file = previewFiles.value.find(
+    (item) => item.filePath === activeKey.value,
+  );
+  if (file) {
+    await copy(file.code);
+    message.success('复制成功');
+  }
+}
+
+/** 文件节点点击事件 */
+function handleNodeClick(_: any[], e: any) {
+  if (!e.node.isLeaf) {
+    return;
+  }
+
+  activeKey.value = e.node.key;
+  const file = previewFiles.value.find((item) => {
+    const list = activeKey.value.split('.');
+    // 特殊处理 - 包合并
+    if (list.length > 2) {
+      const lang = list.pop();
+      return item.filePath === `${list.join('/')}.${lang}`;
+    }
+    return item.filePath === activeKey.value;
+  });
+  if (!file) {
+    return;
+  }
+
+  setCodeMap(activeKey.value, file.code);
+}
+
+/** 处理文件树 */
+function handleFiles(data: InfraCodegenApi.CodegenPreview[]): FileNode[] {
+  const exists: Record<string, boolean> = {};
+  const files: FileNode[] = [];
+
+  // 处理文件路径
+  for (const item of data) {
+    const paths = item.filePath.split('/');
+    let cursor = 0;
+    let fullPath = '';
+
+    while (cursor < paths.length) {
+      const path = paths[cursor] || '';
+      const oldFullPath = fullPath;
+
+      // 处理 Java 包路径特殊情况
+      if (path === 'java' && cursor + 1 < paths.length) {
+        fullPath = fullPath ? `${fullPath}/${path}` : path;
+        cursor++;
+
+        // 合并包路径
+        let packagePath = '';
+        while (cursor < paths.length) {
+          const nextPath = paths[cursor] || '';
+          if (
+            [
+              'controller',
+              'convert',
+              'dal',
+              'dataobject',
+              'enums',
+              'mysql',
+              'service',
+              'vo',
+            ].includes(nextPath)
+          ) {
+            break;
+          }
+          packagePath = packagePath ? `${packagePath}.${nextPath}` : nextPath;
+          cursor++;
+        }
+
+        if (packagePath) {
+          const newFullPath = `${fullPath}/${packagePath}`;
+          if (!exists[newFullPath]) {
+            exists[newFullPath] = true;
+            files.push({
+              key: newFullPath,
+              title: packagePath,
+              parentKey: oldFullPath || '/',
+              isLeaf: cursor === paths.length,
+            });
+          }
+          fullPath = newFullPath;
+        }
+        continue;
+      }
+
+      // 处理普通路径
+      fullPath = fullPath ? `${fullPath}/${path}` : path;
+      if (!exists[fullPath]) {
+        exists[fullPath] = true;
+        files.push({
+          key: fullPath,
+          title: path,
+          parentKey: oldFullPath || '/',
+          isLeaf: cursor === paths.length - 1,
+        });
+      }
+      cursor++;
+    }
+  }
+
+  /** 构建树形结构 */
+  function buildTree(parentKey: string): FileNode[] {
+    return files
+      .filter((file) => file.parentKey === parentKey)
+      .map((file) => ({
+        ...file,
+        children: buildTree(file.key),
+      }));
+  }
+
+  return buildTree('/');
+}
+
+/** 模态框实例 */
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  fullscreen: true,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      // 关闭时清除代码视图缓存
+      codeMap.value.clear();
+      return;
+    }
+
+    const row = modalApi.getData<InfraCodegenApi.CodegenTable>();
+    if (!row) {
+      return;
+    }
+
+    // 加载预览数据
+    loading.value = true;
+    try {
+      const data = await previewCodegen(row.id);
+      previewFiles.value = data;
+
+      // 构建代码树，并默认选中第一个文件
+      fileTree.value = handleFiles(data);
+      if (data.length > 0) {
+        activeKey.value = data[0]?.filePath || '';
+        const code = data[0]?.code || '';
+        setCodeMap(activeKey.value, code);
+      }
+    } finally {
+      loading.value = false;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="代码预览">
+    <div class="flex h-full" v-loading="loading">
+      <!-- 文件树 -->
+      <div
+        class="h-full w-1/3 overflow-auto border-r border-gray-200 pr-4 dark:border-gray-700"
+      >
+        <DirectoryTree
+          v-if="fileTree.length > 0"
+          default-expand-all
+          v-model:active-key="activeKey"
+          @select="handleNodeClick"
+          :tree-data="fileTree"
+        />
+      </div>
+      <!-- 代码预览 -->
+      <div class="h-full w-2/3 overflow-auto pl-4">
+        <Tabs
+          v-model:active-key="activeKey"
+          hide-add
+          type="editable-card"
+          @edit="removeCodeMapKey"
+        >
+          <Tabs.TabPane
+            v-for="key in codeMap.keys()"
+            :key="key"
+            :tab="key.split('/').pop()"
+          >
+            <div
+              class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
+            >
+              <CodeEditor
+                class="max-h-200"
+                :value="codeMap.get(activeKey)"
+                mode="application/json"
+                :readonly="true"
+                :bordered="true"
+                :auto-format="false"
+              />
+            </div>
+          </Tabs.TabPane>
+          <template #rightExtra>
+            <Button theme="primary" ghost @click="copyCode">
+              <IconifyIcon icon="lucide:copy" />
+              复制代码
+            </Button>
+          </template>
+        </Tabs>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/config/data.ts b/apps/web-tdesign/src/views/infra/config/data.ts
new file mode 100644
index 000000000..a365fbd78
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/config/data.ts
@@ -0,0 +1,187 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '参数分类',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数分类',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '参数名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'key',
+      label: '参数键名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数键名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '参数键值',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数键值',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'visible',
+      label: '是否可见',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: true,
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '参数名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'key',
+      label: '参数键名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数键名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '系统内置',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE, 'number'),
+        placeholder: '请选择系统内置',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '参数主键',
+      minWidth: 100,
+    },
+    {
+      field: 'category',
+      title: '参数分类',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '参数名称',
+      minWidth: 200,
+    },
+    {
+      field: 'key',
+      title: '参数键名',
+      minWidth: 200,
+    },
+    {
+      field: 'value',
+      title: '参数键值',
+      minWidth: 150,
+    },
+    {
+      field: 'visible',
+      title: '是否可见',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'type',
+      title: '系统内置',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_CONFIG_TYPE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/config/index.vue b/apps/web-tdesign/src/views/infra/config/index.vue
new file mode 100644
index 000000000..098a65af4
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/config/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraConfigApi } from '#/api/infra/config';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteConfig,
+  deleteConfigList,
+  exportConfig,
+  getConfigPage,
+} from '#/api/infra/config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportConfig(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '参数配置.xls', source: data });
+}
+
+/** 创建参数 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑参数 */
+function handleEdit(row: InfraConfigApi.Config) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除参数 */
+async function handleDelete(row: InfraConfigApi.Config) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除参数 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraConfigApi.Config[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraConfigApi.Config>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="参数列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['参数']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:config:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:config:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:config:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/config/modules/form.vue b/apps/web-tdesign/src/views/infra/config/modules/form.vue
new file mode 100644
index 000000000..caacf3074
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/config/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { InfraConfigApi } from '#/api/infra/config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createConfig, getConfig, updateConfig } from '#/api/infra/config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraConfigApi.Config>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['参数'])
+    : $t('ui.actionTitle.create', ['参数']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraConfigApi.Config;
+    try {
+      await (formData.value?.id ? updateConfig(data) : createConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraConfigApi.Config>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/data.ts b/apps/web-tdesign/src/views/infra/dataSourceConfig/data.ts
new file mode 100644
index 000000000..6f4c6027f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/data.ts
@@ -0,0 +1,92 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '数据源名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据源名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'url',
+      label: '数据源连接',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据源连接',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'password',
+      label: '密码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入密码',
+        type: 'password',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '主键编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '数据源名称',
+      minWidth: 150,
+    },
+    {
+      field: 'url',
+      title: '数据源连接',
+      minWidth: 300,
+    },
+    {
+      field: 'username',
+      title: '用户名',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue b/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
new file mode 100644
index 000000000..18be0d1e4
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDataSourceConfig,
+  deleteDataSourceConfigList,
+  getDataSourceConfigList,
+} from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建数据源 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑数据源 */
+function handleEdit(row: InfraDataSourceConfigApi.DataSourceConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除数据源 */
+async function handleDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDataSourceConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除数据源 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDataSourceConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraDataSourceConfigApi.DataSourceConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: getDataSourceConfigList,
+      },
+    },
+  } as VxeTableGridOptions<InfraDataSourceConfigApi.DataSourceConfig>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="数据源列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['数据源']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:data-source-config:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:data-source-config:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:data-source-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:data-source-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/modules/form.vue b/apps/web-tdesign/src/views/infra/dataSourceConfig/modules/form.vue
new file mode 100644
index 000000000..e84bdad3e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDataSourceConfig,
+  getDataSourceConfig,
+  updateDataSourceConfig,
+} from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraDataSourceConfigApi.DataSourceConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['数据源'])
+    : $t('ui.actionTitle.create', ['数据源']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as InfraDataSourceConfigApi.DataSourceConfig;
+    try {
+      await (formData.value?.id
+        ? updateDataSourceConfig(data)
+        : createDataSourceConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraDataSourceConfigApi.DataSourceConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDataSourceConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo01/data.ts b/apps/web-tdesign/src/views/infra/demo/demo01/data.ts
new file mode 100644
index 000000000..ec8ca5d02
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo01/data.ts
@@ -0,0 +1,152 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生年',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+    {
+      fieldName: 'avatar',
+      label: '头像',
+      component: 'ImageUpload',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo01ContactApi.Demo01Contact>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生年',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo01/index.vue b/apps/web-tdesign/src/views/infra/demo/demo01/index.vue
new file mode 100644
index 000000000..3bf387dd6
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo01/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo01Contact,
+  deleteDemo01ContactList,
+  exportDemo01Contact,
+  getDemo01ContactPage,
+} from '#/api/infra/demo/demo01';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
+}
+
+/** 创建示例联系人 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例联系人 */
+function handleEdit(row: Demo01ContactApi.Demo01Contact) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除示例联系人 */
+async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01Contact(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除示例联系人 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01ContactList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo01ContactApi.Demo01Contact[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo01ContactPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="示例联系人列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo01-contact:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo01-contact:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:demo01-contact:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo01-contact:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo01-contact:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo01/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo01/modules/form.vue
new file mode 100644
index 000000000..4d6d70bdf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo01/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo01Contact,
+  getDemo01Contact,
+  updateDemo01Contact,
+} from '#/api/infra/demo/demo01';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo01ContactApi.Demo01Contact>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例联系人'])
+    : $t('ui.actionTitle.create', ['示例联系人']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo01ContactApi.Demo01Contact;
+    try {
+      await (formData.value?.id
+        ? updateDemo01Contact(data)
+        : createDemo01Contact(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDemo01Contact(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo02/data.ts b/apps/web-tdesign/src/views/infra/demo/demo02/data.ts
new file mode 100644
index 000000000..74430fb28
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo02/data.ts
@@ -0,0 +1,120 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { handleTree } from '@vben/utils';
+
+import { getDemo02CategoryList } from '#/api/infra/demo/demo02';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级示例分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getDemo02CategoryList({});
+          data.unshift({
+            id: 0,
+            name: '顶级示例分类',
+          });
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级示例分类',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '父级编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入父级编号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo02CategoryApi.Demo02Category>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+      treeNode: true,
+    },
+    {
+      field: 'parentId',
+      title: '父级编号',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo02/index.vue b/apps/web-tdesign/src/views/infra/demo/demo02/index.vue
new file mode 100644
index 000000000..4c9fe1e95
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo02/index.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo02Category,
+  exportDemo02Category,
+  getDemo02CategoryList,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo02Category(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
+}
+
+/** 创建示例分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例分类 */
+function handleEdit(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData(row).open();
+}
+
+/** 添加下级示例分类 */
+function handleAppend(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 删除示例分类 */
+async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo02Category(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getDemo02CategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="示例分类列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo02-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo02-category:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo02-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo02-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo02-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo02/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo02/modules/form.vue
new file mode 100644
index 000000000..a7440947a
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo02/modules/form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo02Category,
+  getDemo02Category,
+  updateDemo02Category,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo02CategoryApi.Demo02Category>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例分类'])
+    : $t('ui.actionTitle.create', ['示例分类']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as Demo02CategoryApi.Demo02Category;
+    try {
+      await (formData.value?.id
+        ? updateDemo02Category(data)
+        : createDemo02Category(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDemo02Category(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/data.ts b/apps/web-tdesign/src/views/infra/demo/demo03/erp/data.ts
new file mode 100644
index 000000000..f8acac72a
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/data.ts
@@ -0,0 +1,381 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生日期',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入简介',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生日期',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03CourseFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'score',
+      label: '分数',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分数',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useDemo03CourseGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'studentId',
+      label: '学生编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入学生编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'score',
+      label: '分数',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入分数',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03GradeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班主任',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useDemo03GradeGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'studentId',
+      label: '学生编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入学生编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入班主任',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'teacher',
+      title: '班主任',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/index.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/index.vue
new file mode 100644
index 000000000..78db8cc64
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/index.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Form from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+const selectDemo03Student = ref<Demo03StudentApi.Demo03Student>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: '600px',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      isCurrent: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
+      selectDemo03Student.value = row;
+    },
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <div>
+      <Grid table-title="学生列表">
+        <template #toolbar-tools>
+          <TableAction
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['学生']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['infra:demo03-student:create'],
+                onClick: handleCreate,
+              },
+              {
+                label: $t('ui.actionTitle.export'),
+                type: 'primary',
+                icon: ACTION_ICON.DOWNLOAD,
+                auth: ['infra:demo03-student:export'],
+                onClick: handleExport,
+              },
+              {
+                label: $t('ui.actionTitle.deleteBatch'),
+                type: 'danger',
+                icon: ACTION_ICON.DELETE,
+                disabled: isEmpty(checkedIds),
+                auth: ['infra:demo03-student:delete'],
+                onClick: handleDeleteBatch,
+              },
+            ]"
+          />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'primary',
+                variant: 'text',
+                icon: ACTION_ICON.EDIT,
+                auth: ['infra:demo03-student:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'danger',
+                variant: 'text',
+                icon: ACTION_ICON.DELETE,
+                auth: ['infra:demo03-student:delete'],
+                popConfirm: {
+                  title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+
+      <!-- 子表的表单 -->
+      <Tabs v-model:active-key="subTabsName" class="mt-2">
+        <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+          <Demo03CourseList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+          <Demo03GradeList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
new file mode 100644
index 000000000..4c747e7cd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Course,
+  getDemo03Course,
+  updateDemo03Course,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useDemo03CourseFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Course>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生课程'])
+    : $t('ui.actionTitle.create', ['学生课程']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03CourseFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
+    data.studentId = formData.value?.studentId;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Course(data)
+        : createDemo03Course(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Course(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
new file mode 100644
index 000000000..89168cbde
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Course,
+  deleteDemo03CourseList,
+  getDemo03CoursePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import {
+  useDemo03CourseGridColumns,
+  useDemo03CourseGridFormSchema,
+} from '../data';
+import Demo03CourseForm from './demo03-course-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03CourseForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生课程 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生课程 */
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Course(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生课程 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03CourseList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Course[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDemo03CourseGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDemo03CourseGridColumns(),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (!props.studentId) {
+            return [];
+          }
+          return await getDemo03CoursePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            studentId: props.studentId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <FormModal @success="handleRefresh" />
+  <Grid table-title="学生课程列表">
+    <template #toolbar-tools>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生课程']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'danger',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            variant: 'text',
+            icon: ACTION_ICON.EDIT,
+            auth: ['infra:demo03-student:update'],
+            onClick: handleEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            variant: 'text',
+            type: 'danger',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..f5167b3e8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Grade,
+  getDemo03Grade,
+  updateDemo03Grade,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useDemo03GradeFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Grade>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生班级'])
+    : $t('ui.actionTitle.create', ['学生班级']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03GradeFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
+    data.studentId = formData.value?.studentId;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Grade(data)
+        : createDemo03Grade(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Grade(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..2a4df3b5a
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Grade,
+  deleteDemo03GradeList,
+  getDemo03GradePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import {
+  useDemo03GradeGridColumns,
+  useDemo03GradeGridFormSchema,
+} from '../data';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03GradeForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生班级 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生班级 */
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生班级 */
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Grade(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生班级 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03GradeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDemo03GradeGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDemo03GradeGridColumns(),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (!props.studentId) {
+            return [];
+          }
+          return await getDemo03GradePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            studentId: props.studentId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <FormModal @success="handleRefresh" />
+  <Grid table-title="学生班级列表">
+    <template #toolbar-tools>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生班级']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'danger',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            variant: 'text',
+            icon: ACTION_ICON.EDIT,
+            auth: ['infra:demo03-student:update'],
+            onClick: handleEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            variant: 'text',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/form.vue
new file mode 100644
index 000000000..cc417c6bd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Student>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDemo03Student(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/data.ts b/apps/web-tdesign/src/views/infra/demo/demo03/inner/data.ts
new file mode 100644
index 000000000..0166ba1c0
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/data.ts
@@ -0,0 +1,276 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生日期',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入简介',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    { type: 'expand', width: 80, slots: { content: 'expand_content' } },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生日期',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 新增/修改列表的字段 */
+export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+      slots: { default: 'score' },
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03GradeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班主任',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'teacher',
+      title: '班主任',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/index.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/index.vue
new file mode 100644
index 000000000..5e2b18a8b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/index.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/inner';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Form from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.reload();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="学生列表">
+      <template #expand_content="{ row }">
+        <!-- 子表的表单 -->
+        <Tabs v-model:active-key="subTabsName" class="mx-8">
+          <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+            <Demo03CourseList :student-id="row?.id" />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+            <Demo03GradeList :student-id="row?.id" />
+          </Tabs.TabPane>
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['学生']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo03-student:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo03-student:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo03-student:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
new file mode 100644
index 000000000..2533a2f3c
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { nextTick, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/inner';
+import { $t } from '#/locales';
+
+import { useDemo03CourseGridEditColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03CourseGridEditColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 添加学生课程 */
+async function handleAdd() {
+  await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await gridApi.grid.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = gridApi.grid.getData() as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
+    ];
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await gridApi.grid.loadData(
+      await getDemo03CourseListByStudentId(props.studentId!),
+    );
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mx-4">
+    <template #name="{ row }">
+      <Input v-model="row.name" />
+    </template>
+    <template #score="{ row }">
+      <Input v-model="row.score" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            variant: 'text',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+  <div class="-mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="handleAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
new file mode 100644
index 000000000..50297db48
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { nextTick, watch } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/inner';
+
+import { useDemo03CourseGridColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03CourseGridColumns(),
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.grid.loadData(
+    await getDemo03CourseListByStudentId(props.studentId!),
+  );
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid table-title="学生课程列表" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..3e2854608
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { nextTick, watch } from 'vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/inner';
+
+import { useDemo03GradeFormSchema } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03GradeFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => {
+    const { valid } = await formApi.validate();
+    return valid;
+  },
+  getValues: formApi.getValues,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await formApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form class="mx-4" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..1ad2db740
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { nextTick, watch } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/inner';
+
+import { useDemo03GradeGridColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03GradeGridColumns(),
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.grid.loadData([
+    await getDemo03GradeByStudentId(props.studentId!),
+  ]);
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid table-title="学生班级列表" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/form.vue
new file mode 100644
index 000000000..7d0ced1a5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/inner';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Student>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 校验子表单
+    const demo03GradeValid = await demo03GradeFormRef.value?.validate();
+    if (!demo03GradeValid) {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = await demo03GradeFormRef.value?.getValues();
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/data.ts b/apps/web-tdesign/src/views/infra/demo/demo03/normal/data.ts
new file mode 100644
index 000000000..583437d99
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/data.ts
@@ -0,0 +1,211 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生日期',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入简介',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生日期',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 新增/修改列表的字段 */
+export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+      slots: { default: 'score' },
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03GradeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班主任',
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/index.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/index.vue
new file mode 100644
index 000000000..bd1f5c030
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="学生列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['学生']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo03-student:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo03-student:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:demo03-student:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo03-student:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
new file mode 100644
index 000000000..3923249c8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+import { useDemo03CourseGridEditColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03CourseGridEditColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 添加学生课程 */
+async function handleAdd() {
+  await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await gridApi.grid.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = gridApi.grid.getData() as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
+    ];
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await gridApi.grid.loadData(
+      await getDemo03CourseListByStudentId(props.studentId!),
+    );
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mx-4">
+    <template #name="{ row }">
+      <Input v-model="row.name" />
+    </template>
+    <template #score="{ row }">
+      <Input v-model="row.score" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            variant: 'text',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+  <div class="-mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="handleAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..5d5f396bf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { nextTick, watch } from 'vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+import { useDemo03GradeFormSchema } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03GradeFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => {
+    const { valid } = await formApi.validate();
+    return valid;
+  },
+  getValues: formApi.getValues,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await formApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form class="mx-4" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/form.vue
new file mode 100644
index 000000000..cd3d8854b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Student>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 校验子表单
+    const demo03GradeValid = await demo03GradeFormRef.value?.validate();
+    if (!demo03GradeValid) {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = await demo03GradeFormRef.value?.getValues();
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo01/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo01/index.vue
new file mode 100644
index 000000000..a9b00a346
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo01/index.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo01Contact,
+  deleteDemo01ContactList,
+  exportDemo01Contact,
+  getDemo01ContactPage,
+} from '#/api/infra/demo/demo01';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo01ContactForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo01ContactApi.Demo01Contact[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo01ContactPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo01ContactForm,
+  destroyOnClose: true,
+});
+
+/** 创建示例联系人 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例联系人 */
+function handleEdit(row: Demo01ContactApi.Demo01Contact) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除示例联系人 */
+async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01Contact(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除示例联系人 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01ContactList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo01ContactApi.Demo01Contact[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo01Contact(queryParams);
+    downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="示例联系人">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo01-contact:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['示例联系人']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo01-contact:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo01-contact:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生年" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="avatar" title="头像" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo01-contact:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              theme="danger"
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo01-contact:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo01/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo01/modules/form.vue
new file mode 100644
index 000000000..362ca24b1
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo01/modules/form.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { DateValue } from 'tdesign-vue-next';
+
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { DatePicker, Form, Input, Radio, RadioGroup } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo01Contact,
+  getDemo01Contact,
+  updateDemo01Contact,
+} from '#/api/infra/demo/demo01';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { ImageUpload } from '#/components/upload';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+  avatar: undefined,
+});
+const rules: Record<string, any[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生年不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例联系人'])
+    : $t('ui.actionTitle.create', ['示例联系人']);
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+    avatar: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo01ContactApi.Demo01Contact;
+    try {
+      await (formData.value?.id
+        ? updateDemo01Contact(data)
+        : createDemo01Contact(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo01Contact(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生年" name="birthday">
+        <DatePicker
+          v-model="formData.birthday as DateValue"
+          value-format="x"
+          placeholder="选择出生年"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+      <Form.Item label="头像" name="avatar">
+        <ImageUpload v-model="formData.avatar" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo02/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo02/index.vue
new file mode 100644
index 000000000..fdc92f64e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo02/index.vue
@@ -0,0 +1,255 @@
+<script lang="ts" setup>
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import { Button, DateRangePicker, Form, Input } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo02Category,
+  exportDemo02Category,
+  getDemo02CategoryList,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo02CategoryForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<any[]>([]); // 树列表的数据
+
+const queryParams = reactive({
+  name: undefined,
+  parentId: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    list.value = await getDemo02CategoryList(params);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo02CategoryForm,
+  destroyOnClose: true,
+});
+
+/** 创建示例分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例分类 */
+function handleEdit(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData(row).open();
+}
+
+/** 新增下级示例分类 */
+function handleAppend(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 删除示例分类 */
+async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo02Category(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo02Category(queryParams);
+    downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  tableRef.value?.setAllTreeExpand(isExpanded.value);
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="父级编号" name="parentId">
+          <Input
+            v-model="queryParams.parentId"
+            placeholder="请输入父级编号"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="示例分类">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button @click="toggleExpand" class="mr-2">
+            {{ isExpanded ? '收缩' : '展开' }}
+          </Button>
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo02-category:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['示例分类']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo02-category:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        :tree-config="{
+          parentField: 'parentId',
+          rowField: 'id',
+          transform: true,
+          expandAll: true,
+          reserve: true,
+        }"
+        show-overflow
+        :loading="loading"
+      >
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" tree-node />
+        <VxeColumn field="parentId" title="父级编号" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              theme="primary"
+              variant="text"
+              @click="handleAppend(row)"
+              v-access:code="['infra:demo02-category:create']"
+            >
+              新增下级
+            </Button>
+            <Button
+              size="small"
+              theme="primary"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo02-category:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              theme="danger"
+              class="ml-2"
+              :disabled="!isEmpty(row.children)"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo02-category:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo02/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo02/modules/form.vue
new file mode 100644
index 000000000..7f444e02b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo02/modules/form.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Form, Input, TreeSelect } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo02Category,
+  getDemo02Category,
+  getDemo02CategoryList,
+  updateDemo02Category,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo02CategoryApi.Demo02Category>>({
+  id: undefined,
+  name: undefined,
+  parentId: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }],
+};
+const demo02CategoryTree = ref<any[]>([]); // 树形结构
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例分类'])
+    : $t('ui.actionTitle.create', ['示例分类']);
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    parentId: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+/** 获得示例分类树 */
+async function getDemo02CategoryTree() {
+  demo02CategoryTree.value = [];
+  const data = await getDemo02CategoryList({});
+  data.unshift({
+    id: 0,
+    name: '顶级示例分类',
+  });
+  demo02CategoryTree.value = handleTree(data);
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo02CategoryApi.Demo02Category;
+    try {
+      await (formData.value?.id
+        ? updateDemo02Category(data)
+        : createDemo02Category(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo02Category(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+    // 加载树数据
+    await getDemo02CategoryTree();
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="父级编号" name="parentId">
+        <TreeSelect
+          v-model="formData.parentId"
+          :tree-data="demo02CategoryTree"
+          :field-names="{
+            label: 'name',
+            value: 'id',
+            children: 'children',
+          }"
+          checkable
+          tree-default-expand-all
+          placeholder="请选择父级编号"
+        />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/index.vue
new file mode 100644
index 000000000..e246a62c6
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/index.vue
@@ -0,0 +1,339 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/erp';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Demo03StudentForm from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+const selectDemo03Student = ref<Demo03StudentApi.Demo03Student>();
+async function onCellClick({ row }: { row: Demo03StudentApi.Demo03Student }) {
+  selectDemo03Student.value = row;
+}
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Student[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  description: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo03StudentPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03StudentForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id)!;
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo03Student(queryParams);
+    downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        @cell-click="onCellClick"
+        :row-config="{
+          keyField: 'id',
+          isHover: true,
+          isCurrent: true,
+        }"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生日期" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+
+    <ContentWrap>
+      <!-- 子表的表单 -->
+      <Tabs v-model:active-key="subTabsName">
+        <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+          <Demo03CourseList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+          <Demo03GradeList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+      </Tabs>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
new file mode 100644
index 000000000..91634369f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Course,
+  getDemo03Course,
+  updateDemo03Course,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生课程'])
+    : $t('ui.actionTitle.create', ['学生课程']);
+});
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Course>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  score: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  score: [{ required: true, message: '分数不能为空', trigger: 'blur' }],
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Course;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Course(data)
+        : createDemo03Course(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Course(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+  },
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    score: undefined,
+  };
+  formRef.value?.resetFields();
+}
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="学生编号" name="studentId">
+        <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+      </Form.Item>
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="分数" name="score">
+        <Input v-model="formData.score" placeholder="请输入分数" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
new file mode 100644
index 000000000..1730c5094
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Course,
+  deleteDemo03CourseList,
+  getDemo03CoursePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03CourseForm from './demo03-course-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03CourseForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生课程 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生课程 */
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Course(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生课程 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03CourseList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Course[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryFormRef = ref(); // 搜索的表单
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined,
+  name: undefined,
+  score: undefined,
+  createTime: undefined,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    params.studentId = props.studentId;
+    const data = await getDemo03CoursePage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <FormModal @success="getList" />
+  <div class="h-[600px]">
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="学生编号" name="studentId">
+          <Input
+            v-model="queryParams.studentId"
+            placeholder="请输入学生编号"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="分数" name="score">
+          <Input
+            v-model="queryParams.score"
+            placeholder="请输入分数"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="studentId" title="学生编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="score" title="分数" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..961aa94b6
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Grade,
+  getDemo03Grade,
+  updateDemo03Grade,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生班级'])
+    : $t('ui.actionTitle.create', ['学生班级']);
+});
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Grade>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }],
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Grade;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Grade(data)
+        : createDemo03Grade(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Grade(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+  },
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    teacher: undefined,
+  };
+  formRef.value?.resetFields();
+}
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="学生编号" name="studentId">
+        <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+      </Form.Item>
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="班主任" name="teacher">
+        <Input v-model="formData.teacher" placeholder="请输入班主任" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..9b7f4e138
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Grade,
+  deleteDemo03GradeList,
+  getDemo03GradePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03GradeForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生班级 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生班级 */
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生班级 */
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Grade(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生班级 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03GradeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Grade[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryFormRef = ref(); // 搜索的表单
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+  createTime: undefined,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    params.studentId = props.studentId;
+    const data = await getDemo03GradePage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <FormModal @success="getList" />
+  <div class="h-[600px]">
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="学生编号" name="studentId">
+          <Input
+            v-model="queryParams.studentId"
+            placeholder="请输入学生编号"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="班主任" name="teacher">
+          <Input
+            v-model="queryParams.teacher"
+            placeholder="请输入班主任"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="studentId" title="学生编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="teacher" title="班主任" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/form.vue
new file mode 100644
index 000000000..395ef3535
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/form.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { DatePicker, Form, Input, Radio, RadioGroup } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/erp';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Student>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Student;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生日期" name="birthday">
+        <DatePicker
+          v-model="formData.birthday"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/index.vue
new file mode 100644
index 000000000..9e8ea1b8d
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/index.vue
@@ -0,0 +1,331 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/normal';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Demo03StudentForm from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Student[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  description: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo03StudentPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03StudentForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo03Student(queryParams);
+    downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <!-- 子表的列表 -->
+        <VxeColumn type="expand" width="60">
+          <template #content="{ row }">
+            <!-- 子表的表单 -->
+            <Tabs v-model:active-key="subTabsName" class="mx-8">
+              <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+                <Demo03CourseList :student-id="row?.id" />
+              </Tabs.TabPane>
+              <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+                <Demo03GradeList :student-id="row?.id" />
+              </Tabs.TabPane>
+            </Tabs>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生日期" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
new file mode 100644
index 000000000..31f77d290
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+const tableRef = ref<VxeTableInstance>();
+/** 添加学生课程 */
+async function onAdd() {
+  await tableRef.value?.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await tableRef.value?.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = list.value as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      tableRef.value?.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      tableRef.value?.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return data
+      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
+      ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    list.value = await getDemo03CourseListByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <VxeTable ref="tableRef" :data="list" show-overflow class="mx-4">
+    <VxeColumn field="name" title="名字" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.name" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="score" title="分数" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.score" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="operation" title="操作" align="center">
+      <template #default="{ row }">
+        <Button
+          size="small"
+          variant="text"
+          danger
+          @click="handleDelete(row)"
+          v-access:code="['infra:demo03-student:delete']"
+        >
+          {{ $t('ui.actionTitle.delete') }}
+        </Button>
+      </template>
+    </VxeColumn>
+  </VxeTable>
+  <div class="mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="onAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
new file mode 100644
index 000000000..bb49eeb74
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    list.value = await getDemo03CourseListByStudentId(props.studentId!);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ContentWrap title="学生课程列表">
+    <VxeTable :data="list" show-overflow :loading="loading">
+      <VxeColumn field="id" title="编号" align="center" />
+      <VxeColumn field="studentId" title="学生编号" align="center" />
+      <VxeColumn field="name" title="名字" align="center" />
+      <VxeColumn field="score" title="分数" align="center" />
+      <VxeColumn field="createTime" title="创建时间" align="center">
+        <template #default="{ row }">
+          {{ formatDateTime(row.createTime) }}
+        </template>
+      </VxeColumn>
+    </VxeTable>
+  </ContentWrap>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..7c59921bd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-form.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+type Rule = FormRule;
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Grade>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }],
+};
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => await formRef.value?.validate(),
+  getValues: () => formData.value,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    formData.value = await getDemo03GradeByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    class="mx-4"
+    :model="formData"
+    :rules="rules"
+    :label-col="{ span: 5 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <Form.Item label="学生编号" name="studentId">
+      <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+    </Form.Item>
+    <Form.Item label="名字" name="name">
+      <Input v-model="formData.name" placeholder="请输入名字" />
+    </Form.Item>
+    <Form.Item label="班主任" name="teacher">
+      <Input v-model="formData.teacher" placeholder="请输入班主任" />
+    </Form.Item>
+  </Form>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..a08d67af3
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Grade[]>([]); // 列表的数据
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    list.value = [await getDemo03GradeByStudentId(props.studentId!)];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ContentWrap title="学生班级列表">
+    <VxeTable :data="list" show-overflow :loading="loading">
+      <VxeColumn field="id" title="编号" align="center" />
+      <VxeColumn field="studentId" title="学生编号" align="center" />
+      <VxeColumn field="name" title="名字" align="center" />
+      <VxeColumn field="teacher" title="班主任" align="center" />
+      <VxeColumn field="createTime" title="创建时间" align="center">
+        <template #default="{ row }">
+          {{ formatDateTime(row.createTime) }}
+        </template>
+      </VxeColumn>
+    </VxeTable>
+  </ContentWrap>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/form.vue
new file mode 100644
index 000000000..646869558
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/form.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import {
+  DatePicker,
+  Form,
+  Input,
+  Radio,
+  RadioGroup,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/normal';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { $t } from '#/locales';
+
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Student>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    // 校验子表单
+    try {
+      await demo03GradeFormRef.value?.validate();
+    } catch {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade =
+      demo03GradeFormRef.value?.getValues() as Demo03StudentApi.Demo03Grade;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生日期" name="birthday">
+        <DatePicker
+          v-model="formData.birthday"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+    </Form>
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/index.vue
new file mode 100644
index 000000000..5f9d6a39e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/index.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/normal';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03StudentForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Student[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  description: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo03StudentPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03StudentForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handle(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo03Student(queryParams);
+    downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生日期" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handle(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
new file mode 100644
index 000000000..31f77d290
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+const tableRef = ref<VxeTableInstance>();
+/** 添加学生课程 */
+async function onAdd() {
+  await tableRef.value?.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await tableRef.value?.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = list.value as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      tableRef.value?.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      tableRef.value?.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return data
+      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
+      ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    list.value = await getDemo03CourseListByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <VxeTable ref="tableRef" :data="list" show-overflow class="mx-4">
+    <VxeColumn field="name" title="名字" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.name" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="score" title="分数" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.score" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="operation" title="操作" align="center">
+      <template #default="{ row }">
+        <Button
+          size="small"
+          variant="text"
+          danger
+          @click="handleDelete(row)"
+          v-access:code="['infra:demo03-student:delete']"
+        >
+          {{ $t('ui.actionTitle.delete') }}
+        </Button>
+      </template>
+    </VxeColumn>
+  </VxeTable>
+  <div class="mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="onAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..7c59921bd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-grade-form.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+type Rule = FormRule;
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Grade>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }],
+};
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => await formRef.value?.validate(),
+  getValues: () => formData.value,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    formData.value = await getDemo03GradeByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    class="mx-4"
+    :model="formData"
+    :rules="rules"
+    :label-col="{ span: 5 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <Form.Item label="学生编号" name="studentId">
+      <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+    </Form.Item>
+    <Form.Item label="名字" name="name">
+      <Input v-model="formData.name" placeholder="请输入名字" />
+    </Form.Item>
+    <Form.Item label="班主任" name="teacher">
+      <Input v-model="formData.teacher" placeholder="请输入班主任" />
+    </Form.Item>
+  </Form>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/form.vue
new file mode 100644
index 000000000..96cdcb788
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/form.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import {
+  DatePicker,
+  Form,
+  Input,
+  Radio,
+  RadioGroup,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/normal';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { $t } from '#/locales';
+
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Student>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+  };
+  formRef.value?.resetFields();
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    // 校验子表单
+    try {
+      await demo03GradeFormRef.value?.validate();
+    } catch {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = demo03GradeFormRef.value?.getValues() as any;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生日期" name="birthday">
+        <DatePicker
+          v-model="formData.birthday"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+    </Form>
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/druid/index.vue b/apps/web-tdesign/src/views/infra/druid/index.vue
new file mode 100644
index 000000000..01ec58d5f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/druid/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/druid/index.html`);
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.druid');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="数据库 MyBatis" url="https://doc.iocoder.cn/mybatis/" />
+      <DocAlert
+        title="多数据源（读写分离）"
+        url="https://doc.iocoder.cn/dynamic-datasource/"
+      />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/file/data.ts b/apps/web-tdesign/src/views/infra/file/data.ts
new file mode 100644
index 000000000..9ee70319b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/file/data.ts
@@ -0,0 +1,107 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的字段 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '文件上传',
+      component: 'Upload',
+      componentProps: {
+        placeholder: '请选择要上传的文件',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'path',
+      label: '文件路径',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件路径',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '文件类型',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 150,
+    },
+    {
+      field: 'path',
+      title: '文件路径',
+      minWidth: 200,
+      showOverflow: true,
+    },
+    {
+      field: 'url',
+      title: 'URL',
+      minWidth: 200,
+      showOverflow: true,
+    },
+    {
+      field: 'size',
+      title: '文件大小',
+      minWidth: 80,
+      formatter: 'formatFileSize',
+    },
+    {
+      field: 'type',
+      title: '文件类型',
+      minWidth: 120,
+    },
+    {
+      field: 'file-content',
+      title: '文件内容',
+      minWidth: 120,
+      slots: {
+        default: 'file-content',
+      },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/file/index.vue b/apps/web-tdesign/src/views/infra/file/index.vue
new file mode 100644
index 000000000..2f24de3a8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/file/index.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraFileApi } from '#/api/infra/file';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty, openWindow } from '@vben/utils';
+
+import { useClipboard } from '@vueuse/core';
+import { Button } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteFile, deleteFileList, getFilePage } from '#/api/infra/file';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 上传文件 */
+function handleUpload() {
+  formModalApi.setData(null).open();
+}
+
+/** 复制链接到剪贴板 */
+const { copy } = useClipboard({ legacy: true });
+async function handleCopyUrl(row: InfraFileApi.File) {
+  if (!row.url) {
+    message.error('文件 URL 为空');
+    return;
+  }
+
+  try {
+    await copy(row.url);
+    message.success('复制成功');
+  } catch {
+    message.error('复制失败');
+  }
+}
+
+/** 删除文件 */
+async function handleDelete(row: InfraFileApi.File) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name || row.path]),
+    duration: 0,
+  });
+  try {
+    await deleteFile(row.id!);
+    message.success(
+      $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
+    );
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除文件 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteFileList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraFileApi.File[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFilePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraFileApi.File>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="文件列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '上传文件',
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              onClick: handleUpload,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:file:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #file-content="{ row }">
+        <ImageViewer
+          v-if="row.type && row.type.includes('image')"
+          :images="[row.url]"
+        />
+        <Button v-else variant="text" @click="() => openWindow(row.url!)">
+          {{ row.type && row.type.includes('pdf') ? '预览' : '下载' }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '复制链接',
+              variant: 'text',
+              icon: ACTION_ICON.COPY,
+              onClick: handleCopyUrl.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:file:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/file/modules/form.vue b/apps/web-tdesign/src/views/infra/file/modules/form.vue
new file mode 100644
index 000000000..e0fa6affc
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/file/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { Upload } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { useUpload } from '#/components/upload/use-upload';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+    hideLabel: true,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await useUpload().httpRequest(data.file);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: File) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+</script>
+
+<template>
+  <Modal title="上传图片">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <!-- 上传区域 -->
+          <Upload.Dragger
+            name="file"
+            :max-count="1"
+            accept=".jpg,.png,.gif,.webp"
+            :before-upload="beforeUpload"
+            list-type="picture-card"
+          >
+            <p class="ant-upload-drag-icon">
+              <span class="icon-[ant-design--inbox-outlined] text-2xl"></span>
+            </p>
+            <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+            <p class="ant-upload-hint">
+              支持 .jpg、.png、.gif、.webp 格式图片文件
+            </p>
+          </Upload.Dragger>
+        </div>
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/data.ts b/apps/web-tdesign/src/views/infra/fileConfig/data.ts
new file mode 100644
index 000000000..efe5823f8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/fileConfig/data.ts
@@ -0,0 +1,333 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '配置名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'storage',
+      label: '存储器',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
+        placeholder: '请选择存储器',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (formValues) => formValues.id,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+    // DB / Local / FTP / SFTP
+    {
+      fieldName: 'config.basePath',
+      label: '基础路径',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入基础路径',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 10 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.host',
+      label: '主机地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入主机地址',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.port',
+      label: '主机端口',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入主机端口',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.password',
+      label: '密码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.mode',
+      label: '连接模式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '主动模式', value: 'Active' },
+          { label: '被动模式', value: 'Passive' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 11,
+      },
+    },
+    // S3
+    {
+      fieldName: 'config.endpoint',
+      label: '节点地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入节点地址',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.bucket',
+      label: '存储 bucket',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 bucket',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.accessKey',
+      label: 'accessKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 accessKey',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.accessSecret',
+      label: 'accessSecret',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 accessSecret',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.enablePathStyleAccess',
+      label: '是否 Path Style',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '启用', value: true },
+          { label: '禁用', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+      defaultValue: false,
+    },
+    {
+      fieldName: 'config.enablePublicAccess',
+      label: '公开访问',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '公开', value: true },
+          { label: '私有', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+      defaultValue: false,
+    },
+    // 通用
+    {
+      fieldName: 'config.domain',
+      label: '自定义域名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入自定义域名',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => !!formValues.storage,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '配置名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'storage',
+      label: '存储器',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
+        placeholder: '请选择存储器',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '配置名',
+      minWidth: 120,
+    },
+    {
+      field: 'storage',
+      title: '存储器',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+    },
+    {
+      field: 'master',
+      title: '主配置',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/index.vue b/apps/web-tdesign/src/views/infra/fileConfig/index.vue
new file mode 100644
index 000000000..1f2f2c065
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/fileConfig/index.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty, openWindow } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFileConfig,
+  deleteFileConfigList,
+  getFileConfigPage,
+  testFileConfig,
+  updateFileConfigMaster,
+} from '#/api/infra/file-config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建文件配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑文件配置 */
+function handleEdit(row: InfraFileConfigApi.FileConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 设为主配置 */
+async function handleMaster(row: InfraFileConfigApi.FileConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.updating', [row.name]),
+    duration: 0,
+  });
+  try {
+    await updateFileConfigMaster(row.id!);
+    message.success($t('ui.actionMessage.updateSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 测试文件配置 */
+async function handleTest(row: InfraFileConfigApi.FileConfig) {
+  const hideLoading = message.loading({
+    content: '测试上传中...',
+    duration: 0,
+  });
+  try {
+    const response = await testFileConfig(row.id!);
+    // 确认是否访问该文件
+    confirm({
+      title: '测试上传成功',
+      content: '是否要访问该文件？',
+      confirmText: '访问',
+      cancelText: '取消',
+    }).then(() => {
+      openWindow(response);
+    });
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 删除文件配置 */
+async function handleDelete(row: InfraFileConfigApi.FileConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteFileConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除文件配置 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteFileConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraFileConfigApi.FileConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFileConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="文件配置列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['文件配置']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:file-config:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:file-config:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:file-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              variant: 'text',
+              icon: 'lucide:test-tube-diagonal',
+              auth: ['infra:file-config:update'],
+              onClick: handleTest.bind(null, row),
+            },
+            {
+              label: '主配置',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:file-config:update'],
+              disabled: row.master,
+              popConfirm: {
+                title: `是否要将${row.name}设为主配置？`,
+                confirm: handleMaster.bind(null, row),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:file-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/modules/form.vue b/apps/web-tdesign/src/views/infra/fileConfig/modules/form.vue
new file mode 100644
index 000000000..19d8a5755
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/fileConfig/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createFileConfig,
+  getFileConfig,
+  updateFileConfig,
+} from '#/api/infra/file-config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraFileConfigApi.FileConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['文件配置'])
+    : $t('ui.actionTitle.create', ['文件配置']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraFileConfigApi.FileConfig;
+    try {
+      await (formData.value?.id
+        ? updateFileConfig(data)
+        : createFileConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraFileConfigApi.FileConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFileConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/data.ts b/apps/web-tdesign/src/views/infra/job/data.ts
new file mode 100644
index 000000000..5e09bfb26
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/data.ts
@@ -0,0 +1,245 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { Timeline } from 'tdesign-vue-next';
+
+import { CronTab } from '#/components/cron-tab';
+import { DictTag } from '#/components/dict-tag';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入处理器的名字',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !!values.id,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'handlerParam',
+      label: '处理器的参数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入处理器的参数',
+      },
+    },
+    {
+      fieldName: 'cronExpression',
+      label: 'CRON 表达式',
+      component: markRaw(CronTab),
+      componentProps: {
+        placeholder: '请输入 CRON 表达式',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'retryCount',
+      label: '重试次数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重试次数。设置为 0 时，不进行重试',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'retryInterval',
+      label: '重试间隔',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'monitorTimeout',
+      label: '监控超时时间',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入监控超时时间，单位：毫秒',
+        min: 0,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入任务名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '任务状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_JOB_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择任务状态',
+      },
+    },
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入处理器的名字',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '任务名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_JOB_STATUS },
+      },
+    },
+    {
+      field: 'handlerName',
+      title: '处理器的名字',
+      minWidth: 180,
+    },
+    {
+      field: 'handlerParam',
+      title: '处理器的参数',
+      minWidth: 140,
+    },
+    {
+      field: 'cronExpression',
+      title: 'CRON 表达式',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '任务编号',
+    },
+    {
+      field: 'name',
+      label: '任务名称',
+    },
+    {
+      field: 'status',
+      label: '任务状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_JOB_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'handlerName',
+      label: '处理器的名字',
+    },
+    {
+      field: 'handlerParam',
+      label: '处理器的参数',
+    },
+    {
+      field: 'cronExpression',
+      label: 'Cron 表达式',
+    },
+    {
+      field: 'retryCount',
+      label: '重试次数',
+    },
+    {
+      label: '重试间隔',
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
+      },
+    },
+    {
+      label: '监控超时时间',
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
+      },
+    },
+    {
+      field: 'nextTimes',
+      label: '后续执行时间',
+      render: (val) => {
+        if (!val || val.length === 0) {
+          return '无后续执行时间';
+        }
+        return h(Timeline, {}, () =>
+          val?.map((time: Date) =>
+            h(Timeline.Item, {}, () => formatDateTime(time)),
+          ),
+        );
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/job/index.vue b/apps/web-tdesign/src/views/infra/job/index.vue
new file mode 100644
index 000000000..561f69f3b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/index.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { InfraJobStatusEnum } from '@vben/constants';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteJob,
+  deleteJobList,
+  exportJob,
+  getJobPage,
+  runJob,
+  updateJobStatus,
+} from '#/api/infra/job';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportJob(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '定时任务.xls', source: data });
+}
+
+/** 创建任务 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑任务 */
+function handleEdit(row: InfraJobApi.Job) {
+  formModalApi.setData(row).open();
+}
+
+/** 查看任务详情 */
+function handleDetail(row: InfraJobApi.Job) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+/** 更新任务状态 */
+async function handleUpdateStatus(row: InfraJobApi.Job) {
+  const status =
+    row.status === InfraJobStatusEnum.STOP
+      ? InfraJobStatusEnum.NORMAL
+      : InfraJobStatusEnum.STOP;
+  const statusText = status === InfraJobStatusEnum.NORMAL ? '启用' : '停用';
+
+  await confirm(`确定${statusText} ${row.name} 吗？`);
+  const hideLoading = message.loading({
+    content: `正在${statusText}中...`,
+    duration: 0,
+  });
+  try {
+    await updateJobStatus(row.id!, status);
+    message.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 执行一次任务 */
+async function handleTrigger(row: InfraJobApi.Job) {
+  await confirm(`确定执行一次 ${row.name} 吗？`);
+  const hideLoading = message.loading({
+    content: '正在执行中...',
+    duration: 0,
+  });
+  try {
+    await runJob(row.id!);
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 跳转到任务日志 */
+function handleLog(row?: InfraJobApi.Job) {
+  push({
+    name: 'InfraJobLog',
+    query: row?.id ? { id: row.id } : {},
+  });
+}
+
+/** 删除任务 */
+async function handleDelete(row: InfraJobApi.Job) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteJob(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除任务 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteJobList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({ records }: { records: InfraJobApi.Job[] }) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getJobPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraJobApi.Job>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="定时任务" url="https://doc.iocoder.cn/job/" />
+      <DocAlert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+      <DocAlert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <Grid table-title="定时任务列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['任务']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:job:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:job:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '执行日志',
+              type: 'primary',
+              icon: 'lucide:history',
+              auth: ['infra:job:query'],
+              onClick: () => handleLog(undefined),
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:job:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:job:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '开启',
+              variant: 'text',
+              icon: 'lucide:circle-play',
+              auth: ['infra:job:update'],
+              ifShow: () => row.status === InfraJobStatusEnum.STOP,
+              onClick: handleUpdateStatus.bind(null, row),
+            },
+            {
+              label: '暂停',
+              variant: 'text',
+              icon: 'lucide:circle-pause',
+              auth: ['infra:job:update'],
+              ifShow: () => row.status === InfraJobStatusEnum.NORMAL,
+              onClick: handleUpdateStatus.bind(null, row),
+            },
+            {
+              label: '执行',
+              variant: 'text',
+              icon: 'lucide:clock-plus',
+              auth: ['infra:job:trigger'],
+              onClick: handleTrigger.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              auth: ['infra:job:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '日志',
+              variant: 'text',
+              auth: ['infra:job:query'],
+              onClick: handleLog.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              auth: ['infra:job:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/logger/data.ts b/apps/web-tdesign/src/views/infra/job/logger/data.ts
new file mode 100644
index 000000000..f17622cb9
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/logger/data.ts
@@ -0,0 +1,185 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入处理器的名字',
+      },
+    },
+    {
+      fieldName: 'beginTime',
+      label: '开始执行时间',
+      component: 'DatePicker',
+      componentProps: {
+        allowClear: true,
+        placeholder: '选择开始执行时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: {
+          format: 'HH:mm:ss',
+          defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
+        },
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束执行时间',
+      component: 'DatePicker',
+      componentProps: {
+        allowClear: true,
+        placeholder: '选择结束执行时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: {
+          format: 'HH:mm:ss',
+          defaultValue: dayjs('23:59:59', 'HH:mm:ss'),
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '任务状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择任务状态',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 80,
+    },
+    {
+      field: 'jobId',
+      title: '任务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'handlerName',
+      title: '处理器的名字',
+      minWidth: 180,
+    },
+    {
+      field: 'handlerParam',
+      title: '处理器的参数',
+      minWidth: 140,
+    },
+    {
+      field: 'executeIndex',
+      title: '第几次执行',
+      minWidth: 100,
+    },
+    {
+      field: 'beginTime',
+      title: '执行时间',
+      minWidth: 280,
+      formatter: ({ row }) => {
+        return `${formatDateTime(row.beginTime)} ~ ${formatDateTime(row.endTime)}`;
+      },
+    },
+    {
+      field: 'duration',
+      title: '执行时长',
+      minWidth: 120,
+      formatter: ({ row }) => {
+        return `${row.duration} 毫秒`;
+      },
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_JOB_LOG_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'jobId',
+      label: '任务编号',
+    },
+    {
+      field: 'handlerName',
+      label: '处理器的名字',
+    },
+    {
+      field: 'handlerParam',
+      label: '处理器的参数',
+    },
+    {
+      field: 'executeIndex',
+      label: '第几次执行',
+    },
+    {
+      field: 'beginTime',
+      label: '执行时间',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'duration',
+      label: '执行时长',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '';
+      },
+    },
+    {
+      field: 'status',
+      label: '任务状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'result',
+      label: '执行结果',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/job/logger/index.vue b/apps/web-tdesign/src/views/infra/job/logger/index.vue
new file mode 100644
index 000000000..c0c4a7461
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/logger/index.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { useRoute } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportJobLog, getJobLogPage } from '#/api/infra/job-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const { query } = useRoute();
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportJobLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '任务日志.xls', source: data });
+}
+
+/** 查看日志详情 */
+function handleDetail(row: InfraJobLogApi.JobLog) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getJobLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            jobId: query.id,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraJobLogApi.JobLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="定时任务" url="https://doc.iocoder.cn/job/" />
+      <DocAlert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+      <DocAlert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
+    </template>
+
+    <DetailModal />
+    <Grid table-title="任务日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:job:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:job:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/logger/modules/detail.vue b/apps/web-tdesign/src/views/infra/job/logger/modules/detail.vue
new file mode 100644
index 000000000..ceb1b5bf1
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/logger/modules/detail.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getJobLog } from '#/api/infra/job-log';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraJobLogApi.JobLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJobLog(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/modules/detail.vue b/apps/web-tdesign/src/views/infra/job/modules/detail.vue
new file mode 100644
index 000000000..f23149e2d
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/modules/detail.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getJob, getJobNextTimes } from '#/api/infra/job';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraJobApi.Job>(); // 任务详情
+const nextTimes = ref<Date[]>([]); // 下一次执行时间
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJob(data.id);
+      // 获取下一次执行时间
+      nextTimes.value = await getJobNextTimes(data.id);
+      // 将 nextTimes 赋值给 formData，以便在 schema 中使用
+      formData.value.nextTimes = nextTimes.value;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="任务详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/modules/form.vue b/apps/web-tdesign/src/views/infra/job/modules/form.vue
new file mode 100644
index 000000000..71b145da5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createJob, getJob, updateJob } from '#/api/infra/job';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraJobApi.Job>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['任务'])
+    : $t('ui.actionTitle.create', ['任务']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraJobApi.Job;
+    try {
+      await (formData.value?.id ? updateJob(data) : createJob(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraJobApi.Job>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJob(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/index.vue b/apps/web-tdesign/src/views/infra/redis/index.vue
new file mode 100644
index 000000000..0dfd62c1d
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/index.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { Card } from 'tdesign-vue-next';
+
+import { getRedisMonitorInfo } from '#/api/infra/redis';
+
+import Commands from './modules/commands.vue';
+import Info from './modules/info.vue';
+import Memory from './modules/memory.vue';
+
+const redisData = ref<InfraRedisApi.RedisMonitorInfo>();
+
+/** 统一加载 Redis 数据 */
+async function loadRedisData() {
+  try {
+    redisData.value = await getRedisMonitorInfo();
+  } catch (error) {
+    console.error('加载 Redis 数据失败', error);
+  }
+}
+
+onMounted(() => {
+  loadRedisData();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
+      <DocAlert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
+    </template>
+
+    <Card title="Redis 概览">
+      <Info :redis-data="redisData" />
+    </Card>
+
+    <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+      <Card title="内存使用">
+        <Memory :redis-data="redisData" />
+      </Card>
+
+      <Card title="命令统计">
+        <Commands :redis-data="redisData" />
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/modules/commands.vue b/apps/web-tdesign/src/views/infra/redis/modules/commands.vue
new file mode 100644
index 000000000..25c263e68
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/modules/commands.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 渲染命令统计图表 */
+function renderCommandStats() {
+  if (!props.redisData?.commandStats) {
+    return;
+  }
+
+  // 处理数据
+  const commandStats = [] as any[];
+  const nameList = [] as string[];
+  props.redisData.commandStats.forEach((row) => {
+    commandStats.push({
+      name: row.command,
+      value: row.calls,
+    });
+    nameList.push(row.command);
+  });
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '命令统计',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 30,
+      top: 10,
+      bottom: 20,
+      data: nameList,
+      textStyle: {
+        color: '#a1a1a1',
+      },
+    },
+    series: [
+      {
+        name: '命令',
+        type: 'pie',
+        radius: [20, 120],
+        center: ['40%', '60%'],
+        data: commandStats,
+        roseType: 'radius',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          label: {
+            show: true,
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  });
+}
+
+/** 监听数据变化，重新渲染图表 */
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderCommandStats();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.redisData) {
+    renderCommandStats();
+  }
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="420px" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/modules/info.vue b/apps/web-tdesign/src/views/infra/redis/modules/info.vue
new file mode 100644
index 000000000..bee9922bb
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/modules/info.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { useDescription } from '#/components/description';
+
+defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 6,
+  schema: [
+    {
+      field: 'info.redis_version',
+      label: 'Redis 版本',
+    },
+    {
+      field: 'info.redis_mode',
+      label: '运行模式',
+      render: (val) => (val === 'standalone' ? '单机' : '集群'),
+    },
+    {
+      field: 'info.tcp_port',
+      label: '端口',
+    },
+    {
+      field: 'info.connected_clients',
+      label: '客户端数',
+    },
+    {
+      field: 'info.uptime_in_days',
+      label: '运行时间(天)',
+    },
+    {
+      field: 'info.used_memory_human',
+      label: '使用内存',
+    },
+    {
+      field: 'info.used_cpu_user_children',
+      label: '使用 CPU',
+      render: (val) => Number.parseFloat(val).toFixed(2),
+    },
+    {
+      field: 'info.maxmemory_human',
+      label: '内存配置',
+    },
+    {
+      field: 'info.aof_enabled',
+      label: 'AOF 是否开启',
+      render: (val) => (val === '0' ? '否' : '是'),
+    },
+    {
+      field: 'info.rdb_last_bgsave_status',
+      label: 'RDB 是否成功',
+    },
+    {
+      field: 'dbSize',
+      label: 'Key 数量',
+    },
+    {
+      field: 'info.instantaneous_input_kbps',
+      label: '网络入口/出口',
+      render: (val, data) =>
+        `${val}kps / ${data?.info?.instantaneous_output_kbps}kps`,
+    },
+  ],
+});
+</script>
+
+<template>
+  <Descriptions :data="redisData" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/modules/memory.vue b/apps/web-tdesign/src/views/infra/redis/modules/memory.vue
new file mode 100644
index 000000000..5220c4631
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/modules/memory.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 解析内存值，移除单位，转为数字 */
+function parseMemoryValue(memStr: string | undefined): number {
+  if (!memStr) {
+    return 0;
+  }
+  try {
+    // 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
+    const str = String(memStr); // 显式转换为字符串类型
+    const match = str.match(/^([\d.]+)/);
+    return match ? Number.parseFloat(match[1] as string) : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/** 渲染内存使用图表 */
+function renderMemoryChart() {
+  if (!props.redisData?.info) {
+    return;
+  }
+
+  // 处理数据
+  const usedMemory = props.redisData.info.used_memory_human || '0';
+  const memoryValue = parseMemoryValue(usedMemory);
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '内存使用情况',
+      left: 'center',
+    },
+    tooltip: {
+      formatter: `{b} <br/>{a} : ${usedMemory}`,
+    },
+    series: [
+      {
+        name: '峰值',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        color: '#F5C74E',
+        radius: '85%',
+        center: ['50%', '50%'],
+        startAngle: 225,
+        endAngle: -45,
+        axisLine: {
+          lineStyle: {
+            color: [
+              [0.2, '#7FFF00'],
+              [0.8, '#00FFFF'],
+              [1, '#FF0000'],
+            ],
+            width: 10,
+          },
+        },
+        axisTick: {
+          length: 5,
+          lineStyle: {
+            color: '#76D9D7',
+          },
+        },
+        splitLine: {
+          length: 20,
+          lineStyle: {
+            color: '#76D9D7',
+          },
+        },
+        axisLabel: {
+          color: '#76D9D7',
+          distance: 15,
+          fontSize: 15,
+        },
+        pointer: {
+          width: 7,
+          show: true,
+        },
+        detail: {
+          show: true,
+          offsetCenter: [0, '50%'],
+          color: 'inherit',
+          fontSize: 30,
+          formatter: usedMemory,
+        },
+        progress: {
+          show: true,
+        },
+        data: [
+          {
+            value: memoryValue,
+            name: '内存消耗',
+          },
+        ],
+      },
+    ],
+  });
+}
+
+/** 监听数据变化，重新渲染图表 */
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderMemoryChart();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.redisData) {
+    renderMemoryChart();
+  }
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="420px" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/server/index.vue b/apps/web-tdesign/src/views/infra/server/index.vue
new file mode 100644
index 000000000..d8893bdbd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/server/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/admin/applications`);
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    // 友情提示：如果访问出现 404 问题：
+    // 1）boot 参考 https://doc.iocoder.cn/server-monitor/ 解决；
+    // 2）cloud 参考 https://cloud.iocoder.cn/server-monitor/ 解决
+    const data = await getConfigKey('url.spring-boot-admin');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/skywalking/index.vue b/apps/web-tdesign/src/views/infra/skywalking/index.vue
new file mode 100644
index 000000000..2ff01c3bf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/skywalking/index.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref('http://skywalking.shop.iocoder.cn');
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.skywalking');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/swagger/index.vue b/apps/web-tdesign/src/views/infra/swagger/index.vue
new file mode 100644
index 000000000..c04365cdf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/swagger/index.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/doc.html`); // Knife4j UI
+// const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.swagger');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="接口文档" url="https://doc.iocoder.cn/api-doc/" />
+    </template>
+
+    <IFrame v-if="!loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/webSocket/index.vue b/apps/web-tdesign/src/views/infra/webSocket/index.vue
new file mode 100644
index 000000000..c4fd5fa54
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/webSocket/index.vue
@@ -0,0 +1,316 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, onMounted, ref, watchEffect } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+import { formatDate } from '@vben/utils';
+
+import { useWebSocket } from '@vueuse/core';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Divider,
+  Empty,
+  Input,
+  Select,
+  Tag,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { getSimpleUserList } from '#/api/system/user';
+
+const accessStore = useAccessStore();
+const refreshToken = accessStore.refreshToken as string;
+
+const server = ref(
+  `${`${import.meta.env.VITE_BASE_URL}/infra/ws`.replace(
+    'http',
+    'ws',
+  )}?token=${refreshToken}`, // 使用 refreshToken，而不使用 accessToken 方法的原因：WebSocket 无法方便的刷新访问令牌
+); // WebSocket 服务地址
+const getIsOpen = computed(() => status.value === 'OPEN'); // WebSocket 连接是否打开
+const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')); // WebSocket 连接的展示颜色
+const getStatusText = computed(() => (getIsOpen.value ? '已连接' : '未连接')); // 连接状态文本
+
+/** 发起 WebSocket 连接 */
+const { status, data, send, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true,
+});
+
+/** 监听接收到的数据 */
+const messageList = ref(
+  [] as { text: string; time: number; type?: string; userId?: string }[],
+); // 消息列表
+const messageReverseList = computed(() => [...messageList.value].reverse());
+watchEffect(() => {
+  if (!data.value) {
+    return;
+  }
+  try {
+    // 1. 收到心跳
+    if (data.value === 'pong') {
+      // state.recordList.push({
+      //   text: '【心跳】',
+      //   time: new Date().getTime()
+      // })
+      return;
+    }
+
+    // 2.1 解析 type 消息类型
+    const jsonMessage = JSON.parse(data.value);
+    const type = jsonMessage.type;
+    const content = JSON.parse(jsonMessage.content);
+    if (!type) {
+      message.error(`未知的消息类型：${data.value}`);
+      return;
+    }
+    // 2.2 消息类型：demo-message-receive
+    if (type === 'demo-message-receive') {
+      const single = content.single;
+      messageList.value.push({
+        text: content.text,
+        time: Date.now(),
+        type: single ? 'single' : 'group',
+        userId: content.fromUserId,
+      });
+      return;
+    }
+    // 2.3 消息类型：notice-push
+    if (type === 'notice-push') {
+      messageList.value.push({
+        text: content.title,
+        time: Date.now(),
+        type: 'system',
+      });
+      return;
+    }
+    message.error(`未处理消息：${data.value}`);
+  } catch (error) {
+    message.error(`处理消息发生异常：${data.value}`);
+    console.error(error);
+  }
+});
+
+/** 发送消息 */
+const sendText = ref(''); // 发送内容
+const sendUserId = ref('all'); // 发送人
+function handlerSend() {
+  if (!sendText.value.trim()) {
+    message.warning('消息内容不能为空');
+    return;
+  }
+
+  // 1.1 先 JSON 化 message 消息内容
+  const messageContent = JSON.stringify({
+    text: sendText.value,
+    toUserId: sendUserId.value === 'all' ? undefined : sendUserId.value,
+  });
+  // 1.2 再 JSON 化整个消息
+  const jsonMessage = JSON.stringify({
+    type: 'demo-message-send',
+    content: messageContent,
+  });
+  // 2. 最后发送消息
+  send(jsonMessage);
+  sendText.value = '';
+}
+
+/** 切换 websocket 连接状态 */
+function toggleConnectStatus() {
+  if (getIsOpen.value) {
+    close();
+  } else {
+    open();
+  }
+}
+
+/** 获取消息类型的徽标颜色 */
+function getMessageBadgeColor(type?: string) {
+  switch (type) {
+    case 'group': {
+      return 'green';
+    }
+    case 'single': {
+      return 'blue';
+    }
+    case 'system': {
+      return 'red';
+    }
+    default: {
+      return 'default';
+    }
+  }
+}
+
+/** 获取消息类型的文本 */
+function getMessageTypeText(type?: string) {
+  switch (type) {
+    case 'group': {
+      return '群发';
+    }
+    case 'single': {
+      return '单发';
+    }
+    case 'system': {
+      return '系统';
+    }
+    default: {
+      return '未知';
+    }
+  }
+}
+
+/** 初始化 */
+const userList = ref<SystemUserApi.User[]>([]); // 用户列表
+onMounted(async () => {
+  userList.value = await getSimpleUserList();
+});
+</script>
+
+<template>
+  <Page>
+    <template #doc>
+      <DocAlert
+        title="WebSocket 实时通信"
+        url="https://doc.iocoder.cn/websocket/"
+      />
+    </template>
+
+    <div class="mt-4 flex flex-col gap-4 md:flex-row">
+      <!-- 左侧：建立连接、发送消息 -->
+      <Card :bordered="false" class="w-full md:w-1/2">
+        <template #title>
+          <div class="flex items-center">
+            <Badge :status="getIsOpen ? 'success' : 'error'" />
+            <span class="ml-2 text-lg font-medium">连接管理</span>
+          </div>
+        </template>
+        <div class="mb-4 flex items-center rounded-lg p-3">
+          <span class="mr-4 font-medium">连接状态:</span>
+          <Tag :color="getTagColor" class="px-3 py-1">{{ getStatusText }}</Tag>
+        </div>
+        <div class="mb-6 flex space-x-2">
+          <Input v-model="server" disabled class="rounded-md" size="large">
+            <template #addonBefore>
+              <span class="text-gray-600">服务地址</span>
+            </template>
+          </Input>
+          <Button
+            :theme="getIsOpen ? 'default' : 'primary'"
+            :danger="getIsOpen"
+            size="large"
+            class="flex-shrink-0"
+            @click="toggleConnectStatus"
+          >
+            {{ getIsOpen ? '关闭连接' : '开启连接' }}
+          </Button>
+        </div>
+
+        <Divider>
+          <span class="text-gray-500">消息发送</span>
+        </Divider>
+
+        <Select
+          v-model="sendUserId"
+          class="mb-3 w-full"
+          size="large"
+          placeholder="请选择接收人"
+          :disabled="!getIsOpen"
+        >
+          <Select.Option key="" value="" label="所有人">
+            <div class="flex items-center">
+              <Avatar size="small" class="mr-2">全</Avatar>
+              <span>所有人</span>
+            </div>
+          </Select.Option>
+          <Select.Option
+            v-for="user in userList"
+            :key="user.id"
+            :value="user.id"
+            :label="user.nickname"
+          >
+            <div class="flex items-center">
+              <Avatar size="small" class="mr-2">
+                {{ user.nickname.slice(0, 1) }}
+              </Avatar>
+              <span>{{ user.nickname }}</span>
+            </div>
+          </Select.Option>
+        </Select>
+
+        <Input.TextArea
+          v-model="sendText"
+          :auto-size="{ minRows: 3, maxRows: 6 }"
+          :disabled="!getIsOpen"
+          class="border-1 rounded-lg"
+          allow-clear
+          placeholder="请输入你要发送的消息..."
+        />
+
+        <Button
+          :disabled="!getIsOpen"
+          block
+          class="mt-4"
+          theme="primary"
+          size="large"
+          @click="handlerSend"
+        >
+          <template #icon>
+            <IconifyIcon icon="lucide:send-horizontal" />
+          </template>
+          发送消息
+        </Button>
+      </Card>
+
+      <!-- 右侧：消息记录 -->
+      <Card :bordered="false" class="w-full md:w-1/2">
+        <template #title>
+          <div class="flex items-center">
+            <IconifyIcon
+              icon="lucide:message-circle-more"
+              class="mr-2 text-lg"
+            />
+            <span class="text-lg font-medium">消息记录</span>
+            <Tag v-if="messageList.length > 0" class="ml-2">
+              {{ messageList.length }} 条
+            </Tag>
+          </div>
+        </template>
+        <div class="h-96 overflow-auto rounded-lg p-2">
+          <Empty v-if="messageList.length === 0" description="暂无消息记录" />
+          <div v-else class="space-y-3">
+            <div
+              v-for="msg in messageReverseList"
+              :key="msg.time"
+              class="rounded-lg p-3 shadow-sm"
+            >
+              <div class="mb-1 flex items-center justify-between">
+                <div class="flex items-center">
+                  <Badge :color="getMessageBadgeColor(msg.type)" />
+                  <span class="ml-1 font-medium text-gray-600">
+                    {{ getMessageTypeText(msg.type) }}
+                  </span>
+                  <span v-if="msg.userId" class="ml-2 text-gray-500">
+                    用户 ID: {{ msg.userId }}
+                  </span>
+                </div>
+                <span class="text-xs text-gray-400">
+                  {{ formatDate(msg.time) }}
+                </span>
+              </div>
+              <div class="mt-2 break-words text-gray-800">
+                {{ msg.text }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/area/data.ts b/apps/web-tdesign/src/views/system/area/data.ts
new file mode 100644
index 000000000..e6cc06c99
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/area/data.ts
@@ -0,0 +1,48 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemAreaApi } from '#/api/system/area';
+
+import { z } from '#/adapter/form';
+
+/** 查询 IP 的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'ip',
+      label: 'IP 地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 IP 地址',
+      },
+      rules: z.string().ip({ message: '请输入正确的 IP 地址' }),
+    },
+    {
+      fieldName: 'result',
+      label: '地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '展示查询 IP 结果',
+        readonly: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '地区编码',
+      minWidth: 120,
+      align: 'left',
+      fixed: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'name',
+      title: '地区名称',
+      minWidth: 200,
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/area/index.vue b/apps/web-tdesign/src/views/system/area/index.vue
new file mode 100644
index 000000000..a07141905
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/area/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAreaTree } from '#/api/system/area';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查询 IP */
+function handleQueryIp() {
+  formModalApi.setData(null).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getAreaTree();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+    treeConfig: {
+      rowField: 'id',
+      reserve: true,
+    },
+  } as VxeTableGridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="地区列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: 'IP 查询',
+              type: 'primary',
+              icon: ACTION_ICON.SEARCH,
+              onClick: handleQueryIp,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/area/modules/form.vue b/apps/web-tdesign/src/views/system/area/modules/form.vue
new file mode 100644
index 000000000..67e1db080
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/area/modules/form.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { getAreaByIp } from '#/api/system/area';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const [Form, { setFieldValue, validate, getValues }] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await getValues();
+    try {
+      const result = await getAreaByIp(data.ip);
+      // 设置结果
+      await setFieldValue('result', result);
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="IP 查询">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dept/data.ts b/apps/web-tdesign/src/views/system/dept/data.ts
new file mode 100644
index 000000000..f5421c429
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dept/data.ts
@@ -0,0 +1,162 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getDeptList();
+          data.unshift({
+            id: 0,
+            name: '顶级部门',
+          });
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级部门',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '部门名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入部门名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'leaderUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择负责人',
+        allowClear: true,
+      },
+      rules: z.number().optional(),
+    },
+    {
+      fieldName: 'phone',
+      label: '联系电话',
+      component: 'Input',
+      componentProps: {
+        maxLength: 11,
+        placeholder: '请输入联系电话',
+      },
+      rules: 'mobileRequired',
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<SystemDeptApi.Dept>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'name',
+      title: '部门名称',
+      minWidth: 150,
+      align: 'left',
+      fixed: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'leaderUserId',
+      title: '负责人',
+      minWidth: 150,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '部门状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/dept/index.vue b/apps/web-tdesign/src/views/system/dept/index.vue
new file mode 100644
index 000000000..1fd74db74
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dept/index.vue
@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDept, deleteDeptList, getDeptList } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建部门 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级部门 */
+function handleAppend(row: SystemDeptApi.Dept) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑部门 */
+function handleEdit(row: SystemDeptApi.Dept) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除部门 */
+async function handleDelete(row: SystemDeptApi.Dept) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDept(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除部门 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDeptList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDeptApi.Dept[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getDeptList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<SystemDeptApi.Dept>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="部门列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['部门']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dept:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dept:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dept:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:dept:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dept:delete'],
+              disabled: row.children && row.children.length > 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dept/modules/form.vue b/apps/web-tdesign/src/views/system/dept/modules/form.vue
new file mode 100644
index 000000000..7539f49b4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dept/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createDept, getDept, updateDept } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDeptApi.Dept>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['部门'])
+    : $t('ui.actionTitle.create', ['部门']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDeptApi.Dept;
+    try {
+      await (formData.value?.id ? updateDept(data) : createDept(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDeptApi.Dept>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDept(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/data.ts b/apps/web-tdesign/src/views/system/dict/data.ts
new file mode 100644
index 000000000..a2c6ede66
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/data.ts
@@ -0,0 +1,353 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
+
+// ============================== 字典类型 ==============================
+
+/** 类型新增/修改的表单 */
+export function useTypeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '字典名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '字典类型',
+      component: 'Input',
+      componentProps: (values) => {
+        return {
+          placeholder: '请输入字典类型',
+          disabled: !!values.id,
+        };
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: [''],
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 类型列表的搜索表单 */
+export function useTypeGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '字典名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '字典类型',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 类型列表的字段 */
+export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '字典编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '字典名称',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '字典类型',
+      minWidth: 220,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ============================== 字典数据 ==============================
+
+// TODO @芋艿：后续针对 antd，增加
+/**
+ * 颜色选项
+ */
+const colorOptions = [
+  { value: '', label: '无' },
+  { value: 'processing', label: '主要' },
+  { value: 'success', label: '成功' },
+  { value: 'default', label: '默认' },
+  { value: 'warning', label: '警告' },
+  { value: 'error', label: '危险' },
+  { value: 'pink', label: 'pink' },
+  { value: 'red', label: 'red' },
+  { value: 'orange', label: 'orange' },
+  { value: 'green', label: 'green' },
+  { value: 'cyan', label: 'cyan' },
+  { value: 'blue', label: 'blue' },
+  { value: 'purple', label: 'purple' },
+];
+
+/** 数据新增/修改的表单 */
+export function useDataFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'dictType',
+      label: '字典类型',
+      component: 'ApiSelect',
+      componentProps: (values) => {
+        return {
+          api: getSimpleDictTypeList,
+          placeholder: '请输入字典类型',
+          labelField: 'name',
+          valueField: 'type',
+          disabled: !!values.id,
+        };
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: [''],
+      },
+    },
+    {
+      fieldName: 'label',
+      label: '数据标签',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据标签',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '数据键值',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据键值',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入显示排序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'colorType',
+      label: '颜色类型',
+      component: 'Select',
+      componentProps: {
+        options: colorOptions,
+        placeholder: '请选择颜色类型',
+      },
+    },
+    {
+      fieldName: 'cssClass',
+      label: 'CSS Class',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 CSS Class',
+      },
+      help: '输入 hex 模式的颜色, 例如 #108ee9',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 字典数据列表搜索表单 */
+export function useDataGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'label',
+      label: '字典标签',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典标签',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 字典数据表格列 */
+export function useDataGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '字典编码',
+      minWidth: 100,
+    },
+    {
+      field: 'label',
+      title: '字典标签',
+      minWidth: 180,
+    },
+    {
+      field: 'value',
+      title: '字典键值',
+      minWidth: 100,
+    },
+    {
+      field: 'sort',
+      title: '字典排序',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'colorType',
+      title: '颜色类型',
+      minWidth: 120,
+      slots: { default: 'colorType' },
+    },
+    {
+      field: 'cssClass',
+      title: 'CSS Class',
+      minWidth: 120,
+      slots: { default: 'cssClass' },
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/dict/index.vue b/apps/web-tdesign/src/views/system/dict/index.vue
new file mode 100644
index 000000000..8d824256d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/index.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import DataGrid from './modules/data-grid.vue';
+import TypeGrid from './modules/type-grid.vue';
+
+const searchDictType = ref<string>(); // 搜索的字典类型
+
+function handleDictTypeSelect(dictType: string) {
+  searchDictType.value = dictType;
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="字典管理" url="https://doc.iocoder.cn/system-dict/" />
+    </template>
+
+    <div class="flex h-full">
+      <!-- 左侧字典类型列表 -->
+      <div class="w-1/2 pr-3">
+        <TypeGrid @select="handleDictTypeSelect" />
+      </div>
+      <!-- 右侧字典数据列表 -->
+      <div class="w-1/2">
+        <DataGrid :dict-type="searchDictType" />
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/data-form.vue b/apps/web-tdesign/src/views/system/dict/modules/data-form.vue
new file mode 100644
index 000000000..b1e65a3b7
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/data-form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { SystemDictDataApi } from '#/api/system/dict/data';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDictData,
+  getDictData,
+  updateDictData,
+} from '#/api/system/dict/data';
+import { $t } from '#/locales';
+
+import { useDataFormSchema } from '../data';
+
+defineOptions({ name: 'SystemDictDataForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDictDataApi.DictData>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['字典数据'])
+    : $t('ui.actionTitle.create', ['字典数据']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useDataFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDictDataApi.DictData;
+    try {
+      await (formData.value?.id ? updateDictData(data) : createDictData(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDictDataApi.DictData>();
+    if (!data || !data.id) {
+      // 设置 dictType
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDictData(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/data-grid.vue b/apps/web-tdesign/src/views/system/dict/modules/data-grid.vue
new file mode 100644
index 000000000..7e2d620fc
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/data-grid.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDictDataApi } from '#/api/system/dict/data';
+
+import { ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Tag } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDictData,
+  deleteDictDataList,
+  exportDictData,
+  getDictDataPage,
+} from '#/api/system/dict/data';
+import { $t } from '#/locales';
+
+import { useDataGridColumns, useDataGridFormSchema } from '../data';
+import DataForm from './data-form.vue';
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const [DataFormModal, dataFormModalApi] = useVbenModal({
+  connectedComponent: DataForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDictData(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '字典数据.xls', source: data });
+}
+
+/** 创建字典数据 */
+function handleCreate() {
+  dataFormModalApi.setData({ dictType: props.dictType }).open();
+}
+
+/** 编辑字典数据 */
+function handleEdit(row: SystemDictDataApi.DictData) {
+  dataFormModalApi.setData(row).open();
+}
+
+/** 删除字典数据 */
+async function handleDelete(row: SystemDictDataApi.DictData) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.label]),
+    duration: 0,
+  });
+  try {
+    await deleteDictData(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.label]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除字典数据 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDictDataList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictDataApi.DictData[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDataGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDataGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDictDataPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            dictType: props.dictType,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemDictDataApi.DictData>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 监听 dictType 变化，重新查询 */
+watch(
+  () => props.dictType,
+  () => {
+    if (props.dictType) {
+      handleRefresh();
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <DataFormModal @success="handleRefresh" />
+
+    <Grid table-title="字典数据列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['字典数据']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dict:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:dict:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:dict:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </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="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:dict:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dict:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.label]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/type-form.vue b/apps/web-tdesign/src/views/system/dict/modules/type-form.vue
new file mode 100644
index 000000000..670096030
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/type-form.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDictType,
+  getDictType,
+  updateDictType,
+} from '#/api/system/dict/type';
+import { $t } from '#/locales';
+
+import { useTypeFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDictTypeApi.DictType>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['字典类型'])
+    : $t('ui.actionTitle.create', ['字典类型']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useTypeFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDictTypeApi.DictType;
+    try {
+      await (formData.value?.id ? updateDictType(data) : createDictType(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDictTypeApi.DictType>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDictType(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/type-grid.vue b/apps/web-tdesign/src/views/system/dict/modules/type-grid.vue
new file mode 100644
index 000000000..691f57c27
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/type-grid.vue
@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDictType,
+  deleteDictTypeList,
+  exportDictType,
+  getDictTypePage,
+} from '#/api/system/dict/type';
+import { $t } from '#/locales';
+
+import { useTypeGridColumns, useTypeGridFormSchema } from '../data';
+import TypeForm from './type-form.vue';
+
+const emit = defineEmits(['select']);
+
+const [TypeFormModal, typeFormModalApi] = useVbenModal({
+  connectedComponent: TypeForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDictType(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '字典类型.xls', source: data });
+}
+
+/** 创建字典类型 */
+function handleCreate() {
+  typeFormModalApi.setData(null).open();
+}
+
+/** 编辑字典类型 */
+function handleEdit(row: SystemDictTypeApi.DictType) {
+  typeFormModalApi.setData(row).open();
+}
+
+/** 删除字典类型 */
+async function handleDelete(row: SystemDictTypeApi.DictType) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDictType(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除字典类型 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDictTypeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictTypeApi.DictType[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useTypeGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useTypeGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDictTypePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemDictTypeApi.DictType>,
+  gridEvents: {
+    cellClick: ({ row }: { row: SystemDictTypeApi.DictType }) => {
+      emit('select', row.type);
+    },
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <TypeFormModal @success="handleRefresh" />
+    <Grid table-title="字典类型列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['字典类型']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dict:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:dict:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:dict:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:dict:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dict:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/system/loginlog/data.ts b/apps/web-tdesign/src/views/system/loginlog/data.ts
new file mode 100644
index 000000000..24433e9ac
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/loginlog/data.ts
@@ -0,0 +1,147 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户名称',
+      },
+    },
+    {
+      fieldName: 'userIp',
+      label: '登录地址',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入登录地址',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '登录时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'logType',
+      title: '操作类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_LOGIN_TYPE },
+      },
+    },
+    {
+      field: 'username',
+      title: '用户名称',
+      minWidth: 180,
+    },
+    {
+      field: 'userIp',
+      title: '登录地址',
+      minWidth: 180,
+    },
+    {
+      field: 'userAgent',
+      title: '浏览器',
+      minWidth: 200,
+    },
+    {
+      field: 'result',
+      title: '登录结果',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_LOGIN_RESULT },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '登录日期',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'logType',
+      label: '操作类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'username',
+      label: '用户名称',
+    },
+    {
+      field: 'userIp',
+      label: '登录地址',
+    },
+    {
+      field: 'userAgent',
+      label: '浏览器',
+    },
+    {
+      field: 'result',
+      label: '登录结果',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'createTime',
+      label: '登录日期',
+      render: (val) => formatDateTime(val) as string,
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/loginlog/index.vue b/apps/web-tdesign/src/views/system/loginlog/index.vue
new file mode 100644
index 000000000..9c9de61bc
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/loginlog/index.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemLoginLogApi } from '#/api/system/login-log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportLoginLog, getLoginLogPage } from '#/api/system/login-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportLoginLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '登录日志.xls', source: data });
+}
+
+/** 查看登录日志详情 */
+function handleDetail(row: SystemLoginLogApi.LoginLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getLoginLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemLoginLogApi.LoginLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="登录日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:login-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:login-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/loginlog/modules/detail.vue b/apps/web-tdesign/src/views/system/loginlog/modules/detail.vue
new file mode 100644
index 000000000..4982a32b3
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/loginlog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemLoginLogApi } from '#/api/system/login-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemLoginLogApi.LoginLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemLoginLogApi.LoginLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="登录日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/account/data.ts b/apps/web-tdesign/src/views/system/mail/account/data.ts
new file mode 100644
index 000000000..2a00f39e4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/account/data.ts
@@ -0,0 +1,184 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'mail',
+      label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'password',
+      label: '密码',
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'host',
+      label: 'SMTP 服务器域名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 SMTP 服务器域名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'port',
+      label: 'SMTP 服务器端口',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入 SMTP 服务器端口',
+        min: 0,
+        max: 65_535,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sslEnable',
+      label: '是否开启 SSL',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'starttlsEnable',
+      label: '是否开启 STARTTLS',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'mail',
+      label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'mail',
+      title: '邮箱',
+      minWidth: 160,
+    },
+    {
+      field: 'username',
+      title: '用户名',
+      minWidth: 160,
+    },
+    {
+      field: 'host',
+      title: 'SMTP 服务器域名',
+      minWidth: 150,
+    },
+    {
+      field: 'port',
+      title: 'SMTP 服务器端口',
+      minWidth: 130,
+    },
+    {
+      field: 'sslEnable',
+      title: '是否开启 SSL',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'starttlsEnable',
+      title: '是否开启 STARTTLS',
+      minWidth: 145,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/mail/account/index.vue b/apps/web-tdesign/src/views/system/mail/account/index.vue
new file mode 100644
index 000000000..066237b17
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/account/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMailAccountApi } from '#/api/system/mail/account';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteMailAccount,
+  deleteMailAccountList,
+  getMailAccountPage,
+} from '#/api/system/mail/account';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建邮箱账号 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑邮箱账号 */
+function handleEdit(row: SystemMailAccountApi.MailAccount) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除邮箱账号 */
+async function handleDelete(row: SystemMailAccountApi.MailAccount) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.mail]),
+    duration: 0,
+  });
+  try {
+    await deleteMailAccount(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除邮箱账号 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteMailAccountList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailAccountApi.MailAccount[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMailAccountPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="邮箱账号列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['邮箱账号']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:mail-account:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-account:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:mail-account:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-account:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.mail]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/account/modules/form.vue b/apps/web-tdesign/src/views/system/mail/account/modules/form.vue
new file mode 100644
index 000000000..ff5de38d3
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/account/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemMailAccountApi } from '#/api/system/mail/account';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createMailAccount,
+  getMailAccount,
+  updateMailAccount,
+} from '#/api/system/mail/account';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMailAccountApi.MailAccount>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['邮箱账号'])
+    : $t('ui.actionTitle.create', ['邮箱账号']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 140,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemMailAccountApi.MailAccount;
+    try {
+      await (formData.value?.id
+        ? updateMailAccount(data)
+        : createMailAccount(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMailAccountApi.MailAccount>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMailAccount(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/log/data.ts b/apps/web-tdesign/src/views/system/mail/log/data.ts
new file mode 100644
index 000000000..3a12081d5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/log/data.ts
@@ -0,0 +1,259 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleMailAccountList } from '#/api/system/mail/account';
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'sendTime',
+      label: '发送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'sendStatus',
+      label: '发送状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择发送状态',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleMailAccountList,
+        labelField: 'mail',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择邮箱账号',
+      },
+    },
+    {
+      fieldName: 'templateId',
+      label: '模板编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'sendTime',
+      title: '发送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'userType',
+      title: '接收用户',
+      minWidth: 150,
+      slots: { default: 'userInfo' },
+    },
+    {
+      field: 'toMails',
+      title: '接收信息',
+      minWidth: 300,
+      formatter: ({ row }) => {
+        const lines: string[] = [];
+        if (row.toMails && row.toMails.length > 0) {
+          lines.push(`收件：${row.toMails.join('、')}`);
+        }
+        if (row.ccMails && row.ccMails.length > 0) {
+          lines.push(`抄送：${row.ccMails.join('、')}`);
+        }
+        if (row.bccMails && row.bccMails.length > 0) {
+          lines.push(`密送：${row.bccMails.join('、')}`);
+        }
+        return lines.join('\n');
+      },
+    },
+    {
+      field: 'templateTitle',
+      title: '邮件标题',
+      minWidth: 120,
+    },
+    {
+      field: 'templateContent',
+      title: '邮件内容',
+      minWidth: 300,
+    },
+    {
+      field: 'fromMail',
+      title: '发送邮箱',
+      minWidth: 120,
+    },
+    {
+      field: 'sendStatus',
+      title: '发送状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS },
+      },
+    },
+    {
+      field: 'templateCode',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => {
+        return formatDateTime(val) as string;
+      },
+    },
+    {
+      field: 'fromMail',
+      label: '发送邮箱',
+    },
+    {
+      field: 'userId',
+      label: '接收用户',
+      render: (val, data) => {
+        if (data?.userType && val) {
+          return h('div', [
+            h(DictTag, {
+              type: DICT_TYPE.USER_TYPE,
+              value: data.userType,
+            }),
+            ` (${val})`,
+          ]);
+        }
+        return '无';
+      },
+    },
+    {
+      field: 'toMails',
+      label: '接收信息',
+      render: (val, data) => {
+        const lines: string[] = [];
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
+        }
+        if (data?.ccMails && data.ccMails.length > 0) {
+          lines.push(`抄送：${data.ccMails.join('、')}`);
+        }
+        if (data?.bccMails && data.bccMails.length > 0) {
+          lines.push(`密送：${data.bccMails.join('、')}`);
+        }
+        return h(
+          'div',
+          {
+            style: { whiteSpace: 'pre-line' },
+          },
+          lines.join('\n'),
+        );
+      },
+    },
+    {
+      field: 'templateId',
+      label: '模板编号',
+    },
+    {
+      field: 'templateCode',
+      label: '模板编码',
+    },
+    {
+      field: 'templateTitle',
+      label: '邮件标题',
+    },
+    {
+      field: 'templateContent',
+      label: '邮件内容',
+      span: 2,
+      render: (val) => {
+        return h('div', {
+          innerHTML: val || '',
+        });
+      },
+    },
+    {
+      field: 'sendStatus',
+      label: '发送状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'sendTime',
+      label: '发送时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'sendMessageId',
+      label: '发送消息编号',
+    },
+    {
+      field: 'sendException',
+      label: '发送异常',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/mail/log/index.vue b/apps/web-tdesign/src/views/system/mail/log/index.vue
new file mode 100644
index 000000000..43dfd1dbb
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/log/index.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMailLogApi } from '#/api/system/mail/log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getMailLogPage } from '#/api/system/mail/log';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看邮件日志 */
+function handleDetail(row: SystemMailLogApi.MailLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMailLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemMailLogApi.MailLog>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="邮件日志列表">
+      <template #userInfo="{ row }">
+        <div v-if="row.userType && row.userId" class="flex items-center gap-1">
+          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+          <span>({{ row.userId }})</span>
+        </div>
+        <div v-else>-</div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:mail-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/log/modules/detail.vue b/apps/web-tdesign/src/views/system/mail/log/modules/detail.vue
new file mode 100644
index 000000000..3b04a9d04
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/log/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemMailLogApi } from '#/api/system/mail/log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemMailLogApi.MailLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMailLogApi.MailLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="邮件日志详情"
+    class="w-[1280px]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/template/data.ts b/apps/web-tdesign/src/views/system/mail/template/data.ts
new file mode 100644
index 000000000..f7345abb5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/data.ts
@@ -0,0 +1,266 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleMailAccountList } from '#/api/system/mail/account';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleMailAccountList,
+        labelField: 'mail',
+        valueField: 'id',
+        placeholder: '请选择邮箱账号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nickname',
+      label: '发送人名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发送人名称',
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '模板标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板标题',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'RichTextarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 发送邮件表单 */
+export function useSendMailFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'RichTextarea',
+      componentProps: {
+        options: {
+          readonly: true,
+        },
+      },
+    },
+    {
+      fieldName: 'toMails',
+      label: '收件邮箱',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入收件邮箱，按 Enter 添加',
+      },
+    },
+    {
+      fieldName: 'ccMails',
+      label: '抄送邮箱',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入抄送邮箱，按 Enter 添加',
+      },
+    },
+    {
+      fieldName: 'bccMails',
+      label: '密送邮箱',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入密送邮箱，按 Enter 添加',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择开启状态',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleMailAccountList,
+        labelField: 'mail',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择邮箱账号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  getAccountMail?: (accountId: number) => string | undefined,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'code',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 120,
+    },
+    {
+      field: 'title',
+      title: '模板标题',
+      minWidth: 120,
+    },
+    {
+      field: 'accountId',
+      title: '邮箱账号',
+      minWidth: 120,
+      formatter: ({ cellValue }) => getAccountMail?.(cellValue) || '-',
+    },
+    {
+      field: 'nickname',
+      title: '发送人名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/mail/template/index.vue b/apps/web-tdesign/src/views/system/mail/template/index.vue
new file mode 100644
index 000000000..fe593974f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMailAccountApi } from '#/api/system/mail/account';
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { onMounted, ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleMailAccountList } from '#/api/system/mail/account';
+import {
+  deleteMailTemplate,
+  deleteMailTemplateList,
+  getMailTemplatePage,
+} from '#/api/system/mail/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [SendModal, sendModalApi] = useVbenModal({
+  connectedComponent: SendForm,
+  destroyOnClose: true,
+});
+
+/** 获取邮箱账号 */
+const accountList = ref<SystemMailAccountApi.MailAccount[]>([]);
+function getAccountMail(accountId: number) {
+  return accountList.value.find((account) => account.id === accountId)?.mail;
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建邮件模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑邮件模板 */
+function handleEdit(row: SystemMailTemplateApi.MailTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 发送测试邮件 */
+function handleSend(row: SystemMailTemplateApi.MailTemplate) {
+  sendModalApi.setData(row).open();
+}
+
+/** 删除邮件模板 */
+async function handleDelete(row: SystemMailTemplateApi.MailTemplate) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteMailTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除邮件模板 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteMailTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailTemplateApi.MailTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(getAccountMail),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMailTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 初始化 */
+onMounted(async () => {
+  accountList.value = await getSimpleMailAccountList();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <SendModal />
+    <Grid table-title="邮件模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['邮件模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:mail-template:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-template:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:mail-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:mail-template:send-mail'],
+              onClick: handleSend.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/template/modules/form.vue b/apps/web-tdesign/src/views/system/mail/template/modules/form.vue
new file mode 100644
index 000000000..87863641f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createMailTemplate,
+  getMailTemplate,
+  updateMailTemplate,
+} from '#/api/system/mail/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMailTemplateApi.MailTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['邮件模板'])
+    : $t('ui.actionTitle.create', ['邮件模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemMailTemplateApi.MailTemplate;
+    try {
+      await (formData.value?.id
+        ? updateMailTemplate(data)
+        : createMailTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMailTemplateApi.MailTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMailTemplate(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/template/modules/send-form.vue b/apps/web-tdesign/src/views/system/mail/template/modules/send-form.vue
new file mode 100644
index 000000000..489a225e5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/modules/send-form.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { sendMail } from '#/api/system/mail/template';
+
+import { useSendMailFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMailTemplateApi.MailTemplate>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 构建发送请求
+    const values = await formApi.getValues();
+    const paramsObj: Record<string, string> = {};
+    if (formData.value?.params) {
+      formData.value.params.forEach((param: string) => {
+        paramsObj[param] = values[`param_${param}`];
+      });
+    }
+    const data: SystemMailTemplateApi.MailSendReqVO = {
+      toMails: values.toMails,
+      ccMails: values.ccMails,
+      bccMails: values.bccMails,
+      templateCode: formData.value?.code || '',
+      templateParams: paramsObj,
+    };
+
+    // 提交表单
+    try {
+      await sendMail(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success('邮件发送成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 获取数据
+    const data = modalApi.getData<SystemMailTemplateApi.MailTemplate>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    // 更新 form schema
+    const schema = buildFormSchema();
+    formApi.setState({ schema });
+    // 设置到 values
+    await formApi.setValues({
+      content: data.content,
+    });
+  },
+});
+
+/** 动态构建表单 schema */
+function buildFormSchema() {
+  const schema = useSendMailFormSchema();
+  if (formData.value?.params) {
+    formData.value.params?.forEach((param: string) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+        rules: 'required',
+      });
+    });
+  }
+  return schema;
+}
+</script>
+
+<template>
+  <Modal title="测试发送邮件" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/menu/data.ts b/apps/web-tdesign/src/views/system/menu/data.ts
new file mode 100644
index 000000000..3226f0c41
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/menu/data.ts
@@ -0,0 +1,324 @@
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { h } from 'vue';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemMenuTypeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { handleTree, isHttpUrl } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getMenuList } from '#/api/system/menu';
+import { $t } from '#/locales';
+import { componentKeys } from '#/router/routes';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级菜单',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getMenuList();
+          data.unshift({
+            id: 0,
+            name: '顶级部门',
+          } as SystemMenuApi.Menu);
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级菜单',
+        filterTreeNode(input: string, node: Recordable<any>) {
+          if (!input || input.length === 0) {
+            return true;
+          }
+          const name: string = node.label ?? '';
+          if (!name) return false;
+          return name.includes(input) || $t(name).includes(input);
+        },
+        showSearch: true,
+        treeDefaultExpandedKeys: [0],
+      },
+      rules: 'selectRequired',
+      renderComponentContent() {
+        return {
+          title({ label, icon }: { icon: string; label: string }) {
+            const components = [];
+            if (!label) return '';
+            if (icon) {
+              components.push(h(IconifyIcon, { class: 'size-4', icon }));
+            }
+            components.push(h('span', { class: '' }, $t(label || '')));
+            return h('div', { class: 'flex items-center gap-1' }, components);
+          },
+        };
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '菜单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入菜单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '菜单类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(SystemMenuTypeEnum.DIR),
+    },
+    {
+      fieldName: 'icon',
+      label: '菜单图标',
+      component: 'IconPicker',
+      componentProps: {
+        placeholder: '请选择菜单图标',
+        prefix: 'carbon',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(
+            values.type,
+          );
+        },
+      },
+    },
+    {
+      fieldName: 'path',
+      label: '路由地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入路由地址',
+      },
+      rules: z.string(),
+      help: '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
+      dependencies: {
+        triggerFields: ['type', 'parentId'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(
+            values.type,
+          );
+        },
+        rules: (values) => {
+          const schema = z.string().min(1, '路由地址不能为空');
+          if (isHttpUrl(values.path)) {
+            return schema;
+          }
+          if (values.parentId === 0) {
+            return schema.refine(
+              (path) => path.charAt(0) === '/',
+              '路径必须以 / 开头',
+            );
+          }
+          return schema.refine(
+            (path) => path.charAt(0) !== '/',
+            '路径不能以 / 开头',
+          );
+        },
+      },
+    },
+    {
+      fieldName: 'component',
+      label: '组件地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入组件地址',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'componentName',
+      label: '组件名称',
+      component: 'AutoComplete',
+      componentProps: {
+        allowClear: true,
+        filterOption(input: string, option: { value: string }) {
+          return option.value.toLowerCase().includes(input.toLowerCase());
+        },
+        placeholder: '请选择组件名称',
+        options: componentKeys.map((v) => ({ value: v })),
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'permission',
+      label: '权限标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入菜单描述',
+      },
+      dependencies: {
+        show: (values) => {
+          return [SystemMenuTypeEnum.BUTTON, SystemMenuTypeEnum.MENU].includes(
+            values.type,
+          );
+        },
+        triggerFields: ['type'],
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '菜单状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'alwaysShow',
+      label: '总是显示',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '总是', value: true },
+          { label: '不是', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      defaultValue: true,
+      help: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'keepAlive',
+      label: '缓存状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '缓存', value: true },
+          { label: '不缓存', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      defaultValue: true,
+      help: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '菜单名称',
+      minWidth: 250,
+      align: 'left',
+      fixed: 'left',
+      slots: { default: 'name' },
+      treeNode: true,
+    },
+    {
+      field: 'type',
+      title: '菜单类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
+      },
+    },
+    {
+      field: 'sort',
+      title: '显示排序',
+      minWidth: 100,
+    },
+    {
+      field: 'permission',
+      title: '权限标识',
+      minWidth: 200,
+    },
+    {
+      field: 'path',
+      title: '组件路径',
+      minWidth: 200,
+    },
+    {
+      field: 'componentName',
+      title: '组件名称',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/menu/index.vue b/apps/web-tdesign/src/views/system/menu/index.vue
new file mode 100644
index 000000000..47dfc6c3c
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/menu/index.vue
@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { SystemMenuTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMenu, getMenuList } from '#/api/system/menu';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建菜单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级菜单 */
+function handleAppend(row: SystemMenuApi.Menu) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑菜单 */
+function handleEdit(row: SystemMenuApi.Menu) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除菜单 */
+async function handleDelete(row: SystemMenuApi.Menu) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteMenu(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          return await getMenuList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<SystemMenuApi.Menu>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="功能权限"
+        url="https://doc.iocoder.cn/resource-permission"
+      />
+      <DocAlert title="菜单路由" url="https://doc.iocoder.cn/vue3/route/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="菜单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['菜单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:menu:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <div class="flex w-full items-center gap-1">
+          <div class="size-5 flex-shrink-0">
+            <IconifyIcon
+              v-if="row.type === SystemMenuTypeEnum.BUTTON"
+              icon="carbon:square-outline"
+              class="size-full"
+            />
+            <IconifyIcon
+              v-else-if="row.icon"
+              :icon="row.icon || 'carbon:circle-dash'"
+              class="size-full"
+            />
+          </div>
+          <span class="flex-auto">{{ $t(row.name) }}</span>
+          <div class="items-center justify-end"></div>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:menu:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:menu:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:menu:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/menu/modules/form.vue b/apps/web-tdesign/src/views/system/menu/modules/form.vue
new file mode 100644
index 000000000..1a355bf5d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/menu/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createMenu, getMenu, updateMenu } from '#/api/system/menu';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMenuApi.Menu>();
+const getTitle = computed(() =>
+  formData.value?.id
+    ? $t('ui.actionTitle.edit', ['菜单'])
+    : $t('ui.actionTitle.create', ['菜单']),
+);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemMenuApi.Menu;
+    try {
+      await (formData.value?.id ? updateMenu(data) : createMenu(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMenuApi.Menu>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMenu(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notice/data.ts b/apps/web-tdesign/src/views/system/notice/data.ts
new file mode 100644
index 000000000..79c156c86
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notice/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '公告标题',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '公告类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '公告内容',
+      component: 'RichTextarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '公告状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'title',
+      label: '公告标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入公告标题',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '公告状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择公告状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '公告编号',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '公告标题',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '公告类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTICE_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '公告状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notice/index.vue b/apps/web-tdesign/src/views/system/notice/index.vue
new file mode 100644
index 000000000..8d2258631
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notice/index.vue
@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNoticeApi } from '#/api/system/notice';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteNotice,
+  deleteNoticeList,
+  getNoticePage,
+  pushNotice,
+} from '#/api/system/notice';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建公告 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑公告 */
+function handleEdit(row: SystemNoticeApi.Notice) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除公告 */
+async function handleDelete(row: SystemNoticeApi.Notice) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.title]),
+    duration: 0,
+  });
+  try {
+    await deleteNotice(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除公告 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteNoticeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNoticeApi.Notice[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 推送公告 */
+async function handlePush(row: SystemNoticeApi.Notice) {
+  const hideLoading = message.loading({
+    content: '正在推送中...',
+  });
+  try {
+    await pushNotice(row.id!);
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNoticePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemNoticeApi.Notice>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="公告列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['公告']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:notice:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notice:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:notice:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '推送',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:notice:update'],
+              onClick: handlePush.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notice:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.title]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notice/modules/form.vue b/apps/web-tdesign/src/views/system/notice/modules/form.vue
new file mode 100644
index 000000000..fa95fc49f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notice/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemNoticeApi } from '#/api/system/notice';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createNotice, getNotice, updateNotice } from '#/api/system/notice';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemNoticeApi.Notice>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['公告'])
+    : $t('ui.actionTitle.create', ['公告']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemNoticeApi.Notice;
+    try {
+      await (formData.value?.id ? updateNotice(data) : createNotice(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNoticeApi.Notice>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotice(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/message/data.ts b/apps/web-tdesign/src/views/system/notify/message/data.ts
new file mode 100644
index 000000000..c6a315229
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/message/data.ts
@@ -0,0 +1,237 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'templateCode',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'templateType',
+      label: '模版类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          'number',
+        ),
+        allowClear: true,
+        placeholder: '请选择模版类型',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'templateCode',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'templateNickname',
+      title: '发送人名称',
+      minWidth: 180,
+    },
+    {
+      field: 'templateContent',
+      title: '模版内容',
+      minWidth: 200,
+    },
+    {
+      field: 'templateParams',
+      title: '模版参数',
+      minWidth: 180,
+      formatter: ({ cellValue }) => {
+        try {
+          return JSON.stringify(cellValue);
+        } catch {
+          return '';
+        }
+      },
+    },
+    {
+      field: 'templateType',
+      title: '模版类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'readStatus',
+      title: '是否已读',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'readTime',
+      title: '阅读时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'userType',
+      label: '用户类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.USER_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'userId',
+      label: '用户编号',
+    },
+    {
+      field: 'templateId',
+      label: '模版编号',
+    },
+    {
+      field: 'templateCode',
+      label: '模板编码',
+    },
+    {
+      field: 'templateNickname',
+      label: '发送人名称',
+    },
+    {
+      field: 'templateContent',
+      label: '模版内容',
+    },
+    {
+      field: 'templateParams',
+      label: '模版参数',
+      render: (val) => {
+        try {
+          return JSON.stringify(val);
+        } catch {
+          return '';
+        }
+      },
+    },
+    {
+      field: 'templateType',
+      label: '模版类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readStatus',
+      label: '是否已读',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_BOOLEAN_STRING,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readTime',
+      label: '阅读时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notify/message/index.vue b/apps/web-tdesign/src/views/system/notify/message/index.vue
new file mode 100644
index 000000000..aea7b8623
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/message/index.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyMessagePage } from '#/api/system/notify/message';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看站内信详情 */
+function handleDetail(row: SystemNotifyMessageApi.NotifyMessage) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="站内信" url="https://doc.iocoder.cn/notify/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="站内信列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:notify-message:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/message/modules/detail.vue b/apps/web-tdesign/src/views/system/notify/message/modules/detail.vue
new file mode 100644
index 000000000..a0e100dd4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/message/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNotifyMessageApi.NotifyMessage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="站内信详情"
+    class="w-1/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/my/data.ts b/apps/web-tdesign/src/views/system/notify/my/data.ts
new file mode 100644
index 000000000..b31d437c2
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/my/data.ts
@@ -0,0 +1,137 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'readStatus',
+      label: '是否已读',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        allowClear: true,
+        placeholder: '请选择是否已读',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '',
+      width: 40,
+      type: 'checkbox',
+    },
+    {
+      field: 'templateNickname',
+      title: '发送人',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '发送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'templateType',
+      title: '类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'templateContent',
+      title: '消息内容',
+      minWidth: 300,
+    },
+    {
+      field: 'readStatus',
+      title: '是否已读',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'readTime',
+      title: '阅读时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'templateNickname',
+      label: '发送人',
+    },
+    {
+      field: 'createTime',
+      label: '发送时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'templateType',
+      label: '消息类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readStatus',
+      label: '是否已读',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_BOOLEAN_STRING,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readTime',
+      label: '阅读时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'templateContent',
+      label: '消息内容',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notify/my/index.vue b/apps/web-tdesign/src/views/system/notify/my/index.vue
new file mode 100644
index 000000000..f9122ee3d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/my/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getMyNotifyMessagePage,
+  updateAllNotifyMessageRead,
+  updateNotifyMessageRead,
+} from '#/api/system/notify/message';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看站内信详情 */
+function handleDetail(row: SystemNotifyMessageApi.NotifyMessage) {
+  detailModalApi.setData(row).open();
+}
+
+/** 标记一条站内信已读 */
+async function handleRead(row: SystemNotifyMessageApi.NotifyMessage) {
+  const hideLoading = message.loading({
+    content: '正在标记已读...',
+    duration: 0,
+  });
+  try {
+    await updateNotifyMessageRead([row.id]);
+    message.success('标记已读成功');
+    handleRefresh();
+    // 打开详情
+    handleDetail(row);
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 标记选中的站内信为已读 */
+async function handleMarkRead() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  if (!rows || rows.length === 0) {
+    message.warning('请选择需要标记的站内信');
+    return;
+  }
+
+  const ids = rows.map((row: SystemNotifyMessageApi.NotifyMessage) => row.id);
+  const hideLoading = message.loading({
+    content: '正在标记已读...',
+    duration: 0,
+  });
+  try {
+    await updateNotifyMessageRead(ids);
+    checkedIds.value = [];
+    message.success('标记已读成功');
+    await gridApi.grid.setAllCheckboxRow(false);
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNotifyMessageApi.NotifyMessage[];
+}) {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 标记所有站内信为已读 */
+async function handleMarkAllRead() {
+  const hideLoading = message.loading({
+    content: '正在标记全部已读...',
+    duration: 0,
+  });
+  try {
+    await updateAllNotifyMessageRead();
+    message.success('全部标记已读成功');
+    checkedIds.value = [];
+    await gridApi.grid.setAllCheckboxRow(false);
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMyNotifyMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    checkboxConfig: {
+      checkMethod: (params: { row: SystemNotifyMessageApi.NotifyMessage }) =>
+        !params.row.readStatus,
+      highlight: true,
+    },
+  } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="我的站内信">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '标记已读',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              disabled: isEmpty(checkedIds),
+              onClick: handleMarkRead,
+            },
+            {
+              label: '全部已读',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleMarkAllRead,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              variant: 'text',
+              ifShow: row.readStatus,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '已读',
+              variant: 'text',
+              ifShow: !row.readStatus,
+              icon: ACTION_ICON.ADD,
+              onClick: handleRead.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/my/modules/detail.vue b/apps/web-tdesign/src/views/system/notify/my/modules/detail.vue
new file mode 100644
index 000000000..a0e100dd4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/my/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNotifyMessageApi.NotifyMessage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="站内信详情"
+    class="w-1/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/template/data.ts b/apps/web-tdesign/src/views/system/notify/template/data.ts
new file mode 100644
index 000000000..d22b16ce9
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/data.ts
@@ -0,0 +1,288 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE, UserTypeEnum } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nickname',
+      label: '发送人名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发送人名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入模板内容',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '模板类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          'number',
+        ),
+        placeholder: '请选择模板类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择状态',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '模板类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          'number',
+        ),
+        allowClear: true,
+        placeholder: '请选择模板类型',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 发送站内信表单 */
+export function useSendNotifyFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'templateCode',
+      label: '模板编码',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+      },
+      rules: z.number().default(UserTypeEnum.MEMBER),
+    },
+    {
+      fieldName: 'userId',
+      label: '接收人 ID',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+      },
+      dependencies: {
+        show(values) {
+          return values.userType === UserTypeEnum.MEMBER;
+        },
+        triggerFields: ['userType'],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userId',
+      label: '接收人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择接收人',
+      },
+      dependencies: {
+        show(values) {
+          return values.userType === UserTypeEnum.ADMIN;
+        },
+        triggerFields: ['userType'],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 120,
+    },
+    {
+      field: 'code',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'nickname',
+      title: '发送人名称',
+      minWidth: 120,
+    },
+    {
+      field: 'content',
+      title: '模板内容',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '模板类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notify/template/index.vue b/apps/web-tdesign/src/views/system/notify/template/index.vue
new file mode 100644
index 000000000..c34f07a2b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteNotifyTemplate,
+  deleteNotifyTemplateList,
+  exportNotifyTemplate,
+  getNotifyTemplatePage,
+} from '#/api/system/notify/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [SendModal, sendModalApi] = useVbenModal({
+  connectedComponent: SendForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportNotifyTemplate(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '站内信模板.xls', source: data });
+}
+
+/** 创建站内信模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑站内信模板 */
+function handleEdit(row: SystemNotifyTemplateApi.NotifyTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 发送测试站内信 */
+function handleSend(row: SystemNotifyTemplateApi.NotifyTemplate) {
+  sendModalApi.setData(row).open();
+}
+
+/** 删除站内信模板 */
+async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteNotifyTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除站内信模板 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteNotifyTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNotifyTemplateApi.NotifyTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="站内信" url="https://doc.iocoder.cn/notify/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <SendModal />
+    <Grid table-title="站内信模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['站内信模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:notify-template:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:notify-template:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:notify-template:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:notify-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:notify-template:send-notify'],
+              onClick: handleSend.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notify-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/template/modules/form.vue b/apps/web-tdesign/src/views/system/notify/template/modules/form.vue
new file mode 100644
index 000000000..bbf986a2a
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createNotifyTemplate,
+  getNotifyTemplate,
+  updateNotifyTemplate,
+} from '#/api/system/notify/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['站内信模板'])
+    : $t('ui.actionTitle.create', ['站内信模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemNotifyTemplateApi.NotifyTemplate;
+    try {
+      await (formData.value?.id
+        ? updateNotifyTemplate(data)
+        : createNotifyTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNotifyTemplateApi.NotifyTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotifyTemplate(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/template/modules/send-form.vue b/apps/web-tdesign/src/views/system/notify/template/modules/send-form.vue
new file mode 100644
index 000000000..6710baff9
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/modules/send-form.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { sendNotify } from '#/api/system/notify/template';
+import { $t } from '#/locales';
+
+import { useSendNotifyFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 构建发送请求
+    const values = await formApi.getValues();
+    const paramsObj: Record<string, string> = {};
+    if (formData.value?.params) {
+      formData.value.params.forEach((param) => {
+        paramsObj[param] = values[`param_${param}`];
+      });
+    }
+    const data: SystemNotifyTemplateApi.NotifySendReqVO = {
+      userId: values.userId,
+      userType: values.userType,
+      templateCode: formData.value?.code || '',
+      templateParams: paramsObj,
+    };
+
+    // 提交表单
+    try {
+      await sendNotify(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } catch (error) {
+      console.error('发送站内信失败', error);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 获取数据
+    const data = modalApi.getData<SystemNotifyTemplateApi.NotifyTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    formData.value = data;
+    // 更新 form schema
+    const schema = buildFormSchema();
+    formApi.setState({ schema });
+    // 设置到 values
+    await formApi.setValues({
+      content: data.content,
+      templateCode: data.code,
+    });
+  },
+});
+
+/** 动态构建表单 schema */
+function buildFormSchema() {
+  const schema = useSendNotifyFormSchema();
+  if (formData.value?.params) {
+    formData.value.params.forEach((param: string) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+      });
+    });
+  }
+  return schema;
+}
+</script>
+
+<template>
+  <Modal title="测试发送站内信">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/oauth2/client/data.ts b/apps/web-tdesign/src/views/system/oauth2/client/data.ts
new file mode 100644
index 000000000..b5bc683c0
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/client/data.ts
@@ -0,0 +1,263 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'secret',
+      label: '客户端密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端密钥',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'logo',
+      label: '应用图标',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '应用描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入应用描述',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'accessTokenValiditySeconds',
+      label: '访问令牌的有效期',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入访问令牌的有效期，单位：秒',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'refreshTokenValiditySeconds',
+      label: '刷新令牌的有效期',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入刷新令牌的有效期，单位：秒',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'authorizedGrantTypes',
+      label: '授权类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE),
+        mode: 'multiple',
+        placeholder: '请输入授权类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'scopes',
+      label: '授权范围',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入授权范围',
+        mode: 'tags',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'autoApproveScopes',
+      label: '自动授权范围',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入自动授权范围',
+        mode: 'multiple',
+      },
+      dependencies: {
+        triggerFields: ['scopes'],
+        componentProps: (values) => ({
+          options: values.scopes
+            ? values.scopes.map((scope: string) => ({
+                label: scope,
+                value: scope,
+              }))
+            : [],
+        }),
+      },
+    },
+    {
+      fieldName: 'redirectUris',
+      label: '可重定向的 URI 地址',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入可重定向的 URI 地址',
+        mode: 'tags',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'authorities',
+      label: '权限',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入权限',
+        mode: 'tags',
+      },
+    },
+    {
+      fieldName: 'resourceIds',
+      label: '资源',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        placeholder: '请输入资源',
+      },
+    },
+    {
+      fieldName: 'additionalInformation',
+      label: '附加信息',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入附加信息，JSON 格式数据',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请输入状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'clientId',
+      title: '客户端编号',
+      minWidth: 120,
+    },
+    {
+      field: 'secret',
+      title: '客户端密钥',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '应用名',
+      minWidth: 120,
+    },
+    {
+      field: 'logo',
+      title: '应用图标',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'accessTokenValiditySeconds',
+      title: '访问令牌的有效期',
+      minWidth: 150,
+      formatter: ({ cellValue }) => `${cellValue} 秒`,
+    },
+    {
+      field: 'refreshTokenValiditySeconds',
+      title: '刷新令牌的有效期',
+      minWidth: 150,
+      formatter: ({ cellValue }) => `${cellValue} 秒`,
+    },
+    {
+      field: 'authorizedGrantTypes',
+      title: '授权类型',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/oauth2/client/index.vue b/apps/web-tdesign/src/views/system/oauth2/client/index.vue
new file mode 100644
index 000000000..7c039447e
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/client/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteOAuth2Client,
+  deleteOAuth2ClientList,
+  getOAuth2ClientPage,
+} from '#/api/system/oauth2/client';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建 OAuth2 客户端 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑 OAuth2 客户端 */
+function handleEdit(row: SystemOAuth2ClientApi.OAuth2Client) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除 OAuth2 客户端 */
+async function handleDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2Client(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除 OAuth2 客户端 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2ClientList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemOAuth2ClientApi.OAuth2Client[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOAuth2ClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOAuth2ClientApi.OAuth2Client>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="OAuth 2.0（SSO 单点登录）"
+        url="https://doc.iocoder.cn/oauth2/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="OAuth2 客户端列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', [' OAuth2.0 客户端']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:oauth2-client:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-client:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:oauth2-client:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-client:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/oauth2/client/modules/form.vue b/apps/web-tdesign/src/views/system/oauth2/client/modules/form.vue
new file mode 100644
index 000000000..c1174da76
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/client/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createOAuth2Client,
+  getOAuth2Client,
+  updateOAuth2Client,
+} from '#/api/system/oauth2/client';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemOAuth2ClientApi.OAuth2Client>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [' OAuth2.0 客户端'])
+    : $t('ui.actionTitle.create', [' OAuth2.0 客户端']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 140,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemOAuth2ClientApi.OAuth2Client;
+    try {
+      await (formData.value?.id
+        ? updateOAuth2Client(data)
+        : createOAuth2Client(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemOAuth2ClientApi.OAuth2Client>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOAuth2Client(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/2" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/oauth2/token/data.ts b/apps/web-tdesign/src/views/system/oauth2/token/data.ts
new file mode 100644
index 000000000..ab5cf8a66
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/token/data.ts
@@ -0,0 +1,93 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'accessToken',
+      title: '访问令牌',
+      minWidth: 300,
+    },
+    {
+      field: 'refreshToken',
+      title: '刷新令牌',
+      minWidth: 300,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'clientId',
+      title: '客户端编号',
+      minWidth: 120,
+    },
+    {
+      field: 'expiresTime',
+      title: '过期时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/oauth2/token/index.vue b/apps/web-tdesign/src/views/system/oauth2/token/index.vue
new file mode 100644
index 000000000..f08b595b8
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/token/index.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteOAuth2Token,
+  getOAuth2TokenPage,
+} from '#/api/system/oauth2/token';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除 OAuth2 令牌 */
+async function handleDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', ['令牌']),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2Token(row.accessToken);
+    message.success($t('ui.actionMessage.deleteSuccess', ['令牌']));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除 OAuth2 令牌 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2Token(checkedIds.value.join(','));
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<string[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemOAuth2TokenApi.OAuth2Token[];
+}) {
+  checkedIds.value = records.map((item) => item.accessToken);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOAuth2TokenPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'accessToken',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="OAuth 2.0（SSO 单点登录）"
+        url="https://doc.iocoder.cn/oauth2/"
+      />
+    </template>
+
+    <Grid table-title="令牌列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-token:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-token:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', ['令牌']),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/operatelog/data.ts b/apps/web-tdesign/src/views/system/operatelog/data.ts
new file mode 100644
index 000000000..3144daa90
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/operatelog/data.ts
@@ -0,0 +1,191 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '操作人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择操作人员',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '操作模块',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作模块',
+      },
+    },
+    {
+      fieldName: 'subType',
+      label: '操作名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作名',
+      },
+    },
+    {
+      fieldName: 'action',
+      label: '操作内容',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作内容',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '操作时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bizId',
+      label: '业务编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入业务编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userName',
+      title: '操作人',
+      minWidth: 120,
+    },
+    {
+      field: 'type',
+      title: '操作模块',
+      minWidth: 120,
+    },
+    {
+      field: 'subType',
+      title: '操作名',
+      minWidth: 160,
+    },
+    {
+      field: 'action',
+      title: '操作内容',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '操作时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'userIp',
+      title: '操作 IP',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'traceId',
+      label: '链路追踪',
+      show: (data) => !data?.traceId,
+    },
+    {
+      field: 'userId',
+      label: '操作人编号',
+    },
+    {
+      field: 'userName',
+      label: '操作人名字',
+    },
+    {
+      field: 'userIp',
+      label: '操作人 IP',
+    },
+    {
+      field: 'userAgent',
+      label: '操作人 UA',
+    },
+    {
+      field: 'type',
+      label: '操作模块',
+    },
+    {
+      field: 'subType',
+      label: '操作名',
+    },
+    {
+      field: 'action',
+      label: '操作内容',
+    },
+    {
+      field: 'extra',
+      label: '操作拓展参数',
+      show: (val) => !val,
+    },
+    {
+      field: 'requestUrl',
+      label: '请求 URL',
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'createTime',
+      label: '操作时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'bizId',
+      label: '业务编号',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/operatelog/index.vue b/apps/web-tdesign/src/views/system/operatelog/index.vue
new file mode 100644
index 000000000..eaf7b3a88
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/operatelog/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportOperateLog, getOperateLogPage } from '#/api/system/operate-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportOperateLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '操作日志.xls', source: data });
+}
+
+/** 查看操作日志详情 */
+function handleDetail(row: SystemOperateLogApi.OperateLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOperateLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOperateLogApi.OperateLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="操作日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:operate-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:operate-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/operatelog/modules/detail.vue b/apps/web-tdesign/src/views/system/operatelog/modules/detail.vue
new file mode 100644
index 000000000..5ada4818a
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/operatelog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemOperateLogApi.OperateLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemOperateLogApi.OperateLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="操作日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/post/data.ts b/apps/web-tdesign/src/views/system/post/data.ts
new file mode 100644
index 000000000..43e746522
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/post/data.ts
@@ -0,0 +1,145 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '岗位名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '岗位编码',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '岗位状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '岗位备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '岗位名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入岗位名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '岗位编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入岗位编码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '岗位状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择岗位状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '岗位编号',
+      minWidth: 200,
+    },
+    {
+      field: 'name',
+      title: '岗位名称',
+      minWidth: 200,
+    },
+    {
+      field: 'code',
+      title: '岗位编码',
+      minWidth: 200,
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'remark',
+      title: '岗位备注',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '岗位状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/post/index.vue b/apps/web-tdesign/src/views/system/post/index.vue
new file mode 100644
index 000000000..50abc48ee
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/post/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemPostApi } from '#/api/system/post';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePost,
+  deletePostList,
+  exportPost,
+  getPostPage,
+} from '#/api/system/post';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportPost(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '岗位.xls', source: data });
+}
+
+/** 创建岗位 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑岗位 */
+function handleEdit(row: SystemPostApi.Post) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除岗位 */
+async function handleDelete(row: SystemPostApi.Post) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deletePost(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除岗位 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deletePostList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemPostApi.Post[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPostPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemPostApi.Post>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="岗位列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['岗位']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:post:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:post:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:post:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:post:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:post:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/post/modules/form.vue b/apps/web-tdesign/src/views/system/post/modules/form.vue
new file mode 100644
index 000000000..04ee9198c
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/post/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemPostApi } from '#/api/system/post';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createPost, getPost, updatePost } from '#/api/system/post';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemPostApi.Post>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['岗位'])
+    : $t('ui.actionTitle.create', ['岗位']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemPostApi.Post;
+    try {
+      await (formData.value?.id ? updatePost(data) : createPost(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemPostApi.Post>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPost(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/data.ts b/apps/web-tdesign/src/views/system/role/data.ts
new file mode 100644
index 000000000..d9da8fa90
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/data.ts
@@ -0,0 +1,255 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemDataScopeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '角色标识',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '角色状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '角色备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 分配数据权限的表单 */
+export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '角色标识',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'dataScope',
+      label: '权限范围',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'dataScopeDeptIds',
+      label: '部门范围',
+      component: 'Input',
+      formItemClass: 'items-start',
+      dependencies: {
+        triggerFields: ['dataScope'],
+        show: (values) => {
+          return values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM;
+        },
+      },
+    },
+  ];
+}
+
+/** 分配菜单的表单 */
+export function useAssignMenuFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '角色标识',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'menuIds',
+      label: '菜单权限',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入角色名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '角色标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入角色标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '角色状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择角色状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '角色编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '角色名称',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '角色类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
+      },
+    },
+    {
+      field: 'code',
+      title: '角色标识',
+      minWidth: 200,
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'remark',
+      title: '角色备注',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '角色状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/role/index.vue b/apps/web-tdesign/src/views/system/role/index.vue
new file mode 100644
index 000000000..078e52317
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/index.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteRole,
+  deleteRoleList,
+  exportRole,
+  getRolePage,
+} from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import AssignDataPermissionForm from './modules/assign-data-permission-form.vue';
+import AssignMenuForm from './modules/assign-menu-form.vue';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [AssignDataPermissionFormModel, assignDataPermissionFormApi] =
+  useVbenModal({
+    connectedComponent: AssignDataPermissionForm,
+    destroyOnClose: true,
+  });
+
+const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
+  connectedComponent: AssignMenuForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportRole(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
+}
+
+/** 创建角色 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑角色 */
+function handleEdit(row: SystemRoleApi.Role) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除角色 */
+async function handleDelete(row: SystemRoleApi.Role) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteRole(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除角色 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteRoleList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemRoleApi.Role[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 分配角色的数据权限 */
+function handleAssignDataPermission(row: SystemRoleApi.Role) {
+  assignDataPermissionFormApi.setData(row).open();
+}
+
+/** 分配角色的菜单权限 */
+function handleAssignMenu(row: SystemRoleApi.Role) {
+  assignMenuFormApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRolePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemRoleApi.Role>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="功能权限"
+        url="https://doc.iocoder.cn/resource-permission"
+      />
+      <DocAlert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <AssignDataPermissionFormModel @success="handleRefresh" />
+    <AssignMenuFormModel @success="handleRefresh" />
+    <Grid table-title="角色列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['角色']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:role:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:role:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:role:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:role:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:role:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '数据权限',
+              variant: 'text',
+              auth: ['system:permission:assign-role-data-scope'],
+              onClick: handleAssignDataPermission.bind(null, row),
+            },
+            {
+              label: '菜单权限',
+              variant: 'text',
+              auth: ['system:permission:assign-role-menu'],
+              onClick: handleAssignMenu.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-tdesign/src/views/system/role/modules/assign-data-permission-form.vue
new file mode 100644
index 000000000..931a458f9
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/modules/assign-data-permission-form.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { ref } from 'vue';
+
+import { Tree, useVbenModal } from '@vben/common-ui';
+import { SystemDataScopeEnum } from '@vben/constants';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox } from 'tdesign-vue-next';
+import { message } from '#/adapter/tdesign';
+
+import { useVbenForm } from '#/adapter/form';
+import { getDeptList } from '#/api/system/dept';
+import { assignRoleDataScope } from '#/api/system/permission';
+import { getRole } from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useAssignDataPermissionFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const deptTree = ref<SystemDeptApi.Dept[]>([]); // 部门树
+const deptLoading = ref(false); // 加载部门列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(false); // 展开状态
+const isCheckStrictly = ref(true); // 父子联动状态
+const expandedKeys = ref<number[]>([]); // 展开的节点
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignDataPermissionFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = await formApi.getValues();
+    try {
+      await assignRoleDataScope({
+        roleId: data.id,
+        dataScope: data.dataScope,
+        dataScopeDeptIds:
+          data.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
+            ? data.dataScopeDeptIds
+            : undefined,
+      });
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData<SystemRoleApi.Role>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 加载部门列表
+      await loadDeptTree();
+      handleExpandAll();
+      // 设置表单值，一定要在加载树之后
+      await formApi.setValues(await getRole(data.id));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 加载部门树 */
+async function loadDeptTree() {
+  deptLoading.value = true;
+  try {
+    const data = await getDeptList();
+    deptTree.value = handleTree(data) as SystemDeptApi.Dept[];
+  } finally {
+    deptLoading.value = false;
+  }
+}
+
+/** 全选/全不选 */
+function handleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (isAllSelected.value) {
+    const allIds = getAllNodeIds(deptTree.value);
+    formApi.setFieldValue('dataScopeDeptIds', allIds);
+  } else {
+    formApi.setFieldValue('dataScopeDeptIds', []);
+  }
+}
+
+/** 展开/折叠所有节点 */
+function handleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  expandedKeys.value = isExpanded.value ? getAllNodeIds(deptTree.value) : [];
+}
+
+/** 切换父子联动 */
+function handleCheckStrictly() {
+  isCheckStrictly.value = !isCheckStrictly.value;
+}
+
+/** 递归获取所有节点 ID */
+function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
+  nodes.forEach((node: any) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
+</script>
+
+<template>
+  <Modal title="数据权限" class="w-2/5">
+    <Form class="mx-4">
+      <template #dataScopeDeptIds="slotProps">
+        <Spin :spinning="deptLoading" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="deptTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            v-bind="slotProps"
+            :check-strictly="!isCheckStrictly"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
+          全选
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
+          全部展开
+        </Checkbox>
+        <Checkbox :checked="isCheckStrictly" @change="handleCheckStrictly">
+          父子联动
+        </Checkbox>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/modules/assign-menu-form.vue b/apps/web-tdesign/src/views/system/role/modules/assign-menu-form.vue
new file mode 100644
index 000000000..3f0fb0a92
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/modules/assign-menu-form.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type { SystemMenuApi } from '#/api/system/menu';
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { nextTick, ref } from 'vue';
+
+import { Tree, useVbenModal } from '@vben/common-ui';
+import { SystemMenuTypeEnum } from '@vben/constants';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox } from 'tdesign-vue-next';
+import { message } from '#/adapter/tdesign';
+
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleMenusList } from '#/api/system/menu';
+import { assignRoleMenu, getRoleMenuList } from '#/api/system/permission';
+import { $t } from '#/locales';
+
+import { useAssignMenuFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const menuTree = ref<SystemMenuApi.Menu[]>([]); // 菜单树
+const menuLoading = ref(false); // 加载菜单列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(false); // 展开状态
+const expandedKeys = ref<number[]>([]); // 展开的节点
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignMenuFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await assignRoleMenu({
+        roleId: data.id,
+        menuIds: data.menuIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载菜单列表
+    await loadMenuTree();
+    const data = modalApi.getData<SystemRoleApi.Role>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 加载角色菜单
+      const menuIds = await getRoleMenuList(data.id);
+      await formApi.setFieldValue('menuIds', menuIds);
+
+      await formApi.setValues(data);
+    } finally {
+      await nextTick(); // 菜单过多，渲染较慢，需要等下一次事件循环
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 加载菜单树 */
+async function loadMenuTree() {
+  menuLoading.value = true;
+  try {
+    const data = await getSimpleMenusList();
+    menuTree.value = handleTree(data) as SystemMenuApi.Menu[];
+  } finally {
+    menuLoading.value = false;
+  }
+}
+
+/** 全选/全不选 */
+function handleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (isAllSelected.value) {
+    const allIds = getAllNodeIds(menuTree.value);
+    formApi.setFieldValue('menuIds', allIds);
+  } else {
+    formApi.setFieldValue('menuIds', []);
+  }
+}
+
+/** 展开/折叠所有节点 */
+function handleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
+}
+
+/** 递归获取所有节点 ID */
+function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
+  nodes.forEach((node: any) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === SystemMenuTypeEnum.BUTTON) {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+
+<template>
+  <Modal title="菜单权限" class="w-2/5">
+    <Form class="mx-4">
+      <template #menuIds="slotProps">
+        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="menuTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
+          全选
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
+          全部展开
+        </Checkbox>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/modules/form.vue b/apps/web-tdesign/src/views/system/role/modules/form.vue
new file mode 100644
index 000000000..553517bc5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createRole, getRole, updateRole } from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemRoleApi.Role>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['角色'])
+    : $t('ui.actionTitle.create', ['角色']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemRoleApi.Role;
+    try {
+      await (formData.value?.id ? updateRole(data) : createRole(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemRoleApi.Role>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getRole(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/channel/data.ts b/apps/web-tdesign/src/views/system/sms/channel/data.ts
new file mode 100644
index 000000000..3320291c2
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/channel/data.ts
@@ -0,0 +1,195 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'signature',
+      label: '短信签名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信签名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '渠道编码',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
+        placeholder: '请选择短信渠道',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '启用状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+    {
+      fieldName: 'apiKey',
+      label: '短信 API 的账号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的账号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'apiSecret',
+      label: '短信 API 的密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的密钥',
+      },
+    },
+    {
+      fieldName: 'callbackUrl',
+      label: '短信发送回调 URL',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信发送回调 URL',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'signature',
+      label: '短信签名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入短信签名',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '渠道编码',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
+        placeholder: '请选择短信渠道',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'signature',
+      title: '短信签名',
+      minWidth: 120,
+    },
+    {
+      field: 'code',
+      title: '渠道编码',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'status',
+      title: '启用状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'apiKey',
+      title: '短信 API 的账号',
+      minWidth: 180,
+    },
+    {
+      field: 'apiSecret',
+      title: '短信 API 的密钥',
+      minWidth: 180,
+    },
+    {
+      field: 'callbackUrl',
+      title: '短信发送回调 URL',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/sms/channel/index.vue b/apps/web-tdesign/src/views/system/sms/channel/index.vue
new file mode 100644
index 000000000..97df50025
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/channel/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSmsChannel,
+  deleteSmsChannelList,
+  getSmsChannelPage,
+} from '#/api/system/sms/channel';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建短信渠道 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑短信渠道 */
+function handleEdit(row: SystemSmsChannelApi.SmsChannel) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除短信渠道 */
+async function handleDelete(row: SystemSmsChannelApi.SmsChannel) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.signature]),
+    duration: 0,
+  });
+  try {
+    await deleteSmsChannel(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除短信渠道 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteSmsChannelList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsChannelApi.SmsChannel[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSmsChannelPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="短信渠道列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['短信渠道']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:sms-channel:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:sms-channel:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:sms-channel:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:sms-channel:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.signature]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/channel/modules/form.vue b/apps/web-tdesign/src/views/system/sms/channel/modules/form.vue
new file mode 100644
index 000000000..bf639e2d7
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/channel/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createSmsChannel,
+  getSmsChannel,
+  updateSmsChannel,
+} from '#/api/system/sms/channel';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSmsChannelApi.SmsChannel>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['短信渠道'])
+    : $t('ui.actionTitle.create', ['短信渠道']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemSmsChannelApi.SmsChannel;
+    try {
+      await (formData.value?.id
+        ? updateSmsChannel(data)
+        : createSmsChannel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSmsChannelApi.SmsChannel>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSmsChannel(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/log/data.ts b/apps/web-tdesign/src/views/system/sms/log/data.ts
new file mode 100644
index 000000000..3babce416
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/log/data.ts
@@ -0,0 +1,265 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入手机号',
+      },
+    },
+    {
+      fieldName: 'channelId',
+      label: '短信渠道',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleSmsChannelList,
+        labelField: 'signature',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择短信渠道',
+      },
+    },
+    {
+      fieldName: 'templateId',
+      label: '模板编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编号',
+      },
+    },
+    {
+      fieldName: 'sendStatus',
+      label: '发送状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择发送状态',
+      },
+    },
+    {
+      fieldName: 'sendTime',
+      label: '发送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'receiveStatus',
+      label: '接收状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择接收状态',
+      },
+    },
+    {
+      fieldName: 'receiveTime',
+      label: '接收时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'mobile',
+      title: '手机号',
+      minWidth: 120,
+    },
+    {
+      field: 'templateContent',
+      title: '短信内容',
+      minWidth: 300,
+    },
+    {
+      field: 'sendStatus',
+      title: '发送状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS },
+      },
+    },
+    {
+      field: 'sendTime',
+      title: '发送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'receiveStatus',
+      title: '接收状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS },
+      },
+    },
+    {
+      field: 'receiveTime',
+      title: '接收时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'channelCode',
+      title: '短信渠道',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'templateId',
+      title: '模板编号',
+      minWidth: 100,
+    },
+    {
+      field: 'templateType',
+      title: '短信类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'mobile',
+      label: '手机号',
+    },
+    {
+      field: 'channelCode',
+      label: '短信渠道',
+    },
+    {
+      field: 'templateId',
+      label: '模板编号',
+    },
+    {
+      field: 'templateType',
+      label: '模板类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'templateContent',
+      label: '短信内容',
+    },
+    {
+      field: 'sendStatus',
+      label: '发送状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'sendTime',
+      label: '发送时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'apiSendCode',
+      label: 'API 发送编码',
+    },
+    {
+      field: 'apiSendMsg',
+      label: 'API 发送消息',
+    },
+    {
+      field: 'receiveStatus',
+      label: '接收状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'receiveTime',
+      label: '接收时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'apiReceiveCode',
+      label: 'API 接收编码',
+    },
+    {
+      field: 'apiReceiveMsg',
+      label: 'API 接收消息',
+      span: 2,
+    },
+    {
+      field: 'apiRequestId',
+      label: 'API 请求 ID',
+    },
+    {
+      field: 'apiSerialNo',
+      label: 'API 序列号',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/sms/log/index.vue b/apps/web-tdesign/src/views/system/sms/log/index.vue
new file mode 100644
index 000000000..6735fde57
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/log/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSmsLogApi } from '#/api/system/sms/log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSmsLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '短信日志.xls', source: data });
+}
+
+/** 查看短信日志详情 */
+function handleDetail(row: SystemSmsLogApi.SmsLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSmsLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="短信日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:sms-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:sms-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/log/modules/detail.vue b/apps/web-tdesign/src/views/system/sms/log/modules/detail.vue
new file mode 100644
index 000000000..2831f6ff5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/log/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemSmsLogApi } from '#/api/system/sms/log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemSmsLogApi.SmsLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSmsLogApi.SmsLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="短信日志详情"
+    class="w-[1280px]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/template/data.ts b/apps/web-tdesign/src/views/system/sms/template/data.ts
new file mode 100644
index 000000000..13786c56a
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/data.ts
@@ -0,0 +1,274 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '短信类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
+        placeholder: '请选择短信类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'channelId',
+      label: '短信渠道',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleSmsChannelList,
+        labelField: 'signature',
+        valueField: 'id',
+        placeholder: '请选择短信渠道',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入模板内容',
+        rows: 4,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'apiTemplateId',
+      label: '短信 API 的模板编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的模板编号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '短信类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择短信类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择开启状态',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      },
+    },
+    {
+      fieldName: 'channelId',
+      label: '短信渠道',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleSmsChannelList,
+        labelField: 'signature',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择短信渠道',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 发送短信表单 */
+export function useSendSmsFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'type',
+      title: '短信类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 120,
+    },
+    {
+      field: 'code',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'content',
+      title: '模板内容',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'apiTemplateId',
+      title: '短信 API 的模板编号',
+      minWidth: 180,
+    },
+    {
+      field: 'channelCode',
+      title: '短信渠道',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/sms/template/index.vue b/apps/web-tdesign/src/views/system/sms/template/index.vue
new file mode 100644
index 000000000..e2bb00ad8
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSmsTemplate,
+  deleteSmsTemplateList,
+  exportSmsTemplate,
+  getSmsTemplatePage,
+} from '#/api/system/sms/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [SendModal, sendModalApi] = useVbenModal({
+  connectedComponent: SendForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSmsTemplate(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '短信模板.xls', source: data });
+}
+
+/** 创建短信模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑短信模板 */
+function handleEdit(row: SystemSmsTemplateApi.SmsTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 发送测试短信 */
+function handleSend(row: SystemSmsTemplateApi.SmsTemplate) {
+  sendModalApi.setData(row).open();
+}
+
+/** 删除短信模板 */
+async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteSmsTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除短信模板 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteSmsTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsTemplateApi.SmsTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSmsTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <SendModal />
+    <Grid table-title="短信模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['短信模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:sms-template:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:sms-template:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:sms-template:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:sms-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:sms-template:send-sms'],
+              onClick: handleSend.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:sms-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/template/modules/form.vue b/apps/web-tdesign/src/views/system/sms/template/modules/form.vue
new file mode 100644
index 000000000..74d894f23
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createSmsTemplate,
+  getSmsTemplate,
+  updateSmsTemplate,
+} from '#/api/system/sms/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['短信模板'])
+    : $t('ui.actionTitle.create', ['短信模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplate;
+    try {
+      await (formData.value?.id
+        ? updateSmsTemplate(data)
+        : createSmsTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSmsTemplate(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/template/modules/send-form.vue b/apps/web-tdesign/src/views/system/sms/template/modules/send-form.vue
new file mode 100644
index 000000000..839b44477
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/modules/send-form.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { sendSms } from '#/api/system/sms/template';
+
+import { useSendSmsFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 构建发送请求
+    const values = await formApi.getValues();
+    const paramsObj: Record<string, string> = {};
+    if (formData.value?.params) {
+      formData.value.params.forEach((param) => {
+        paramsObj[param] = values[`param_${param}`];
+      });
+    }
+    const data: SystemSmsTemplateApi.SmsSendReqVO = {
+      mobile: values.mobile,
+      templateCode: formData.value?.code || '',
+      templateParams: paramsObj,
+    };
+
+    // 提交表单
+    try {
+      await sendSms(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success('短信发送成功');
+    } catch (error) {
+      console.error('发送短信失败', error);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 获取数据
+    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    // 更新 form schema
+    const schema = buildFormSchema();
+    formApi.setState({ schema });
+    // 设置到 values
+    await formApi.setValues({
+      content: data.content,
+    });
+  },
+});
+
+/** 动态构建表单 schema */
+function buildFormSchema() {
+  const schema = useSendSmsFormSchema();
+  if (formData.value?.params) {
+    formData.value.params.forEach((param) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+        rules: 'required',
+      });
+    });
+  }
+  return schema;
+}
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发送短信">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/client/data.ts b/apps/web-tdesign/src/views/system/social/client/data.ts
new file mode 100644
index 000000000..bbcd3c18b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/client/data.ts
@@ -0,0 +1,211 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemUserSocialTypeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'socialType',
+      label: '社交平台',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号，对应各平台的 appKey',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'clientSecret',
+      label: '客户端密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端密钥，对应各平台的 appSecret',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'agentId',
+      label: 'agentId',
+      component: 'Input',
+      componentProps: {
+        placeholder: '授权方的网页应用 ID，有则填',
+      },
+      dependencies: {
+        triggerFields: ['socialType'],
+        show: (values) =>
+          values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'socialType',
+      label: '社交平台',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
+        placeholder: '请选择社交平台',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '应用名',
+      minWidth: 120,
+    },
+    {
+      field: 'socialType',
+      title: '社交平台',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
+      },
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'clientId',
+      title: '客户端编号',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/social/client/index.vue b/apps/web-tdesign/src/views/system/social/client/index.vue
new file mode 100644
index 000000000..9cf69805f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/client/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSocialClientApi } from '#/api/system/social/client';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSocialClient,
+  deleteSocialClientList,
+  getSocialClientPage,
+} from '#/api/system/social/client';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建社交客户端 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑社交客户端 */
+function handleEdit(row: SystemSocialClientApi.SocialClient) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除社交客户端 */
+async function handleDelete(row: SystemSocialClientApi.SocialClient) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteSocialClient(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除社交客户端 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteSocialClientList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSocialClientApi.SocialClient[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSocialClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSocialClientApi.SocialClient>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="三方登录" url="https://doc.iocoder.cn/social-user/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="社交客户端列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['社交客户端']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:social-client:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:social-client:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:social-client:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:social-client:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/client/modules/form.vue b/apps/web-tdesign/src/views/system/social/client/modules/form.vue
new file mode 100644
index 000000000..647e5806d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/client/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemSocialClientApi } from '#/api/system/social/client';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createSocialClient,
+  getSocialClient,
+  updateSocialClient,
+} from '#/api/system/social/client';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSocialClientApi.SocialClient>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['社交客户端'])
+    : $t('ui.actionTitle.create', ['社交客户端']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemSocialClientApi.SocialClient;
+    try {
+      await (formData.value?.id
+        ? updateSocialClient(data)
+        : createSocialClient(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSocialClientApi.SocialClient>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSocialClient(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/user/data.ts b/apps/web-tdesign/src/views/system/social/user/data.ts
new file mode 100644
index 000000000..afc0b537b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/user/data.ts
@@ -0,0 +1,152 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Image } from 'tdesign-vue-next';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '社交平台',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
+        placeholder: '请选择社交平台',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'openid',
+      label: '社交 openid',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入社交 openid',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'type',
+      title: '社交平台',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
+      },
+    },
+    {
+      field: 'openid',
+      title: '社交 openid',
+      minWidth: 180,
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 120,
+    },
+    {
+      field: 'avatar',
+      title: '用户头像',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'type',
+      label: '社交平台',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'nickname',
+      label: '用户昵称',
+    },
+    {
+      field: 'avatar',
+      label: '用户头像',
+      render: (val) => (val ? h(Image, { src: val }) : '无'),
+    },
+    {
+      field: 'token',
+      label: '社交 token',
+    },
+    {
+      field: 'rawTokenInfo',
+      label: '原始 Token 数据',
+    },
+    {
+      field: 'rawUserInfo',
+      label: '原始 User 数据',
+    },
+    {
+      field: 'code',
+      label: '最后一次的认证 code',
+    },
+    {
+      field: 'state',
+      label: '最后一次的认证 state',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/social/user/index.vue b/apps/web-tdesign/src/views/system/social/user/index.vue
new file mode 100644
index 000000000..1f5a3aec3
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/user/index.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSocialUserApi } from '#/api/system/social/user';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSocialUserPage } from '#/api/system/social/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 查看详情 */
+function handleDetail(row: SystemSocialUserApi.SocialUser) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSocialUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="三方登录" url="https://doc.iocoder.cn/social-user/" />
+    </template>
+
+    <DetailModal />
+    <Grid table-title="社交用户列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:social-user:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/user/modules/detail.vue b/apps/web-tdesign/src/views/system/social/user/modules/detail.vue
new file mode 100644
index 000000000..de2b35cbf
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/user/modules/detail.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { SystemSocialUserApi } from '#/api/system/social/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getSocialUser } from '#/api/system/social/user';
+import { useDescription } from '#/components/description';
+import { $t } from '#/locales';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemSocialUserApi.SocialUser>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  title: $t('ui.actionTitle.detail'),
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSocialUser(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="社交用户详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenant/data.ts b/apps/web-tdesign/src/views/system/tenant/data.ts
new file mode 100644
index 000000000..d2a7dbf70
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenant/data.ts
@@ -0,0 +1,242 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getTenantPackageList } from '#/api/system/tenant-package';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let tenantPackageList: SystemTenantPackageApi.TenantPackage[] = [];
+getTenantPackageList().then((data) => (tenantPackageList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '租户名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'packageId',
+      label: '租户套餐',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getTenantPackageList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择租户套餐',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'contactName',
+      label: '联系人',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'contactMobile',
+      label: '联系手机',
+      component: 'Input',
+      rules: 'mobile',
+    },
+    {
+      label: '用户名称',
+      fieldName: 'username',
+      component: 'Input',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      label: '用户密码',
+      fieldName: 'password',
+      component: 'InputPassword',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      label: '账号额度',
+      fieldName: 'accountCount',
+      component: 'InputNumber',
+      rules: 'required',
+    },
+    {
+      label: '过期时间',
+      fieldName: 'expireTime',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        placeholder: '请选择过期时间',
+      },
+      rules: 'required',
+    },
+    {
+      label: '绑定域名',
+      fieldName: 'websites',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入绑定域名',
+        mode: 'tags',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '租户状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '租户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入租户名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'contactName',
+      label: '联系人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'contactMobile',
+      label: '联系手机',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系手机',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '租户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '租户名',
+      minWidth: 180,
+    },
+    {
+      field: 'packageId',
+      title: '租户套餐',
+      minWidth: 180,
+      formatter: ({ cellValue }) => {
+        return cellValue === 0
+          ? '系统租户'
+          : tenantPackageList.find((pkg) => pkg.id === cellValue)?.name || '-';
+      },
+    },
+    {
+      field: 'contactName',
+      title: '联系人',
+      minWidth: 100,
+    },
+    {
+      field: 'contactMobile',
+      title: '联系手机',
+      minWidth: 180,
+    },
+    {
+      field: 'accountCount',
+      title: '账号额度',
+      minWidth: 100,
+    },
+    {
+      field: 'expireTime',
+      title: '过期时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'websites',
+      title: '绑定域名',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '租户状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/tenant/index.vue b/apps/web-tdesign/src/views/system/tenant/index.vue
new file mode 100644
index 000000000..6816ff422
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenant/index.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemTenantApi } from '#/api/system/tenant';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteTenant,
+  deleteTenantList,
+  exportTenant,
+  getTenantPage,
+} from '#/api/system/tenant';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportTenant(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '租户.xls', source: data });
+}
+
+/** 创建租户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑租户 */
+function handleEdit(row: SystemTenantApi.Tenant) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除租户 */
+async function handleDelete(row: SystemTenantApi.Tenant) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteTenant(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除租户 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteTenantList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantApi.Tenant[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTenantPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemTenantApi.Tenant>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="租户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['租户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:tenant:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:tenant:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:tenant:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:tenant:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenant/modules/form.vue b/apps/web-tdesign/src/views/system/tenant/modules/form.vue
new file mode 100644
index 000000000..a9e152151
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenant/modules/form.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { SystemTenantApi } from '#/api/system/tenant';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createTenant, getTenant, updateTenant } from '#/api/system/tenant';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemTenantApi.Tenant>();
+const getTitle = computed(() => {
+  return formData.value
+    ? $t('ui.actionTitle.edit', ['租户'])
+    : $t('ui.actionTitle.create', ['租户']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass: 'grid-cols-1',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemTenantApi.Tenant;
+    try {
+      await (formData.value ? updateTenant(data) : createTenant(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemTenantApi.Tenant>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTenant(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenantPackage/data.ts b/apps/web-tdesign/src/views/system/tenantPackage/data.ts
new file mode 100644
index 000000000..7ac4e2899
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenantPackage/data.ts
@@ -0,0 +1,127 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'menuIds',
+      label: '菜单权限',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入套餐名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择状态',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '套餐编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '套餐名称',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/tenantPackage/index.vue b/apps/web-tdesign/src/views/system/tenantPackage/index.vue
new file mode 100644
index 000000000..17f349100
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenantPackage/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteTenantPackage,
+  deleteTenantPackageList,
+  getTenantPackagePage,
+} from '#/api/system/tenant-package';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建租户套餐 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑租户套餐 */
+function handleEdit(row: SystemTenantPackageApi.TenantPackage) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除租户套餐 */
+async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteTenantPackage(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除租户套餐 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteTenantPackageList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantPackageApi.TenantPackage[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTenantPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="租户套餐列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['套餐']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:tenant-package:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant-package:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:tenant-package:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant-package:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenantPackage/modules/form.vue b/apps/web-tdesign/src/views/system/tenantPackage/modules/form.vue
new file mode 100644
index 000000000..f1fb2afec
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenantPackage/modules/form.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { SystemMenuApi } from '#/api/system/menu';
+import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
+
+import { computed, ref } from 'vue';
+
+import { Tree, useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox } from 'tdesign-vue-next';
+import { message } from '#/adapter/tdesign';
+
+import { useVbenForm } from '#/adapter/form';
+import { getMenuList } from '#/api/system/menu';
+import {
+  createTenantPackage,
+  getTenantPackage,
+  updateTenantPackage,
+} from '#/api/system/tenant-package';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemTenantPackageApi.TenantPackage>();
+const getTitle = computed(() => {
+  return formData.value
+    ? $t('ui.actionTitle.edit', ['套餐'])
+    : $t('ui.actionTitle.create', ['套餐']);
+});
+const menuTree = ref<SystemMenuApi.Menu[]>([]); // 菜单树
+const menuLoading = ref(false); // 加载菜单列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(false); // 展开状态
+const expandedKeys = ref<number[]>([]); // 展开的节点
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemTenantPackageApi.TenantPackage;
+    try {
+      await (formData.value
+        ? updateTenantPackage(data)
+        : createTenantPackage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载菜单列表
+    await loadMenuTree();
+    // 加载数据
+    const data = modalApi.getData<SystemTenantPackageApi.TenantPackage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTenantPackage(data.id);
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 加载菜单树 */
+async function loadMenuTree() {
+  menuLoading.value = true;
+  try {
+    const data = await getMenuList();
+    menuTree.value = handleTree(data) as SystemMenuApi.Menu[];
+  } finally {
+    menuLoading.value = false;
+  }
+}
+
+/** 全选/全不选 */
+function handleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (isAllSelected.value) {
+    const allIds = getAllNodeIds(menuTree.value);
+    formApi.setFieldValue('menuIds', allIds);
+  } else {
+    formApi.setFieldValue('menuIds', []);
+  }
+}
+
+/** 展开/折叠所有节点 */
+function handleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
+}
+
+/** 递归获取所有节点 ID */
+function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
+  nodes.forEach((node: any) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-6">
+      <template #menuIds="slotProps">
+        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+          <Tree
+            class="max-h-96 overflow-y-auto"
+            :tree-data="menuTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
+          全选
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
+          全部展开
+        </Checkbox>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/data.ts b/apps/web-tdesign/src/views/system/user/data.ts
new file mode 100644
index 000000000..fca5ddefd
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/data.ts
@@ -0,0 +1,344 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      label: '用户密码',
+      fieldName: 'password',
+      component: 'InputPassword',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'deptId',
+      label: '归属部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getDeptList();
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择归属部门',
+        treeDefaultExpandAll: true,
+      },
+    },
+    {
+      fieldName: 'postIds',
+      label: '岗位',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimplePostList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择岗位',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '用户性别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '用户状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 重置密码的表单 */
+export function useResetPasswordFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: '请输入新密码',
+      },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入新密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value !== values.oldPassword,
+              '新旧密码不能相同',
+            );
+        },
+        triggerFields: ['newPassword', 'oldPassword'],
+      },
+      fieldName: 'newPassword',
+      label: '新密码',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
+        },
+        triggerFields: ['newPassword', 'confirmPassword'],
+      },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 分配角色的表单 */
+export function useAssignRoleFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'roleIds',
+      label: '角色',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleRoleList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择角色',
+      },
+    },
+  ];
+}
+
+/** 用户导入的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '用户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的用户数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: SystemUserApi.User,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'username',
+      title: '用户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 120,
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+      minWidth: 120,
+    },
+    {
+      field: 'mobile',
+      title: '手机号码',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/user/index.vue b/apps/web-tdesign/src/views/system/user/index.vue
new file mode 100644
index 000000000..c69b9235d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/index.vue
@@ -0,0 +1,296 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Card } from 'tdesign-vue-next';
+import { message } from '#/adapter/tdesign';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteUser,
+  deleteUserList,
+  exportUser,
+  getUserPage,
+  updateUserStatus,
+} from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import AssignRoleForm from './modules/assign-role-form.vue';
+import DeptTree from './modules/dept-tree.vue';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+import ResetPasswordForm from './modules/reset-password-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ResetPasswordModal, resetPasswordModalApi] = useVbenModal({
+  connectedComponent: ResetPasswordForm,
+  destroyOnClose: true,
+});
+
+const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
+  connectedComponent: AssignRoleForm,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportUser(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
+}
+
+/** 选择部门 */
+const searchDeptId = ref<number | undefined>(undefined);
+async function handleDeptSelect(dept: SystemDeptApi.Dept) {
+  searchDeptId.value = dept.id;
+  handleRefresh();
+}
+
+/** 创建用户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 导入用户 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 编辑用户 */
+function handleEdit(row: SystemUserApi.User) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除用户 */
+async function handleDelete(row: SystemUserApi.User) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.username]),
+    duration: 0,
+  });
+  try {
+    await deleteUser(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除用户 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemUserApi.User[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 重置密码 */
+function handleResetPassword(row: SystemUserApi.User) {
+  resetPasswordModalApi.setData(row).open();
+}
+
+/** 分配角色 */
+function handleAssignRole(row: SystemUserApi.User) {
+  assignRoleModalApi.setData(row).open();
+}
+
+/** 更新用户状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: SystemUserApi.User,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新用户状态
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            deptId: searchDeptId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemUserApi.User>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+      <DocAlert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
+      <DocAlert
+        title="Excel 导入导出"
+        url="https://doc.iocoder.cn/excel-import-and-export/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ResetPasswordModal @success="handleRefresh" />
+    <AssignRoleModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <!-- 左侧部门树 -->
+      <Card class="mr-4 h-full w-1/6">
+        <DeptTree @select="handleDeptSelect" />
+      </Card>
+      <!-- 右侧用户列表 -->
+      <div class="w-5/6">
+        <Grid table-title="用户列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['用户']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['system:user:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['system:user:export'],
+                  onClick: handleExport,
+                },
+                {
+                  label: $t('ui.actionTitle.import', ['用户']),
+                  type: 'primary',
+                  icon: ACTION_ICON.UPLOAD,
+                  auth: ['system:user:import'],
+                  onClick: handleImport,
+                },
+                {
+                  label: $t('ui.actionTitle.deleteBatch'),
+                  type: 'danger',
+                  icon: ACTION_ICON.DELETE,
+                  disabled: isEmpty(checkedIds),
+                  auth: ['system:user:delete'],
+                  onClick: handleDeleteBatch,
+                },
+              ]"
+            />
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  variant: 'text',
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['system:user:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  variant: 'text',
+                  type: 'danger',
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['system:user:delete'],
+                  popConfirm: {
+                    title: $t('ui.actionMessage.deleteConfirm', [row.username]),
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+              :drop-down-actions="[
+                {
+                  label: '分配角色',
+                  variant: 'text',
+                  auth: ['system:permission:assign-user-role'],
+                  onClick: handleAssignRole.bind(null, row),
+                },
+                {
+                  label: '重置密码',
+                  variant: 'text',
+                  auth: ['system:user:update-password'],
+                  onClick: handleResetPassword.bind(null, row),
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/assign-role-form.vue b/apps/web-tdesign/src/views/system/user/modules/assign-role-form.vue
new file mode 100644
index 000000000..80dbd8487
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/assign-role-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { assignUserRole, getUserRoleList } from '#/api/system/permission';
+import { $t } from '#/locales';
+
+import { useAssignRoleFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignRoleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const values = await formApi.getValues();
+    try {
+      await assignUserRole({
+        userId: values.id,
+        roleIds: values.roleIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const roleIds = await getUserRoleList(data.id);
+      // 设置到 values
+      await formApi.setValues({
+        ...data,
+        roleIds,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="分配角色">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/dept-tree.vue b/apps/web-tdesign/src/views/system/user/modules/dept-tree.vue
new file mode 100644
index 000000000..d5ae8da78
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/dept-tree.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { Input, Tree } from 'tdesign-vue-next';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+
+const emit = defineEmits(['select']);
+const deptList = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTree = ref<any[]>([]); // 部门树
+const expandedKeys = ref<number[]>([]); // 展开的节点
+const loading = ref(false); // 加载状态
+const searchValue = ref(''); // 搜索值
+
+/** 处理搜索逻辑 */
+function handleSearch(e: any) {
+  const value = e.target.value;
+  searchValue.value = value;
+  const filteredList = value
+    ? deptList.value.filter((item) =>
+        item.name.toLowerCase().includes(value.toLowerCase()),
+      )
+    : deptList.value;
+  deptTree.value = handleTree(filteredList);
+  // 展开所有节点
+  expandedKeys.value = deptTree.value.map((node) => node.id!);
+}
+
+/** 选中部门 */
+function handleSelect(_selectedKeys: any[], info: any) {
+  emit('select', info.node.dataRef);
+}
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    loading.value = true;
+    const data = await getSimpleDeptList();
+    deptList.value = data;
+    deptTree.value = handleTree(data);
+  } catch (error) {
+    console.error('获取部门数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Input
+      placeholder="搜索部门"
+      allow-clear
+      v-model="searchValue"
+      @change="handleSearch"
+      class="w-full"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="size-4" />
+      </template>
+    </Input>
+    <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Tree
+        @select="handleSelect"
+        v-if="deptTree.length > 0"
+        class="pt-2"
+        :tree-data="deptTree"
+        :default-expand-all="true"
+        :field-names="{ title: 'name', key: 'id', children: 'children' }"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </Spin>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/form.vue b/apps/web-tdesign/src/views/system/user/modules/form.vue
new file mode 100644
index 000000000..2576cbed2
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createUser, getUser, updateUser } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemUserApi.User>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['用户'])
+    : $t('ui.actionTitle.create', ['用户']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemUserApi.User;
+    try {
+      await (formData.value?.id ? updateUser(data) : createUser(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/import-form.vue b/apps/web-tdesign/src/views/system/user/modules/import-form.vue
new file mode 100644
index 000000000..ebc69cd93
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/import-form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'tdesign-vue-next';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, Upload } from 'tdesign-vue-next';
+import { message } from '#/adapter/tdesign';
+import { useVbenForm } from '#/adapter/form';
+import { importUser, importUserTemplate } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importUser(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: UploadFile) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importUserTemplate();
+  downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="导入用户" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <Button theme="primary"> 选择 Excel 文件 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/reset-password-form.vue b/apps/web-tdesign/src/views/system/user/modules/reset-password-form.vue
new file mode 100644
index 000000000..22b2e4243
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/reset-password-form.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { resetUserPassword } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useResetPasswordFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useResetPasswordFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await resetUserPassword(data.id, data.newPassword);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 设置到 values
+    await formApi.setValues(data);
+  },
+});
+</script>
+
+<template>
+  <Modal title="重置密码">
+    <Form class="mx-4" />
+  </Modal>
+</template>