@ysgroup/ui 0.1.26 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -21,4 +21,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/YsBoolMark.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { CircleCheckFilled } from "@element-plus/icons-vue";
+
+defineProps<{
+  value: unknown;
+  onLabel?: string;
+  offLabel?: string;
+}>();
+</script>
+
+<template>
+  <el-icon class="ys-bool-mark" :class="value ? 'is-yes' : 'is-no'" :size="18" :title="value ? (onLabel ?? '是') : (offLabel ?? '否')">
+    <CircleCheckFilled v-if="value" />
+    <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="512" cy="512" r="384" fill="none" stroke="currentColor" stroke-width="80" />
+    </svg>
+  </el-icon>
+</template>
+
+<style scoped>
+.ys-bool-mark {
+  vertical-align: middle;
+}
+.ys-bool-mark.is-yes {
+  color: #5bb07a;
+}
+.ys-bool-mark.is-no {
+  color: #e6e9f0;
+}
+</style>

package/src/components/YsCrudTable.vue

@@ -6,6 +6,7 @@ import { computed, ref, watch } from "vue";
 import { FIELD_SPECS, ENUM_META } from "@ysgroup/contracts";
 import { enumLabel } from "../tokens-runtime";
 import { columnWidth as lookupColumnWidth } from "../columnWidths";
+import YsBoolMark from "./YsBoolMark.vue";
 import YsFormDialog from "./YsFormDialog.vue";
 import YsRowActionMenu from "./YsRowActionMenu.vue";
 import YsTableToolbar from "./YsTableToolbar.vue";
@@ -86,9 +87,17 @@ const paged = computed(() => {
   return filtered.value.slice(start, start + pageSize.value);
 });
 
+function switchLabels(field: FieldSpec): { on: string; off: string } {
+  if (field.key === "enabled") return { on: "启用", off: "停用" };
+  return { on: "是", off: "否" };
+}
+
 function display(row: Record<string, unknown>, f: FieldSpec): string {
   const v = props.rowDisplay ? props.rowDisplay(row, f.key, row[f.key]) : row[f.key];
-  if (f.widget === "switch") return v ? "是" : "否";
+  if (f.widget === "switch") {
+    const labels = switchLabels(f);
+    return v ? labels.on : labels.off;
+  }
   if (f.widget === "enum" && f.enum && ENUM_META[f.enum as keyof typeof ENUM_META]) {
     return enumLabel(f.enum as keyof typeof ENUM_META, String(v ?? ""));
   }
@@ -131,8 +140,18 @@ function onSubmit(payload: Record<string, unknown>) {
     </YsTableToolbar>
 
     <el-table :fit="false" :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>
-        <template #default="{ row }">{{ display(row, c) }}</template>
+      <el-table-column
+        v-for="c in displayColumns"
+        :key="c.key"
+        :label="c.title"
+        :width="columnWidth(c)"
+        :show-overflow-tooltip="c.widget !== 'switch'"
+        :align="c.widget === 'switch' ? 'center' : undefined"
+      >
+        <template #default="{ row }">
+          <YsBoolMark v-if="c.widget === 'switch'" :value="row[c.key]" :on-label="switchLabels(c).on" :off-label="switchLabels(c).off" />
+          <slot v-else name="cell" :row="row" :column="c" :text="display(row, c)">{{ display(row, c) }}</slot>
+        </template>
       </el-table-column>
       <el-table-column v-if="!readonly" label="操作栏" :width="actionWidth ?? 76" fixed="right" align="center">
         <template #default="{ row }">

package/src/components/YsFormDialog.vue

@@ -176,6 +176,29 @@ function submit() {
           type="textarea"
           :rows="3"
         />
+        <el-date-picker
+          v-else-if="f.widget === 'datetime'"
+          v-model="form[f.key] as string"
+          type="datetime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          format="YYYY-MM-DD HH:mm:ss"
+          style="width: 100%"
+        />
+        <el-date-picker
+          v-else-if="f.widget === 'date'"
+          v-model="form[f.key] as string"
+          type="date"
+          value-format="YYYY-MM-DD"
+          format="YYYY-MM-DD"
+          style="width: 100%"
+        />
+        <el-time-picker
+          v-else-if="f.widget === 'time'"
+          v-model="form[f.key] as string"
+          value-format="HH:mm:ss"
+          format="HH:mm:ss"
+          style="width: 100%"
+        />
         <el-input v-else v-model="form[f.key] as string" />
       </el-form-item>
     </el-form>

package/src/index.ts

@@ -12,5 +12,6 @@ export { default as YsLoginPage } from "./components/YsLoginPage.vue";
 export { default as YsSettingsCenterDialog } from "./components/YsSettingsCenterDialog.vue";
 export { default as YsPortalGrid } from "./components/YsPortalGrid.vue";
 export { default as YsRoleTag } from "./components/YsRoleTag.vue";
+export { default as YsBoolMark } from "./components/YsBoolMark.vue";
 export { enumOptions, enumLabel, type EnumOption } from "./tokens-runtime";
 export { registerColumnWidths, columnWidth, type ColumnWidthMap } from "./columnWidths";