@ysgroup/ui 0.1.25 → 0.1.27

package/package.json

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

package/src/columnWidths.ts

@@ -0,0 +1,25 @@
+/** 各业务仓在启动时注册本系统表格列宽；查找只认 table.field，缺键告警并回退 140。 */
+
+export type ColumnWidthMap = Record<string, Record<string, number>>;
+
+const MISSING_WIDTH = 140;
+let widths: ColumnWidthMap = {};
+const warned = new Set<string>();
+
+export function registerColumnWidths(map: ColumnWidthMap): void {
+  widths = map;
+  warned.clear();
+}
+
+export function columnWidth(table: string, field: string): number {
+  const width = widths[table]?.[field];
+  if (width == null) {
+    const key = `${table}.${field}`;
+    if (!warned.has(key)) {
+      warned.add(key);
+      console.warn(`[columnWidths] missing ${key}`);
+    }
+    return MISSING_WIDTH;
+  }
+  return width;
+}

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

@@ -5,6 +5,8 @@
 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";
@@ -17,39 +19,6 @@ interface FieldSpec {
   sensitivity: string;
 }
 
-const COLUMN_WIDTHS: Record<string, number> = {
-  enabled: 54,
-  auto_trade: 72,
-  cname: 120,
-  account: 112,
-  type: 110,
-  trade_env: 72,
-  owner_id: 120,
-  team_id: 120,
-  broker_id: 120,
-  bank_card_id: 150,
-  fee_rate: 76,
-  commission_refund: 84,
-  positions_refund: 84,
-  interest: 72,
-  cfmmc_username: 120,
-  futures_app_id: 120,
-  futures_auth_code: 130,
-  name: 140,
-  full_name: 200,
-  code: 110,
-  memo: 180,
-  phone: 120,
-  email: 180,
-  role: 90,
-  status: 80,
-  max_sessions: 80,
-};
-
-function columnWidth(field: FieldSpec): number {
-  return COLUMN_WIDTHS[field.key] ?? (field.widget === "switch" ? 64 : field.widget === "enum" ? 100 : 140);
-}
-
 const props = defineProps<{
   table: string;
   rows: Record<string, unknown>[];
@@ -79,6 +48,10 @@ const editing = ref<Record<string, unknown> | null>(null);
 const currentPage = ref(1);
 const pageSize = ref(20);
 
+function columnWidth(field: FieldSpec): number {
+  return lookupColumnWidth(props.table, field.key);
+}
+
 const allSpecs = computed<FieldSpec[]>(() => (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? []);
 
 const displayColumns = computed<FieldSpec[]>(() => {
@@ -114,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 ?? ""));
   }
@@ -159,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,4 +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";