优化请求枚举，页面交互

app/api/v1/apis/apis.py

@@ -15,6 +15,7 @@ async def list_api(
     path: str = Query(None, description="API路径"),
     summary: str = Query(None, description="API简介"),
     tags: str = Query(None, description="API模块"),
+    method: str = Query(None, description="请求方式"),
 ):
     q = Q()
     if path:
@@ -23,6 +24,8 @@ async def list_api(
         q &= Q(summary__contains=summary)
     if tags:
         q &= Q(tags__contains=tags)
+    if method:
+        q &= Q(method=method)
     total, api_objs = await api_controller.list(page=page, page_size=page_size, search=q, order=["tags", "id"])
     data = [await obj.to_dict() for obj in api_objs]
     return SuccessExtra(data=data, total=total, page=page, page_size=page_size)

web/src/components/table/CrudTable.vue

@@ -12,13 +12,17 @@
       :scroll-x="scrollX"
       :row-key="(row) => row[rowKey]"
       :pagination="isPagination ? pagination : false"
+      :default-sort="props.defaultSort"
+      :sorter="sorterState"
       @update:checked-row-keys="onChecked"
       @update:page="onPageChange"
+      @update:sorter="onSorterChange"
     />
   </div>
 </template>
 
 <script setup>
+import { onMounted, nextTick } from 'vue'
 const props = defineProps({
   /**
    * @remote true: 后端分页  false： 前端分页
@@ -49,30 +53,26 @@ const props = defineProps({
   /** queryBar中的参数 */
   queryItems: {
     type: Object,
-    default() {
-      return {}
-    },
+    default: () => ({}),
   },
-  /** 补充参数（可选） */
+  /** 额外的参数 */
   extraParams: {
     type: Object,
-    default() {
-      return {}
-    },
+    default: () => ({}),
   },
-  /**
-   * ! 约定接口入参出参
-   * * 分页模式需约定分页接口入参
-   *    @page_size 分页参数：一页展示多少条，默认10
-   *    @page   分页参数：页码，默认1
-   */
+  /** 获取数据的方法 */
   getData: {
     type: Function,
     required: true,
   },
+  /** 默认排序 */
+  defaultSort: {
+    type: Object,
+    default: () => ({ columnKey: 'created_at', order: 'descend' }),
+  },
 })
 
-const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange', 'update:sorter'])
 const loading = ref(false)
 const initQuery = { ...props.queryItems }
 const tableData = ref([])
@@ -126,9 +126,13 @@ async function handleReset() {
   for (const key in queryItems) {
     queryItems[key] = null
   }
+  // 强制重置排序状态为默认倒序
+  sorterState.value = { ...props.defaultSort };
   emit('update:queryItems', { ...queryItems, ...initQuery })
+  emit('update:sorter', sorterState.value);
   await nextTick()
   pagination.page = 1
+  // 强制触发搜索以应用排序状态
   handleQuery()
 }
 function onPageChange(currentPage) {
@@ -143,9 +147,35 @@ function onChecked(rowKeys) {
   }
 }
 
+const sorterState = ref(props.defaultSort)
+
+// 处理排序变化
+function onSorterChange(sorter) {
+  // 如果 sorter.order 为 null (清除排序) 并且是当前默认的排序列
+  if (!sorter.order && sorter.columnKey === props.defaultSort.columnKey) {
+    // 将 sorterState 恢复为默认排序状态
+    sorterState.value = { ...props.defaultSort };
+  } else {
+    sorterState.value = sorter;
+  }
+  // 发送更新后的 sorterState 给父组件
+  emit('update:sorter', sorterState.value);
+}
+
+// 组件挂载时触发初始排序
+onMounted(async () => {
+  if (props.defaultSort) {
+    emit('update:sorter', props.defaultSort);
+  }
+  // Ensure parent onMounted (which sets initial queryItems) runs before initial search
+  await nextTick(); 
+  handleQuery();
+});
+
 defineExpose({
   handleSearch,
   handleReset,
   tableData,
+  sorterState,
 })
 </script>

web/src/utils/constants.js

@@ -0,0 +1,16 @@
+// HTTP请求方法枚举
+export const HTTP_METHODS = {
+  GET: 'GET',
+  POST: 'POST',
+  PUT: 'PUT',
+  DELETE: 'DELETE',
+  PATCH: 'PATCH'
+}
+
+export const HTTP_METHOD_OPTIONS = [
+  { label: 'GET', value: 'GET' },
+  { label: 'POST', value: 'POST' },
+  { label: 'PUT', value: 'PUT' },
+  { label: 'DELETE', value: 'DELETE' },
+  { label: 'PATCH', value: 'PATCH' }
+]

web/src/views/system/api/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
-import { NButton, NForm, NFormItem, NInput, NPopconfirm } from 'naive-ui'
+import { NButton, NForm, NFormItem, NInput, NPopconfirm, NSelect } from 'naive-ui'
 
 import CommonPage from '@/components/page/CommonPage.vue'
 import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
@@ -9,6 +9,7 @@ import CrudTable from '@/components/table/CrudTable.vue'
 import TheIcon from '@/components/icon/TheIcon.vue'
 
 import { renderIcon } from '@/utils'
+import { HTTP_METHOD_OPTIONS } from '@/utils/constants'
 import { useCRUD } from '@/composables'
 // import { loginTypeMap, loginTypeOptions } from '@/constant/data'
 import api from '@/api'
@@ -232,6 +233,15 @@ const columns = [
             @keypress.enter="$table?.handleSearch()"
           />
         </QueryBarItem>
+        <QueryBarItem label="请求方式" :label-width="80">
+          <NSelect
+            v-model:value="queryItems.method"
+            :options="HTTP_METHOD_OPTIONS"
+            clearable
+            placeholder="请选择请求方式"
+            style="width: 180px;"
+          />
+        </QueryBarItem>
       </template>
     </CrudTable>
 
@@ -254,7 +264,11 @@ const columns = [
           <NInput v-model:value="modalForm.path" clearable placeholder="请输入API路径" />
         </NFormItem>
         <NFormItem label="请求方式" path="method">
-          <NInput v-model:value="modalForm.method" clearable placeholder="请输入请求方式" />
+          <NSelect 
+  v-model:value="modalForm.method" 
+  :options="HTTP_METHOD_OPTIONS"
+  placeholder="请选择请求方式"
+/>
         </NFormItem>
         <NFormItem label="API简介" path="summary">
           <NInput v-model:value="modalForm.summary" clearable placeholder="请输入API简介" />

web/src/views/system/auditlog/index.vue

@@ -15,8 +15,8 @@ const $table = ref(null)
 const queryItems = ref({})
 
 onMounted(() => {
-  $table.value?.handleSearch()
-})
+  // 初始化
+});
 
 function formatTimestamp(timestamp) {
   const date = new Date(timestamp)
@@ -203,6 +203,9 @@ const columns = [
     ellipsis: { tooltip: true },
   },
 ]
+
+
+
 </script>
 
 <template>