@ysgroup/ui 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/YsCrudTable.vue

@@ -48,8 +48,7 @@ const COLUMN_WIDTHS: Record<string, number> = {
 };
 
 function columnWidth(field: FieldSpec): number {
-  return COLUMN_WIDTHS[field.key]
-    ?? (field.widget === "switch" ? 64 : field.widget === "enum" ? 100 : 140);
+  return COLUMN_WIDTHS[field.key] ?? (field.widget === "switch" ? 64 : field.widget === "enum" ? 100 : 140);
 }
 
 const props = defineProps<{
@@ -65,6 +64,7 @@ const props = defineProps<{
   rowDisplay?: (row: Record<string, unknown>, field: string, value: unknown) => unknown;
   saving?: boolean;
   externalEditor?: boolean;
+  actionWidth?: number;
 }>();
 
 const emit = defineEmits<{
@@ -81,9 +81,7 @@ const currentPage = ref(1);
 const pageSize = ref(20);
 const PAGE_SIZES = [20, 50, 100];
 
-const allSpecs = computed<FieldSpec[]>(
-  () => (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? [],
-);
+const allSpecs = computed<FieldSpec[]>(() => (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? []);
 
 const displayColumns = computed<FieldSpec[]>(() => {
   if (props.columns?.length) {
@@ -99,18 +97,25 @@ const filtered = computed(() => {
   if (!kw) return props.rows;
   return props.rows.filter((r) =>
     displayColumns.value.some((c) =>
-      String(r[c.key] ?? "").toLowerCase().includes(kw),
+      String(r[c.key] ?? "")
+        .toLowerCase()
+        .includes(kw),
     ),
   );
 });
 
 // 搜索词变化时重置到第一页
-watch(keyword, () => { currentPage.value = 1; });
-// 行数变化（外部数据更新）时若当前页超出则回到第一页
-watch(() => filtered.value.length, (len) => {
-  const maxPage = Math.max(1, Math.ceil(len / pageSize.value));
-  if (currentPage.value > maxPage) currentPage.value = 1;
+watch(keyword, () => {
+  currentPage.value = 1;
 });
+// 行数变化（外部数据更新）时若当前页超出则回到第一页
+watch(
+  () => filtered.value.length,
+  (len) => {
+    const maxPage = Math.max(1, Math.ceil(len / pageSize.value));
+    if (currentPage.value > maxPage) currentPage.value = 1;
+  },
+);
 
 const paged = computed(() => {
   const start = (currentPage.value - 1) * pageSize.value;
@@ -158,33 +163,22 @@ function onSubmit(payload: Record<string, unknown>) {
 <template>
   <div class="ys-crud">
     <div class="ys-crud__toolbar">
-      <el-input
-        v-model="keyword"
-        placeholder="搜索"
-        clearable
-        style="width: 200px"
-      />
+      <el-input v-model="keyword" placeholder="搜索" clearable style="width: 200px" />
       <div class="ys-crud__spacer" />
       <el-button v-if="!readonly" type="primary" @click="onCreate">{{ createLabel || "新建" }}</el-button>
     </div>
 
     <el-table :data="paged" v-loading="loading" stripe border size="small" table-layout="fixed" row-key="_id">
-      <el-table-column
-        v-for="c in displayColumns"
-        :key="c.key"
-        :label="c.title"
-        :width="columnWidth(c)"
-        show-overflow-tooltip
-      >
+      <el-table-column v-for="c in displayColumns" :key="c.key" :label="c.title" :width="columnWidth(c)" show-overflow-tooltip>
         <template #default="{ row }">{{ display(row, c) }}</template>
       </el-table-column>
-      <el-table-column v-if="!readonly" label="操作" width="260">
+      <el-table-column v-if="!readonly" label="操作" :width="actionWidth ?? 160" fixed="right">
         <template #default="{ row }">
-          <el-button size="small" @click="onEdit(row)">编辑</el-button>
-          <slot name="row-actions" :row="row" />
-          <el-button size="small" type="danger" plain @click="onRemove(row)">
-            删除
-          </el-button>
+          <div class="ys-crud__actions">
+            <el-button size="small" @click="onEdit(row)">编辑</el-button>
+            <slot name="row-actions" :row="row" />
+            <el-button size="small" type="danger" plain @click="onRemove(row)">删除</el-button>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -200,15 +194,7 @@ function onSubmit(payload: Record<string, unknown>) {
       @size-change="currentPage = 1"
     />
 
-    <YsFormDialog
-      v-if="!externalEditor"
-      v-model="dialogOpen"
-      :table="table"
-      :record="editing"
-      :hidden="hiddenInForm"
-      :saving="saving"
-      @submit="onSubmit"
-    />
+    <YsFormDialog v-if="!externalEditor" v-model="dialogOpen" :table="table" :record="editing" :hidden="hiddenInForm" :saving="saving" @submit="onSubmit" />
   </div>
 </template>
 
@@ -225,4 +211,13 @@ function onSubmit(payload: Record<string, unknown>) {
   margin-top: 12px;
   justify-content: flex-end;
 }
+.ys-crud__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+.ys-crud__actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
 </style>

package/src/components/YsPageHeader.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+  meta?: string;
+  compact?: boolean;
+}>();
+</script>
+
+<template>
+  <header class="ys-page-header" :class="{ 'is-compact': compact }">
+    <div class="ys-page-header__content">
+      <span v-if="meta" class="ys-page-header__meta">{{ meta }}</span>
+      <h1>{{ title }}</h1>
+      <p v-if="description">{{ description }}</p>
+    </div>
+    <div v-if="$slots.actions" class="ys-page-header__actions">
+      <slot name="actions" />
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.ys-page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin: 0 0 18px;
+}
+.ys-page-header__content {
+  min-width: 0;
+}
+.ys-page-header__meta {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--ys-color-primary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.ys-page-header h1 {
+  margin: 0;
+  color: var(--ys-color-text-1);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.ys-page-header p {
+  max-width: 760px;
+  margin: 6px 0 0;
+  color: var(--ys-color-text-3);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.ys-page-header__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+}
+.ys-page-header.is-compact {
+  margin-bottom: 14px;
+}
+.ys-page-header.is-compact h1 {
+  font-size: 20px;
+}
+@media (max-width: 720px) {
+  .ys-page-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .ys-page-header__actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
+</style>

package/src/index.ts

@@ -3,6 +3,7 @@
 export { default as YsCrudTable } from "./components/YsCrudTable.vue";
 export { default as YsFormDialog } from "./components/YsFormDialog.vue";
 export { default as YsPageLayout } from "./components/YsPageLayout.vue";
+export { default as YsPageHeader } from "./components/YsPageHeader.vue";
 export { default as YsLoginPage } from "./components/YsLoginPage.vue";
 export { default as YsSettingsCenterDialog } from "./components/YsSettingsCenterDialog.vue";
 export { default as YsPortalGrid } from "./components/YsPortalGrid.vue";