发布v2.2.10版本，更新内容请查看：https://github.com/bufanyun/hotgo/tree/v2.0/docs/guide-zh-CN/addon-version-upgrade.md

web/src/views/addons/hgexample/config/BasicSetting.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="测试参数" path="basicTest">
+          <n-input v-model:value="formValue.basicTest" placeholder="请输入测试参数" />
+          <template #feedback>
+            这是一个测试参数，每个插件都可以有独立的配置项，可以按需添加</template
+          >
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/addons/hgexample/config';
+
+  const group = ref('basic');
+
+  const show = ref(false);
+  const rules = {
+    basicTest: {
+      required: true,
+      message: '请输入测试参数',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    basicTest: 'HotGo',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>

web/src/views/addons/hgexample/config/system.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <n-grid cols="24 300:1 600:24" :x-gap="24">
+      <n-grid-item span="6">
+        <n-card :bordered="false" size="small" class="proCard">
+          <n-thing
+            class="thing-cell"
+            v-for="item in typeTabList"
+            :key="item.key"
+            :class="{ 'thing-cell-on': type === item.key }"
+            @click="switchType(item)"
+          >
+            <template #header>{{ item.name }}</template>
+            <template #description>{{ item.desc }}</template>
+          </n-thing>
+        </n-card>
+      </n-grid-item>
+      <n-grid-item span="18">
+        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
+          <BasicSetting v-if="type === 1" />
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import BasicSetting from './BasicSetting.vue';
+  const typeTabList = [
+    {
+      name: '基本设置',
+      desc: '系统常规设置',
+      key: 1,
+    },
+  ];
+  export default defineComponent({
+    components: {
+      BasicSetting,
+    },
+    setup() {
+      const state = reactive({
+        type: 1,
+        typeTitle: '基本设置',
+      });
+
+      function switchType(e) {
+        state.type = e.key;
+        state.typeTitle = e.name;
+      }
+
+      return {
+        ...toRefs(state),
+        switchType,
+        typeTabList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
+
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
+  }
+
+  .thing-cell-on {
+    background: #f0faff;
+    color: #2d8cf0;
+
+    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
+  }
+</style>

web/src/views/addons/hgexample/portal/form.vue

@@ -0,0 +1,45 @@
+<template>
+  <n-form class="py-4">
+    <n-form-item label="测试入口" path="index">
+      <n-input-group>
+        <n-input placeholder="请输入" :default-value="url" :disabled="true" />
+        <n-button v-copy="url" type="primary" @click="copy"> 复制链接 </n-button>
+      </n-input-group>
+    </n-form-item>
+
+    <n-form-item label="二维码" path="index">
+      <div class="text-center">
+        <qrcode-vue :value="url" :size="220" class="canvas" style="margin: 0 auto" />
+      </div>
+    </n-form-item>
+  </n-form>
+</template>
+
+<script lang="ts" setup>
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+  import QrcodeVue from 'qrcode.vue';
+  import { useMessage } from 'naive-ui';
+
+  const message = useMessage();
+
+  interface Props {
+    path: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    path: '',
+  });
+
+  const copy = () => {
+    message.success('复制成功');
+  };
+
+  const useUserStore = useUserStoreWidthOut();
+  const url = useUserStore.config?.domain + props.path;
+</script>
+
+<style scoped>
+  ::v-deep(.card-tabs .n-tabs-nav--bar-type) {
+    padding-left: 4px;
+  }
+</style>

web/src/views/addons/hgexample/portal/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <n-card title="应用入口" style="margin-bottom: 16px">
+      <n-tabs type="line" animated>
+        <n-tab-pane name="admin" tab="后台API">
+          <Form path="/admin/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+        <n-tab-pane name="api" tab="前台API">
+          <Form path="/api/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+        <n-tab-pane name="home" tab="前台页面">
+          <Form path="/home/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+        <n-tab-pane name="websocket" tab="Websocket">
+          <Form path="/socket/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import Form from './form.vue';
+</script>
+
+<style scoped>
+  ::v-deep(.card-tabs .n-tabs-nav--bar-type) {
+    padding-left: 4px;
+  }
+</style>

web/src/views/addons/hgexample/table/edit.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="isShowModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-form
+        :model="params"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="标题" path="title">
+          <n-input placeholder="请输入标题" v-model:value="params.title" />
+        </n-form-item>
+
+        <n-form-item label="分类ID" path="categoryId">
+          <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
+        </n-form-item>
+
+        <n-form-item label="标签" path="flag">
+          <n-checkbox-group v-model:value="params.flag">
+            <n-space>
+              <n-checkbox
+                v-for="item in options.sys_notice_type"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
+            </n-space>
+          </n-checkbox-group>
+        </n-form-item>
+
+        <n-form-item label="描述" path="description">
+          <n-input type="textarea" placeholder="描述" v-model:value="params.description" />
+        </n-form-item>
+
+        <n-form-item label="内容" path="content">
+          <Editor style="height: 450px" v-model:value="params.content" />
+        </n-form-item>
+
+        <n-form-item label="单图" path="image">
+          <UploadImage :maxNumber="1" v-model:value="params.image" />
+        </n-form-item>
+
+        <n-form-item label="多图" path="images">
+          <UploadImage :maxNumber="10" v-model:value="params.images" />
+        </n-form-item>
+
+        <n-form-item label="单附件" path="attachfile">
+          <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
+        </n-form-item>
+
+        <n-form-item label="多附件" path="attachfiles">
+          <UploadFile :maxNumber="10" v-model:value="params.attachfiles" />
+        </n-form-item>
+
+        <n-form-item label="键值对" path="map">
+          <n-dynamic-input
+            v-model:value="params.map"
+            preset="pair"
+            key-placeholder="键名"
+            value-placeholder="键值"
+          />
+        </n-form-item>
+        <n-form-item label="推荐星" path="star">
+          <n-rate allow-half :default-value="params.star" :on-update:value="updateStar" />
+        </n-form-item>
+
+        <n-form-item label="价格" path="price">
+          <n-input-number
+            placeholder="请输入价格"
+            clearable
+            v-model:value="params.price"
+            :precision="2"
+          />
+        </n-form-item>
+
+        <n-form-item label="活动时间" path="activityAt">
+          <DatePicker v-model:formValue="params.activityAt" type="date" />
+        </n-form-item>
+
+        <n-form-item label="开放时间" path="startAt">
+          <DatePicker
+            v-model:startValue="params.startAt"
+            v-model:endValue="params.endAt"
+            type="datetimerange"
+          />
+        </n-form-item>
+
+        <n-form-item label="用户渠道" path="channel">
+          <n-select v-model:value="params.channel" :options="options.sys_user_channel" />
+        </n-form-item>
+
+        <n-form-item label="所在城市" path="cityId">
+          <CitySelector v-model:value="params.cityId" />
+        </n-form-item>
+
+        <n-form-item label="用户爱好" path="hobby">
+          <n-select multiple v-model:value="params.hobby" :options="options.sys_user_hobby" />
+        </n-form-item>
+
+        <n-form-item label="QQ" path="qq">
+          <n-input placeholder="请输入QQ号" v-model:value="params.qq" />
+        </n-form-item>
+
+        <n-form-item label="邮箱" path="email">
+          <n-input placeholder="请输入邮箱地址" v-model:value="params.email" />
+        </n-form-item>
+
+        <n-form-item label="手机号" path="mobile">
+          <n-input placeholder="请输入手机号" v-model:value="params.mobile" />
+        </n-form-item>
+
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="params.sort" clearable />
+        </n-form-item>
+
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="params.status" name="status">
+            <n-radio-button
+              v-for="status in options.sys_normal_disable"
+              :key="Number(status.value)"
+              :value="Number(status.value)"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="备注" path="remark">
+          <n-input type="textarea" placeholder="请输入备注" v-model:value="params.remark" />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { rules, options, State, newState } from './model';
+  import { Edit, MaxSort } from '@/api/addons/hgexample/table';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import DatePicker from '@/components/DatePicker/datePicker.vue';
+  import Editor from '@/components/Editor/editor.vue';
+  import UploadImage from '@/components/Upload/uploadImage.vue';
+  import UploadFile from '@/components/Upload/uploadFile.vue';
+  import CitySelector from '@/components/CitySelector/citySelector.vue';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const params = computed(() => {
+    return props.formParams;
+  });
+
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const dialogWidth = ref('75%');
+  const formBtnLoading = ref(false);
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function updateStar(num) {
+    params.value.star = num;
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  watch(
+    () => params.value,
+    (value) => {
+      if (value.id === 0) {
+        MaxSort().then((res) => {
+          params.value.sort = res.sort;
+        });
+      }
+    }
+  );
+
+  onMounted(async () => {
+    adaModalWidth(dialogWidth);
+  });
+</script>
+
+<style lang="less"></style>

web/src/views/addons/hgexample/table/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="表格例子">
+        这里提供了一些常用的普通表格组件的用法和表单组件的例子，你可能会需要
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+        :resizeHeightOffset="-10000"
+        size="small"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable" class="min-left-space">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加
+          </n-button>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button type="primary" @click="handleExport" class="min-left-space">
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit
+      @reloadTable="reloadTable"
+      @updateShowModal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { Delete, List, Status, Export } from '@/api/addons/hgexample/table';
+  import { State, columns, schemas, options, newState } from './model';
+  import { DeleteOutlined, PlusOutlined, ExportOutlined } from '@vicons/antd';
+  import { useRouter } from 'vue-router';
+  import { getOptionLabel } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  const router = useRouter();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const message = useMessage();
+  const searchFormRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const showModal = ref(false);
+  const formParams = ref<State>();
+
+  const actionColumn = reactive({
+    width: 300,
+    title: '操作',
+    key: 'action',
+    // fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+        dropDownActions: [
+          {
+            label: '查看详情',
+            key: 'view',
+          },
+          {
+            label: '更多按钮1',
+            key: 'test1',
+            // 根据业务控制是否显示: 非enable状态的不显示启用按钮
+            ifShow: () => {
+              return true;
+            },
+          },
+          {
+            label: '更多按钮2',
+            key: 'test2',
+            ifShow: () => {
+              return true;
+            },
+          },
+        ],
+        select: (key) => {
+          if (key === 'view') {
+            return handleView(record);
+          }
+          message.info(`您点击了，${key} 按钮`);
+        },
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = newState(null);
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleView(record: Recordable) {
+    router.push({ name: 'table_view', params: { id: record.id } });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + getOptionLabel(options.value.sys_normal_disable, status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+</script>
+
+<style lang="less" scoped></style>

web/src/views/addons/hgexample/table/model.ts

@@ -0,0 +1,519 @@
+import { h, ref } from 'vue';
+import { NAvatar, NImage, NTag, NSwitch, NRate } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { Dicts } from '@/api/dict/dict';
+import { Switch } from '@/api/addons/hgexample/table';
+import { isNullObject } from '@/utils/is';
+import { getFileExt } from '@/utils/urlUtils';
+import { defRangeShortcuts, defShortcuts, formatToDate } from '@/utils/dateUtil';
+import { validate } from '@/utils/validateUtil';
+import { errorImg, getOptionLabel, getOptionTag, Options } from '@/utils/hotgo';
+const $message = window['$message'];
+export interface State {
+  id: number;
+  memberId: number;
+  categoryId: number;
+  flag: number[] | null;
+  title: string;
+  content: string;
+  image: string;
+  images: string[] | null;
+  attachfile: string;
+  attachfiles: string[] | null;
+  map: unknown[] | null;
+  star: number;
+  description: string;
+  price: number;
+  views: number;
+  activityAt: string;
+  startAt: null;
+  endAt: null;
+  switch: number;
+  sort: number;
+  avatar: string;
+  sex: number;
+  qq: string;
+  email: string;
+  mobile: string;
+  channel: number;
+  cityId: number;
+  hobby: string[] | null;
+  pid: number;
+  level: number;
+  tree: string;
+  remark: string;
+  status: number;
+  createdBy: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const defaultState = {
+  id: 0,
+  memberId: 0,
+  categoryId: 0,
+  flag: [1],
+  title: '',
+  content: '',
+  image: '',
+  images: null,
+  attachfile: '',
+  attachfiles: null,
+  map: null,
+  star: 0,
+  description: '',
+  price: 0,
+  views: 0,
+  activityAt: '',
+  startAt: null,
+  endAt: null,
+  switch: 0,
+  sort: 0,
+  avatar: '',
+  sex: 0,
+  qq: '',
+  email: '',
+  mobile: '',
+  channel: 0,
+  cityId: 0,
+  hobby: null,
+  pid: 0,
+  level: 1,
+  tree: '',
+  remark: '',
+  status: 1,
+  createdBy: 0,
+  createdAt: '',
+  updatedAt: '',
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}
+
+export const options = ref<Options>({
+  sys_normal_disable: [],
+  sys_user_sex: [],
+  sys_notice_type: [],
+  sys_user_channel: [],
+  sys_user_hobby: [],
+  sys_switch: [],
+});
+
+export const rules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入标题',
+  },
+  price: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.amount,
+  },
+  qq: {
+    required: false,
+    trigger: ['blur', 'input'],
+    validator: validate.qq,
+  },
+  email: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.email,
+  },
+  mobile: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.phone,
+  },
+};
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入标题', trigger: ['blur'] }],
+  },
+  {
+    field: 'content',
+    component: 'NInput',
+    label: '内容',
+    componentProps: {
+      placeholder: '请输入内容关键词',
+      showButton: false,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'price',
+    labelMessage: '我是自定义提示',
+    component: 'NInput',
+    label: '价格',
+    componentProps: {
+      pair: true,
+      separator: '-',
+      clearable: true,
+      placeholder: ['从', '到'],
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'activityAt',
+    component: 'NDatePicker',
+    label: '活动时间',
+    componentProps: {
+      type: 'date',
+      clearable: true,
+      shortcuts: defShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'flag',
+    component: 'NCheckbox',
+    label: '标签',
+    giProps: {
+      span: 1,
+    },
+    componentProps: {
+      placeholder: '请选择标签',
+      options: [],
+      onUpdateChecked: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'switch',
+    component: 'NRadioGroup',
+    label: '开关',
+    giProps: {
+      //span: 24,
+    },
+    componentProps: {
+      options: [],
+      onUpdateChecked: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'hobby',
+    component: 'NSelect',
+    label: '爱好',
+    defaultValue: null,
+    componentProps: {
+      multiple: true,
+      placeholder: '请选择爱好',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择类型',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+  },
+  {
+    title: '标题',
+    key: 'title',
+    render(row) {
+      return row.title;
+    },
+  },
+  {
+    title: '标签',
+    key: 'flag',
+    render(row) {
+      if (isNullObject(row.flag)) {
+        return ``;
+      }
+      return row.flag.map((tagKey) => {
+        return h(
+          NTag,
+          {
+            style: {
+              marginRight: '6px',
+            },
+            type: getOptionTag(options.value.sys_notice_type, tagKey),
+            bordered: false,
+          },
+          {
+            default: () => getOptionLabel(options.value.sys_notice_type, tagKey),
+          }
+        );
+      });
+    },
+  },
+  {
+    title: '单图',
+    key: 'image',
+    render(row) {
+      return h(NImage, {
+        width: 32,
+        height: 32,
+        src: row.image,
+        onError: errorImg,
+        style: {
+          width: '32px',
+          height: '32px',
+          'max-width': '100%',
+          'max-height': '100%',
+        },
+      });
+    },
+  },
+  {
+    title: '多图',
+    key: 'images',
+    render(row) {
+      if (isNullObject(row.images)) {
+        return ``;
+      }
+      return row.images.map((image) => {
+        return h(NImage, {
+          width: 32,
+          height: 32,
+          src: image,
+          onError: errorImg,
+          style: {
+            width: '32px',
+            height: '32px',
+            'max-width': '100%',
+            'max-height': '100%',
+            'margin-left': '2px',
+          },
+        });
+      });
+    },
+  },
+  {
+    title: '附件',
+    key: 'attachfile',
+    render(row) {
+      if (row.attachfile === '') {
+        return ``;
+      }
+      return h(
+        NAvatar,
+        {
+          size: 'small',
+        },
+        {
+          default: () => getFileExt(row.attachfile),
+        }
+      );
+    },
+  },
+  {
+    title: '多附件',
+    key: 'attachfiles',
+    render(row) {
+      if (isNullObject(row.attachfiles)) {
+        return ``;
+      }
+      return row.attachfiles.map((attachfile) => {
+        return h(
+          NAvatar,
+          {
+            size: 'small',
+            style: {
+              'margin-left': '2px',
+            },
+          },
+          {
+            default: () => getFileExt(attachfile),
+          }
+        );
+      });
+    },
+  },
+  {
+    title: '推荐星',
+    key: 'star',
+    // width: 180,
+    render(row) {
+      return h(NRate, {
+        allowHalf: true,
+        readonly: true,
+        defaultValue: row.star,
+      });
+    },
+  },
+  {
+    title: '描述',
+    key: 'description',
+  },
+  {
+    title: '价格',
+    key: 'price',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.price.toFixed(2),
+        }
+      );
+    },
+  },
+  {
+    title: '开关',
+    key: 'switch',
+    width: 100,
+    render(row) {
+      return h(NSwitch, {
+        value: row.switch === 1,
+        checked: '开启',
+        unchecked: '关闭',
+        onUpdateValue: function (e) {
+          row.switch = e ? 1 : 2;
+          Switch({ id: row.id, key: 'switch', value: row.switch }).then((_res) => {
+            $message.success('操作成功');
+          });
+        },
+      });
+    },
+  },
+  // {
+  //   title: '排序',
+  //   key: 'sort',
+  // },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      if (isNullObject(row.status)) {
+        return ``;
+      }
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: getOptionTag(options.value.sys_normal_disable, row.status),
+          bordered: false,
+        },
+        {
+          default: () => getOptionLabel(options.value.sys_normal_disable, row.status),
+        }
+      );
+    },
+  },
+  {
+    title: '爱好',
+    key: 'hobby',
+    render(row) {
+      if (isNullObject(row.hobby)) {
+        return ``;
+      }
+      return row.hobby.map((tagKey) => {
+        return h(
+          NTag,
+          {
+            style: {
+              marginRight: '6px',
+            },
+            type: getOptionTag(options.value.sys_user_hobby, tagKey),
+            bordered: false,
+          },
+          {
+            default: () => getOptionLabel(options.value.sys_user_hobby, tagKey),
+          }
+        );
+      });
+    },
+  },
+  {
+    title: '活动时间',
+    key: 'activityAt',
+    render(row) {
+      return formatToDate(row.activityAt);
+    },
+  },
+];
+
+async function loadOptions() {
+  options.value = await Dicts({
+    types: [
+      'sys_normal_disable',
+      'sys_user_sex',
+      'sys_notice_type',
+      'sys_switch',
+      'sys_user_hobby',
+      'sys_user_channel',
+    ],
+  });
+  for (const item of schemas.value) {
+    switch (item.field) {
+      case 'status':
+        item.componentProps.options = options.value.sys_normal_disable;
+        break;
+      case 'flag':
+        item.componentProps.options = options.value.sys_notice_type;
+        break;
+      case 'switch':
+        item.componentProps.options = options.value.sys_switch;
+        break;
+      case 'hobby':
+        item.componentProps.options = options.value.sys_user_hobby;
+        break;
+    }
+  }
+}
+
+await loadOptions();

web/src/views/addons/hgexample/table/view.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础详情"> 基础详情，有时也用于显示只读信息。 </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+      <n-descriptions label-placement="left" class="py-2" column="4">
+        <n-descriptions-item>
+          <template #label>分类ID</template>
+          {{ formValue.categoryId }}
+        </n-descriptions-item>
+
+        <n-descriptions-item label="标签">
+          <template v-for="(item, key) in formValue?.flag" :key="key">
+            <n-tag
+              :type="getOptionTag(options.sys_notice_type, item)"
+              size="small"
+              class="min-left-space"
+              >{{ getOptionLabel(options.sys_notice_type, item) }}</n-tag
+            >
+          </template>
+        </n-descriptions-item>
+        <n-descriptions-item label="标题">{{ formValue.title }}</n-descriptions-item>
+        <n-descriptions-item label="描述">{{ formValue.description }}</n-descriptions-item>
+        <n-descriptions-item label="推荐星"
+          ><n-rate readonly :default-value="formValue.star"
+        /></n-descriptions-item>
+        <n-descriptions-item label="价格">{{ formValue.price }}</n-descriptions-item>
+        <n-descriptions-item label="浏览次数">{{ formValue.views }}</n-descriptions-item>
+        <n-descriptions-item label="活动时间">{{ formValue.activityAt }}</n-descriptions-item>
+        <n-descriptions-item label="开关">
+          <n-switch v-model:value="formValue.switch" :unchecked-value="2" :checked-value="1"
+        /></n-descriptions-item>
+        <n-descriptions-item label="创建人ID">{{ formValue.createdBy }} </n-descriptions-item>
+        <n-descriptions-item label="创建时间">{{ formValue.createdAt }} </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+      <n-descriptions label-placement="top" title="内容" class="py-2" column="1">
+        <n-descriptions-item><span v-html="formValue.content"></span></n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+      <n-descriptions label-placement="top" title="单图" class="py-2" column="1">
+        <n-descriptions-item>
+          <n-image style="margin-left: 10px; height: 100px; width: 100px" :src="formValue.image"
+        /></n-descriptions-item>
+      </n-descriptions>
+
+      <n-descriptions label-placement="top" title="多图" class="py-2" column="1">
+        <n-descriptions-item>
+          <n-image-group>
+            <n-space>
+              <span v-for="(item, key) in formValue?.images" :key="key">
+                <n-image style="margin-left: 10px; height: 100px; width: 100px" :src="item" />
+              </span>
+            </n-space>
+          </n-image-group>
+        </n-descriptions-item>
+      </n-descriptions>
+
+      <n-descriptions label-placement="top" title="附件" class="py-2" column="1">
+        <n-descriptions-item>
+          <div
+            class="upload-card"
+            v-show="formValue.attachfile !== ''"
+            @click="download(formValue.attachfile)"
+          >
+            <div class="upload-card-item" style="height: 100px; width: 100px">
+              <div class="upload-card-item-info">
+                <div class="img-box">
+                  <n-avatar :style="fileAvatarCSS">{{ getFileExt(formValue.attachfile) }}</n-avatar>
+                </div>
+              </div>
+            </div>
+          </div>
+        </n-descriptions-item>
+      </n-descriptions>
+
+      <n-descriptions label-placement="top" title="多附件" class="py-2" column="1">
+        <n-descriptions-item>
+          <div class="upload-card">
+            <n-space style="gap: 0px 0px">
+              <div
+                class="upload-card-item"
+                style="height: 100px; width: 100px"
+                v-for="(item, key) in formValue.attachfiles"
+                :key="key"
+              >
+                <div class="upload-card-item-info">
+                  <div class="img-box">
+                    <n-avatar :style="fileAvatarCSS" @click="download(item)">{{
+                      getFileExt(item)
+                    }}</n-avatar>
+                  </div>
+                </div>
+              </div>
+            </n-space>
+          </div>
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from 'naive-ui';
+  import { View } from '@/api/addons/hgexample/table';
+  import { newState, options } from './model';
+  import { getOptionLabel, getOptionTag } from '@/utils/hotgo';
+  import { getFileExt } from '@/utils/urlUtils';
+
+  const message = useMessage();
+  const router = useRouter();
+  const id = Number(router.currentRoute.value.params.id);
+  const formValue = ref(newState(null));
+  const fileAvatarCSS = computed(() => {
+    return {
+      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
+      '--n-font-size': `18px`,
+    };
+  });
+
+  //下载
+  function download(url: string) {
+    window.open(url);
+  }
+
+  onMounted(async () => {
+    if (id < 1) {
+      message.error('ID不正确，请检查！');
+      return;
+    }
+    formValue.value = await View({ id: id });
+  });
+</script>
+
+<style lang="less" scoped></style>