@ysgroup/ui 0.1.26 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.26",
+  "version": "0.1.29",
   "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/components/YsLoginPage.vue

@@ -1,25 +1,25 @@
-<!-- YsLoginPage —— 统一登录页。密码经 TLS 直传（不再前端 md5）。 -->
+<!-- YsLoginPage —— 统一登录页。口令由 @ysgroup/core 密封后提交。 -->
 <script setup lang="ts">
 import { ref } from "vue";
 
-const props = defineProps<{
+defineProps<{
   appTitle: string;
   hint?: string;
   logoUrl?: string;
   error?: string;
-  otpEnabled?: boolean;
 }>();
-const emit = defineEmits<{ login: [username: string, password: string, otp: string] }>();
+const emit = defineEmits<{
+  login: [username: string, password: string];
+}>();
 
 const username = ref("");
 const password = ref("");
-const otp = ref("");
 const loading = ref(false);
 
 async function submit() {
   loading.value = true;
   try {
-    emit("login", username.value, password.value, otp.value);
+    emit("login", username.value, password.value);
   } finally {
     loading.value = false;
   }
@@ -34,7 +34,12 @@ async function submit() {
       <h2 v-else class="ys-login__title">{{ appTitle }}</h2>
       <el-form @submit.prevent="submit">
         <el-form-item>
-          <el-input v-model="username" placeholder="用户名" size="large" @keyup.enter="submit" />
+          <el-input
+            v-model="username"
+            placeholder="用户名"
+            size="large"
+            @keyup.enter="submit"
+          />
         </el-form-item>
         <el-form-item>
           <el-input
@@ -46,17 +51,13 @@ async function submit() {
             @keyup.enter="submit"
           />
         </el-form-item>
-        <el-form-item v-if="props.otpEnabled && username.trim().toLowerCase() === 'root'">
-          <el-input
-            v-model="otp"
-            inputmode="numeric"
-            autocomplete="one-time-code"
-            placeholder="动态验证码"
-            size="large"
-            @keyup.enter="submit"
-          />
-        </el-form-item>
-        <el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
+        <el-alert
+          v-if="error"
+          :title="error"
+          type="error"
+          :closable="false"
+          show-icon
+        />
         <el-button
           type="primary"
           size="large"

package/src/components/YsSegmented.vue

@@ -0,0 +1,3 @@
+<template>
+  <el-segmented class="ys-segmented" />
+</template>

package/src/index.ts

@@ -12,5 +12,7 @@ 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 { default as YsSegmented } from "./components/YsSegmented.vue";
 export { enumOptions, enumLabel, type EnumOption } from "./tokens-runtime";
 export { registerColumnWidths, columnWidth, type ColumnWidthMap } from "./columnWidths";