vome-core 0.0.1

package/src/admin/crud/vm-toolbar.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="vm-crud-toolbar">
+    <div class="vm-crud-toolbar__left">
+      <button
+        v-if="showAddBtn"
+        type="button"
+        class="vm-crud-toolbar__btn is-primary"
+        @click="onAdd"
+      >
+        <i class="ri-add-line" />
+        {{ addText || crud.dict.label.add }}
+      </button>
+      <button
+        v-if="showDelete && crud.getPermission('delete')"
+        type="button"
+        class="vm-crud-toolbar__btn is-danger"
+        :disabled="!crud.selection.value.length"
+        @click="crud.rowDelete()"
+      >
+        <i class="ri-delete-bin-line" />
+        {{ deleteText || crud.dict.label.multiDelete }}
+      </button>
+      <slot />
+    </div>
+    <div class="vm-crud-toolbar__right">
+      <slot name="right" />
+      <div v-if="showSearchActions" class="vm-crud-toolbar__search">
+        <button type="button" class="vm-crud-toolbar__btn is-primary" @click="onSearch">
+          搜索
+        </button>
+        <button type="button" class="vm-crud-toolbar__btn is-ghost" @click="onReset">
+          重置
+        </button>
+      </div>
+      <div v-if="trash" class="vm-crud-toolbar__tabs">
+        <button
+          type="button"
+          class="vm-crud-toolbar__tab"
+          :class="{ 'is-active': crud.trashMode.value === 'default' }"
+          @click="onTrash('default')"
+        >
+          列表
+        </button>
+        <button
+          type="button"
+          class="vm-crud-toolbar__tab"
+          :class="{ 'is-active': crud.trashMode.value === 'onlyTrashed' }"
+          @click="onTrash('onlyTrashed')"
+        >
+          回收站
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+defineOptions({ name: 'vm-toolbar' })
+
+const props = withDefaults(
+  defineProps<{
+    trash?: boolean
+    /** 显示搜索/重置（默认开；放在列表/回收站左侧） */
+    search?: boolean
+    showAdd?: boolean
+    showDelete?: boolean
+    /** 打开新增表单时的默认值 */
+    addData?: Record<string, unknown> | (() => Record<string, unknown>)
+    /** 回收站中是否隐藏新增（默认 true） */
+    hideAddInTrash?: boolean
+    addText?: string
+    deleteText?: string
+  }>(),
+  {
+    trash: true,
+    search: true,
+    showAdd: true,
+    showDelete: true,
+    hideAddInTrash: true,
+    addText: '新增',
+    deleteText: '删除',
+  },
+)
+
+const crud = useCrud()
+
+/** 是否显示新增：权限与回收站 */
+const showAddBtn = computed(() => {
+  if (!props.showAdd) return false
+  if (!crud.getPermission('add')) return false
+  if (props.hideAddInTrash && crud.trashMode.value === 'onlyTrashed') return false
+  return true
+})
+
+const showSearchActions = computed(
+  () => props.search && crud.hasSearchFilters.value,
+)
+
+function onAdd() {
+  const raw = props.addData
+  const defaults = typeof raw === 'function' ? raw() : raw
+  crud.rowAdd(defaults && Object.keys(defaults).length ? defaults : {})
+}
+
+function onSearch() {
+  crud.searchActions.value?.search()
+}
+
+function onReset() {
+  crud.searchActions.value?.reset()
+}
+
+function onTrash(mode: CrudTrashMode) {
+  crud.trashMode.value = mode
+  crud.pagination.value = { ...crud.pagination.value, page: 1 }
+  void crud.refresh()
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-toolbar {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.vm-crud-toolbar__left {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.vm-crud-toolbar__right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-left: auto;
+  gap: 10px;
+}
+
+.vm-crud-toolbar__search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.vm-crud-toolbar__btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: var(--brand-deep);
+    }
+  }
+
+  &.is-ghost {
+    background: var(--muted);
+    color: var(--foreground);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+    }
+  }
+
+  &.is-danger {
+    background: var(--danger-soft);
+    color: var(--danger);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 12%);
+    }
+  }
+}
+
+.vm-crud-toolbar__tabs {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  padding: 3px;
+  border-radius: 12px;
+  background: var(--muted);
+}
+
+.vm-crud-toolbar__tab {
+  height: 30px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+  &.is-active {
+    background: #fff;
+    color: var(--foreground);
+    font-weight: 600;
+    box-shadow: var(--shadow-card);
+
+    .dark & {
+      background: var(--card);
+    }
+  }
+}
+
+/* 中窄屏（含侧栏半宽）：展平左右分区，统一流式换行；宽屏仍左右布局 */
+@media (max-width: 1280px) {
+  .vm-crud-toolbar,
+  .vm-crud-toolbar__left,
+  .vm-crud-toolbar__right,
+  .vm-crud-toolbar__search {
+    display: contents;
+  }
+
+  .vm-crud-toolbar__tabs {
+    flex: 0 0 auto;
+  }
+}
+</style>