feat: 优化搜索按钮

src/components/form/form-node.tsx

@@ -58,7 +58,7 @@ export const nodeMap = {
     nodeProps: {
       placeholder: "请输入",
       allowClear: true,
-    } as InstanceType<typeof InputSearch>["$props"],
+    } as InstanceType<typeof Input>["$props"] & InstanceType<typeof InputSearch>["$props"],
   },
   /**
    * 文本域

src/components/table/use-interface.ts

@@ -1,8 +1,8 @@
 import { Doption, Link, TableColumnData, TableData } from "@arco-design/web-vue";
+import { RenderFunction } from "vue";
 import { FormModalProps, FormProps } from "../form";
 import { IFormItem } from "../form/form-item";
 import { TableProps } from "./table";
-import { RenderFunction } from "vue";
 
 interface UseColumnRenderOptions {
   /**
@@ -102,12 +102,20 @@ type ExtendedFormItem = Partial<IFormItem> & {
   extend?: string;
 };
 
+type SearchFormItem = ExtendedFormItem & {
+  enableLoad?: boolean;
+};
+
 type Search = Partial<
   Omit<FormProps, "items"> & {
     /**
      * 表单项
      */
-    items?: ExtendedFormItem[];
+    items?: SearchFormItem[];
+    /**
+     * bu
+     */
+    button?: boolean
   }
 >;
 
@@ -147,4 +155,8 @@ export interface UseTableOptions extends Omit<TableProps, "search" | "create" |
    * 详情弹窗配置
    */
   detail?: any;
+  /**
+   * 批量删除配置
+   */
+  delete?: any;
 }

src/components/table/use-table.tsx

@@ -171,9 +171,22 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions))
           continue;
         }
       }
-      searchItems.push(merge({}, item));
+      const search = !item.enableLoad ? undefined : () => getTable().reloadData()
+      searchItems.push(
+        merge(
+          {
+            nodeProps: {
+              onSearch: search,
+              onPressEnter: search
+            },
+          },
+          item
+        )
+      );
+    }
+    if (options.search.button !== false) {
+      searchItems.push(config.searchItemSubmit);
     }
-    searchItems.push(config.searchItemSubmit);
     options.search.items = searchItems;
   }
 

src/pages/post/category/index.vue

@@ -1,8 +1,6 @@
 <template>
   <BreadPage>
-    <Table v-bind="table">
-
-    </Table>
+    <Table v-bind="table"> </Table>
   </BreadPage>
 </template>
 
