@ysgroup/ui 0.1.8 → 0.1.9

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@ysgroup/contracts": "^0.1.1",
     "@ysgroup/theme": "^0.1.0"
   },

package/src/components/YsCrudTable.vue

@@ -3,10 +3,10 @@
   超过 20 条自动显示分页器（20 / 50 / 100 档，默认每页 20 条）。 -->
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { ElMessageBox } from "element-plus";
 import { FIELD_SPECS, ENUM_META } from "@ysgroup/contracts";
 import { enumLabel } from "../tokens-runtime";
 import YsFormDialog from "./YsFormDialog.vue";
+import YsRowActionMenu from "./YsRowActionMenu.vue";
 
 interface FieldSpec {
   key: string;
@@ -172,13 +172,17 @@ function onSubmit(payload: Record<string, unknown>) {
       <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="actionWidth ?? 260" fixed="right">
+      <el-table-column v-if="!readonly" label="操作栏" :width="actionWidth ?? 76" fixed="right" align="center">
         <template #default="{ row }">
-          <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>
+          <YsRowActionMenu
+            :actions="[
+              { key: 'edit', label: '编辑', tone: 'primary' },
+              { key: 'delete', label: '删除', tone: 'danger', divided: true },
+            ]"
+            @action="$event === 'edit' ? onEdit(row) : onRemove(row)"
+          >
+            <template #extra="{ close }"><slot name="row-actions" :row="row" :close="close" /></template>
+          </YsRowActionMenu>
         </template>
       </el-table-column>
     </el-table>
@@ -211,13 +215,4 @@ 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

@@ -37,7 +37,7 @@ defineProps<{
   color: var(--ys-color-primary);
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: .08em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 .ys-page-header h1 {
@@ -77,4 +77,4 @@ defineProps<{
     flex-wrap: wrap;
   }
 }
-</style>
+</style>

package/src/components/YsRowActionMenu.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Setting } from "@element-plus/icons-vue";
+
+export interface YsRowAction {
+  key: string;
+  label: string;
+  tone?: "primary" | "accent" | "warning" | "success" | "neutral" | "danger";
+  disabled?: boolean;
+  divided?: boolean;
+}
+
+defineProps<{ actions: YsRowAction[]; ariaLabel?: string }>();
+const emit = defineEmits<{ action: [key: string] }>();
+const visible = ref(false);
+
+function select(action: YsRowAction) {
+  if (action.disabled) return;
+  visible.value = false;
+  emit("action", action.key);
+}
+</script>
+
+<template>
+  <el-popover
+    :visible="visible"
+    placement="right"
+    :fallback-placements="['right']"
+    :width="150"
+    :offset="12"
+    trigger="click"
+    popper-class="ys-action-popover"
+    @update:visible="visible = $event"
+  >
+    <template #reference
+      ><button class="ys-row-action__trigger" type="button" :aria-label="ariaLabel || '操作'">
+        <el-icon :size="17"><Setting /></el-icon></button
+    ></template>
+    <nav class="ys-row-action__menu" :aria-label="ariaLabel || '操作菜单'">
+      <template v-for="action in actions.filter((item) => !item.divided)" :key="action.key">
+        <button class="ys-row-action__item" :class="`is-${action.tone || 'neutral'}`" type="button" :disabled="action.disabled" @click="select(action)">{{ action.label }}</button>
+      </template>
+      <slot name="extra" :close="() => (visible = false)" />
+      <template v-for="action in actions.filter((item) => item.divided)" :key="action.key">
+        <div class="ys-row-action__divider" />
+        <button class="ys-row-action__item" :class="`is-${action.tone || 'neutral'}`" type="button" :disabled="action.disabled" @click="select(action)">{{ action.label }}</button>
+      </template>
+    </nav>
+  </el-popover>
+</template>
+
+<style scoped>
+.ys-row-action__trigger {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: var(--el-component-size-small);
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ys-color-text-3);
+  line-height: 1;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.ys-row-action__trigger:hover,
+.ys-row-action__trigger:focus-visible {
+  outline: none;
+  color: var(--ys-color-primary);
+  background: color-mix(in srgb, var(--ys-color-primary) 9%, transparent);
+}
+.ys-row-action__menu {
+  display: grid;
+  gap: 3px;
+}
+.ys-row-action__item {
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--ys-color-text-2);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+.ys-row-action__item:hover,
+.ys-row-action__item:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--item-color) 10%, transparent);
+  color: var(--item-color);
+}
+.ys-row-action__item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ys-row-action__item.is-primary {
+  --item-color: var(--ys-color-primary);
+}
+.ys-row-action__item.is-accent {
+  --item-color: #0f8f83;
+}
+.ys-row-action__item.is-warning {
+  --item-color: #b7791f;
+}
+.ys-row-action__item.is-success {
+  --item-color: var(--ys-color-success);
+}
+.ys-row-action__item.is-neutral {
+  --item-color: #58677f;
+}
+.ys-row-action__item.is-danger {
+  --item-color: var(--ys-color-danger);
+  color: var(--ys-color-danger);
+}
+.ys-row-action__menu :deep(.ys-row-action-menu__item) {
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--item-color, var(--ys-color-text-2));
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: left;
+  cursor: pointer;
+}
+.ys-row-action__divider {
+  height: 1px;
+  margin: 3px 4px;
+  background: var(--ys-color-border);
+}
+:global(.ys-action-popover.el-popover.el-popper) {
+  padding: 7px;
+  border-color: color-mix(in srgb, var(--ys-color-primary) 18%, var(--ys-color-border));
+  border-radius: 7px;
+  box-shadow:
+    0 10px 28px color-mix(in srgb, #0f172a 16%, transparent),
+    0 2px 6px color-mix(in srgb, #0f172a 8%, transparent);
+}
+</style>

package/src/components/YsSettingsCenterDialog.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   modelValue: boolean;
   role?: string;
   username?: string;
+  passwordManagementUrl?: string;
 }>();
 
 const emit = defineEmits<{
@@ -18,9 +19,7 @@ const form = reactive({ current: "", next: "", confirm: "" });
 const error = ref("");
 const submitting = ref(false);
 
-const canChangePassword = computed(
-  () => props.role !== "Root" && props.username?.trim().toLowerCase() !== "root",
-);
+const canChangePassword = computed(() => props.role !== "Root" && props.username?.trim().toLowerCase() !== "root");
 
 function reset() {
   form.current = "";
@@ -30,9 +29,12 @@ function reset() {
   submitting.value = false;
 }
 
-watch(() => props.modelValue, (open) => {
-  if (!open) reset();
-});
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) reset();
+  },
+);
 
 function close() {
   if (submitting.value) return;
@@ -79,15 +81,20 @@ defineExpose({
   >
     <el-tabs v-model="active" tab-position="left" class="ys-settings">
       <el-tab-pane label="账号安全" name="security">
-        <template v-if="canChangePassword">
-          <h3 class="ys-settings__title">修改登录密码</h3>
+        <template v-if="canChangePassword && passwordManagementUrl">
+          <h3 class="ys-settings__title">登录密码管理</h3>
           <el-alert
-            title="修改成功后，当前账号的所有登录会话都会退出，请使用新密码重新登录。"
+            title="登录密码由Auth统一认证中心管理。修改密码后，当前账号在所有业务系统中的登录会话都将失效，需要使用新密码重新登录。"
             type="info"
             :closable="false"
             show-icon
             class="ys-settings__notice"
           />
+          <el-button tag="a" type="primary" :href="passwordManagementUrl" target="_blank" rel="noopener noreferrer"> 前往 Auth系统 修改密码 </el-button>
+        </template>
+        <template v-else-if="canChangePassword">
+          <h3 class="ys-settings__title">修改登录密码</h3>
+          <el-alert title="修改成功后，当前账号的所有登录会话都会退出，请使用新密码重新登录。" type="info" :closable="false" show-icon class="ys-settings__notice" />
           <el-form label-width="110px" @submit.prevent="submit">
             <el-form-item label="当前密码" required>
               <el-input v-model="form.current" type="password" show-password autocomplete="current-password" />
@@ -109,14 +116,7 @@ defineExpose({
     </el-tabs>
     <template #footer>
       <el-button @click="close">关闭</el-button>
-      <el-button
-        v-if="canChangePassword && active === 'security'"
-        type="primary"
-        :loading="submitting"
-        @click="submit"
-      >
-        修改并退出
-      </el-button>
+      <el-button v-if="canChangePassword && !passwordManagementUrl && active === 'security'" type="primary" :loading="submitting" @click="submit"> 修改并退出 </el-button>
     </template>
   </el-dialog>
 </template>

package/src/index.ts

@@ -1,6 +1,8 @@
 /* @ysgroup/ui —— 平台组件库（基于 Element Plus 封装，令牌来自 @ysgroup/theme）。 */
 
 export { default as YsCrudTable } from "./components/YsCrudTable.vue";
+export { default as YsRowActionMenu } from "./components/YsRowActionMenu.vue";
+export type { YsRowAction } from "./components/YsRowActionMenu.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";