@@ -45,8 +43,8 @@ const table = useTable({
       width: 120,
       buttons: [
         {
-          type: 'modify',
-          text: '修改'
+          type: "modify",
+          text: "修改",
         },
         {
           type: "delete",
@@ -59,15 +57,17 @@ const table = useTable({
     },
   ],
   search: {
+    button: false,
     items: [
       {
         field: "nickname",
         label: "登陆账号",
-        type: "input",
+        type: "search",
         required: false,
+        enableLoad: true,
         nodeProps: {
-          placeholder: "名称关键字",
-        },
+          placeholder: "分类名称",
+        } as any,
         itemProps: {
           hideLabel: true,
         },

src/pages/post/media/components/use-modal.ts

@@ -1,4 +0,0 @@
-
-export const useModal = (modal: any) => {
-
-}

src/pages/post/media/index.vue

@@ -19,9 +19,10 @@
             </template>
           </a-button>
         </div>
-        <li 
-          v-for="i in 10" 
-          class="group flex items-center justify-between gap-2 h-8 rounded mb-1 pl-2 hover:bg-gray-100 cursor-pointer">
+        <li
+          v-for="i in 10"
+          class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
+        >
           <div>
             <i class="icon-file-folder text-gray-600"></i>
             日常素材
@@ -57,6 +58,23 @@
 import { api } from "@/api";
 import { Table, useTable } from "@/components";
 import { dayjs } from "@/libs/dayjs";
+import numeral from 'numeral';
+
+const getIcon = (mimetype: string) => {
+  if (mimetype.startsWith("image")) {
+    return "icon-file-iimage";
+  }
+  if (mimetype.startsWith("video")) {
+    return "icon-file-ivideo";
+  }
+  if (mimetype.startsWith("text")) {
+    return "icon-file-itxt";
+  }
+  if (mimetype.startsWith("audio")) {
+    return "icon-file-iaudio";
+  }
+  return "icon-file-iunknown";
+};
 
 const table = useTable({
   data: async (model, paging) => {
@@ -66,14 +84,23 @@ const table = useTable({
     {
       title: "文件名称",
       dataIndex: "name",
-      width: 260,
+      render: ({ record }) => {
+        return (
+          <div class="flex items-center">
+            <i class={`${getIcon(record.mimetype)} text-xl mr-2`}></i>
+            {record.name}
+          </div>
+        );
+      },
     },
     {
-      title: "操作描述",
+      title: "大小",
       dataIndex: "description",
+      width: 120,
+      render: ({ record }) => numeral(record.size).format('0 b')
     },
     {
-      title: "登陆时间",
+      title: "上传时间",
       dataIndex: "createdAt",
       width: 200,
       render: ({ record }) => dayjs(record.createdAt).format(),
@@ -85,6 +112,7 @@ const table = useTable({
       buttons: [
         {
           type: "modify",
+          text: '修改'
         },
         {
           type: "delete",
@@ -97,11 +125,19 @@ const table = useTable({
     },
   ],
   search: {
+    button: false,
     items: [
       {
         field: "name",
         label: "文件名称",
-        type: "input",
+        type: "search",
+        enableLoad: true,
+        itemProps: {
+          hideLabel: true,
+        },
+        nodeProps: {
+          placeholder: '素材名称...'
+        } as any
       },
     ],
   },

src/styles/css-arco.less

@@ -3,6 +3,7 @@
 @arcoblue-6: #08f;
 
 body {
+  --border-radius-small: 4px;
   li.arco-dropdown-option {
     line-height: 28px;
     width: calc(100% - 8px);

src/types/auto-component.d.ts

@@ -7,34 +7,58 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('@arco-design/web-vue')['Alert']
     AAutoComplete: typeof import('@arco-design/web-vue')['AutoComplete']
+    AAvatar: typeof import('@arco-design/web-vue')['Avatar']
+    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
+    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
+    ACard: typeof import('@arco-design/web-vue')['Card']
     ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
+    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
+    ADatePicker: typeof import('@arco-design/web-vue')['DatePicker']
     ADivider: typeof import('@arco-design/web-vue')['Divider']
     ADoption: typeof import('@arco-design/web-vue')['Doption']
+    ADrawer: typeof import('@arco-design/web-vue')['Drawer']
+    ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
     ADropdownButton: typeof import('@arco-design/web-vue')['DropdownButton']
     AEmpty: typeof import('@arco-design/web-vue')['Empty']
     AForm: typeof import('@arco-design/web-vue')['Form']
     AFormItem: typeof import('@arco-design/web-vue')['FormItem']
+    AImage: typeof import('@arco-design/web-vue')['Image']
     AInput: typeof import('@arco-design/web-vue')['Input']
     AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
     AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
     AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
+    ALayout: typeof import('@arco-design/web-vue')['Layout']
+    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
+    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
+    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
     ALink: typeof import('@arco-design/web-vue')['Link']
+    AList: typeof import('@arco-design/web-vue')['List']
+    AListItem: typeof import('@arco-design/web-vue')['ListItem']
+    AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
+    AMenuItemGroup: typeof import('@arco-design/web-vue')['MenuItemGroup']
     AModal: typeof import('@arco-design/web-vue')['Modal']
     APagination: typeof import('@arco-design/web-vue')['Pagination']
     APopover: typeof import('@arco-design/web-vue')['Popover']
     ARadio: typeof import('@arco-design/web-vue')['Radio']
     ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
+    AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
     ASelect: typeof import('@arco-design/web-vue')['Select']
     ASpace: typeof import('@arco-design/web-vue')['Space']
     ASpin: typeof import('@arco-design/web-vue')['Spin']
+    ASwitch: typeof import('@arco-design/web-vue')['Switch']
+    ATabPane: typeof import('@arco-design/web-vue')['TabPane']
+    ATabs: typeof import('@arco-design/web-vue')['Tabs']
     ATag: typeof import('@arco-design/web-vue')['Tag']
     ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
+    ATree: typeof import('@arco-design/web-vue')['Tree']
+    AUpload: typeof import('@arco-design/web-vue')['Upload']
     BaseOption: typeof import('./../components/editor/components/BaseOption.vue')['default']
     Block: typeof import('./../components/editor/panel-main/components/block.vue')['default']
     BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']

src/types/vite-env.d.ts

@@ -5,4 +5,9 @@ declare module "*.vue" {
   import type { DefineComponent } from "vue";
   const component: DefineComponent<{}, {}, any>;
   export default component;
+}
+
+declare module 'numeral' {
+  const numeral: any
+  export default numeral;
 }

src/utils/delConfirm.ts

@@ -7,7 +7,7 @@ const delOptions = {
   title: "提示",
   titleAlign: "start",
   width: 432,
-  content: "确定删除该数据吗？注意：该操作不可恢复！",
+  content: "危险操作！确定删除该数据吗？",
   maskClosable: false,
   closable: false,
   okText: "确定",
@@ -27,3 +27,4 @@ const delConfirm = (config: DelOptions = {}) => {
 };
 
 export { delConfirm };
+