@ysgroup/ui 0.1.0

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ysgroup/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@ysgroup/contracts": "0.1.1",
+    "@ysgroup/theme": "0.1.0"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.9",
+    "vue": ">=3.5"
+  },
+  "license": "MIT",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/YsCrudTable.vue

@@ -0,0 +1,194 @@
+<!-- YsCrudTable —— 只读表格 + 行"编辑"按钮呼出 YsFormDialog。
+  规范：表格上不挂载任何行内编辑组件（体验与性能）。 -->
+<script setup lang="ts">
+import { computed, ref } 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";
+
+interface FieldSpec {
+  key: string;
+  title: string;
+  widget: string;
+  enum: string | null;
+  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,
+  traded_br: 72,
+  traded_xt: 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>[];
+  /** 表格展示的列（默认取契约 public 字段前若干个） */
+  columns?: string[];
+  /** 隐藏在编辑弹窗中的字段 */
+  hiddenInForm?: string[];
+  loading?: boolean;
+  readonly?: boolean;
+  createLabel?: string;
+  rowDisplay?: (row: Record<string, unknown>, field: string, value: unknown) => unknown;
+  saving?: boolean;
+  externalEditor?: boolean;
+}>();
+
+const emit = defineEmits<{
+  save: [payload: Record<string, unknown>, finish: (success: boolean) => void];
+  remove: [row: Record<string, unknown>];
+  create: [];
+  edit: [row: Record<string, unknown>];
+}>();
+
+const keyword = ref("");
+const dialogOpen = ref(false);
+const editing = ref<Record<string, unknown> | null>(null);
+
+const allSpecs = computed<FieldSpec[]>(
+  () => (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? [],
+);
+
+const displayColumns = computed<FieldSpec[]>(() => {
+  if (props.columns?.length) {
+    const map = new Map(allSpecs.value.map((f) => [f.key, f]));
+    return props.columns.map((k) => map.get(k)).filter(Boolean) as FieldSpec[];
+  }
+  // 默认：public 字段前 6 个（restricted/credential 不在列表直接展示）
+  return allSpecs.value.filter((f) => f.sensitivity === "public").slice(0, 6);
+});
+
+const filtered = computed(() => {
+  const kw = keyword.value.trim().toLowerCase();
+  if (!kw) return props.rows;
+  return props.rows.filter((r) =>
+    displayColumns.value.some((c) =>
+      String(r[c.key] ?? "").toLowerCase().includes(kw),
+    ),
+  );
+});
+
+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 === "enum" && f.enum && ENUM_META[f.enum as keyof typeof ENUM_META]) {
+    return enumLabel(f.enum as keyof typeof ENUM_META, String(v ?? ""));
+  }
+  if (Array.isArray(v)) return v.join(", ");
+  return String(v ?? "");
+}
+
+function onCreate() {
+  if (props.externalEditor) {
+    emit("create");
+    return;
+  }
+  editing.value = null;
+  dialogOpen.value = true;
+}
+function onEdit(row: Record<string, unknown>) {
+  if (props.externalEditor) {
+    emit("edit", row);
+    return;
+  }
+  editing.value = { ...row };
+  dialogOpen.value = true;
+}
+async function onRemove(row: Record<string, unknown>) {
+  emit("remove", row);
+}
+function onSubmit(payload: Record<string, unknown>) {
+  emit("save", payload, (success) => {
+    if (success) dialogOpen.value = false;
+  });
+}
+</script>
+
+<template>
+  <div class="ys-crud">
+    <div class="ys-crud__toolbar">
+      <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="filtered" 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>
+      <el-table-column v-if="!readonly" label="操作" width="260">
+        <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>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <YsFormDialog
+      v-if="!externalEditor"
+      v-model="dialogOpen"
+      :table="table"
+      :record="editing"
+      :hidden="hiddenInForm"
+      :saving="saving"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ys-crud__toolbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.ys-crud__spacer {
+  flex: 1;
+}
+</style>

package/src/components/YsFormDialog.vue

@@ -0,0 +1,187 @@
+<!-- YsFormDialog —— 由契约 FIELD_SPECS 自动生成的编辑弹窗。
+     全平台统一"弹窗编辑"规范的落地组件：表格只读，编辑一律经此弹窗。 -->
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { FIELD_SPECS, ENUM_META } from "@ysgroup/contracts";
+import { enumOptions } from "../tokens-runtime";
+
+interface FieldSpec {
+  key: string;
+  title: string;
+  widget: string;
+  enum: string | null;
+  required: boolean;
+  sensitivity: string;
+}
+
+const props = defineProps<{
+  modelValue: boolean;
+  table: string;
+  record?: Record<string, unknown> | null;
+  title?: string;
+  /** 隐藏的字段（如外键由上下文决定，不在弹窗手填） */
+  hidden?: string[];
+  saving?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  submit: [payload: Record<string, unknown>];
+}>();
+
+const form = ref<Record<string, unknown>>({});
+const invalidJson = ref<Set<string>>(new Set());
+
+const specs = computed<FieldSpec[]>(() => {
+  const all = (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? [];
+  const hidden = new Set(props.hidden ?? []);
+  // 凭据与密码哈希必须走专用安全操作，绝不进入通用编辑表单。
+  return all.filter(
+    (f) => f.sensitivity !== "credential" && f.key !== "password_hash" && !hidden.has(f.key),
+  );
+});
+
+const isEdit = computed(() => !!props.record?._id);
+const dialogTitle = computed(
+  () => props.title ?? `${isEdit.value ? "编辑" : "新建"} ${props.table}`,
+);
+
+watch(
+  () => [props.modelValue, props.record],
+  ([open]) => {
+    if (!open) return;
+    invalidJson.value = new Set();
+    const base: Record<string, unknown> = {};
+    for (const f of specs.value) {
+      base[f.key] = props.record?.[f.key] ?? defaultFor(f);
+    }
+    if (props.record?._id) base._id = props.record._id;
+    form.value = base;
+  },
+  { immediate: true },
+);
+
+function defaultFor(f: FieldSpec): unknown {
+  if (f.widget === "switch") return false;
+  if (f.widget === "number") return 0;
+  if (f.widget === "tags" || f.widget === "enum-multi") return [];
+  if (f.widget === "json") return {};
+  return "";
+}
+
+function optionsOf(f: FieldSpec) {
+  return f.enum && ENUM_META[f.enum as keyof typeof ENUM_META]
+    ? enumOptions(f.enum as keyof typeof ENUM_META)
+    : [];
+}
+
+function jsonText(key: string) {
+  return computed({
+    get: () => JSON.stringify(form.value[key] ?? {}, null, 2),
+    set: (v: string) => {
+      try {
+        form.value[key] = JSON.parse(v);
+        invalidJson.value.delete(key);
+        invalidJson.value = new Set(invalidJson.value);
+      } catch {
+        invalidJson.value.add(key);
+        invalidJson.value = new Set(invalidJson.value);
+      }
+    },
+  });
+}
+
+function close() {
+  emit("update:modelValue", false);
+}
+
+function submit() {
+  const missing = specs.value.filter((f) => f.required && (
+    form.value[f.key] === "" || form.value[f.key] === null || form.value[f.key] === undefined
+    || (Array.isArray(form.value[f.key]) && !(form.value[f.key] as unknown[]).length)
+  ));
+  if (missing.length) {
+    ElMessage.warning(`请填写：${missing.map((f) => f.title).join("、")}`);
+    return;
+  }
+  if (invalidJson.value.size) {
+    const titles = specs.value.filter((f) => invalidJson.value.has(f.key)).map((f) => f.title);
+    ElMessage.warning(`JSON 格式错误：${titles.join("、")}`);
+    return;
+  }
+  emit("submit", { ...form.value });
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="dialogTitle"
+    width="640px"
+    @update:model-value="close"
+  >
+    <el-form label-width="150px" label-position="right">
+      <el-form-item
+        v-for="f in specs"
+        :key="f.key"
+        :label="f.title"
+        :required="f.required"
+      >
+        <el-switch v-if="f.widget === 'switch'" v-model="form[f.key] as boolean" />
+        <el-input-number
+          v-else-if="f.widget === 'number'"
+          v-model="form[f.key] as number"
+          :controls="false"
+          style="width: 100%"
+        />
+        <el-select
+          v-else-if="f.widget === 'enum'"
+          v-model="form[f.key] as string"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="o in optionsOf(f)"
+            :key="o.value"
+            :label="o.label"
+            :value="o.value"
+          />
+        </el-select>
+        <el-select
+          v-else-if="f.widget === 'enum-multi'"
+          v-model="form[f.key] as string[]"
+          multiple
+          style="width: 100%"
+        >
+          <el-option
+            v-for="o in optionsOf(f)"
+            :key="o.value"
+            :label="o.label"
+            :value="o.value"
+          />
+        </el-select>
+        <el-select
+          v-else-if="f.widget === 'tags'"
+          v-model="form[f.key] as string[]"
+          multiple
+          filterable
+          allow-create
+          default-first-option
+          :reserve-keyword="false"
+          style="width: 100%"
+        />
+        <el-input
+          v-else-if="f.widget === 'json'"
+          v-model="jsonText(f.key).value"
+          type="textarea"
+          :rows="3"
+        />
+        <el-input v-else v-model="form[f.key] as string" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="submit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>

package/src/components/YsLoginPage.vue

@@ -0,0 +1,108 @@
+<!-- YsLoginPage —— 统一登录页。密码经 TLS 直传（不再前端 md5）。 -->
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{
+  appTitle: string;
+  hint?: string;
+  logoUrl?: string;
+  error?: string;
+  otpEnabled?: boolean;
+}>();
+const emit = defineEmits<{ login: [username: string, password: string, otp: 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);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="ys-login">
+    <div class="ys-login__card">
+      <img v-if="logoUrl" :src="logoUrl" class="ys-login__logo" alt="logo" />
+      <p v-if="hint" class="ys-login__hint">{{ hint }}</p>
+      <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-form-item>
+        <el-form-item>
+          <el-input
+            v-model="password"
+            type="password"
+            placeholder="密码"
+            size="large"
+            show-password
+            @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-button
+          type="primary"
+          size="large"
+          :loading="loading"
+          style="width: 100%; margin-top: 8px"
+          @click="submit"
+        >
+          登录
+        </el-button>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ys-login {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ys-color-bg);
+}
+.ys-login__card {
+  width: 360px;
+  padding: 40px 32px;
+  background: var(--ys-color-bg-elevated);
+  border: 1px solid var(--ys-color-border);
+  border-radius: var(--ys-radius-m);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  text-align: center;
+}
+.ys-login__logo {
+  width: 68px;
+  height: 68px;
+  object-fit: contain;
+  margin-bottom: 16px;
+}
+.ys-login__title {
+  margin: 0 0 24px;
+  color: var(--ys-color-text-1);
+  font-weight: 600;
+}
+.ys-login__hint {
+  margin: 0 0 24px;
+  color: var(--ys-color-text-1);
+  font-size: 18px;
+  font-weight: 600;
+}
+</style>

package/src/components/YsPageLayout.vue

@@ -0,0 +1,161 @@
+<!-- YsPageLayout —— 统一布局骨架：顶栏(logo/app名/用户/明暗切换) + 侧栏 + 内容。 -->
+<script setup lang="ts">
+import { ref } from "vue";
+import { applyTheme, currentMode, type ThemeMode } from "@ysgroup/theme";
+
+defineProps<{
+  appTitle: string;
+  logoUrl?: string;
+  username?: string;
+  menus?: { key: string; title: string; icon?: string }[];
+  active?: string;
+}>();
+
+const emit = defineEmits<{ navigate: [key: string]; settings: []; logout: [] }>();
+
+const mode = ref<ThemeMode>(currentMode());
+function toggleTheme() {
+  const current = document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+  mode.value = current === "dark" ? "light" : "dark";
+  applyTheme(mode.value);
+}
+
+function handleUserCommand(command: string) {
+  if (command === "settings") emit("settings");
+  if (command === "logout") emit("logout");
+}
+</script>
+
+<template>
+  <div class="ys-layout">
+    <header class="ys-layout__top">
+      <div class="ys-layout__brand">
+        <img v-if="logoUrl" :src="logoUrl" class="ys-layout__logo" alt="logo" />
+        <span class="ys-layout__title">{{ appTitle }}</span>
+      </div>
+      <div class="ys-layout__spacer" />
+      <el-button
+        class="ys-layout__theme-toggle"
+        circle
+        aria-label="切换明暗模式"
+        @click="toggleTheme"
+      >
+        <span class="ys-layout__theme-icon">{{ mode === "dark" ? "☾" : "☀" }}</span>
+      </el-button>
+      <el-dropdown v-if="username" @command="handleUserCommand">
+        <span class="ys-layout__user">{{ username }}</span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="settings">设置中心</el-dropdown-item>
+            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </header>
+    <div class="ys-layout__body">
+      <aside v-if="menus?.length" class="ys-layout__side">
+        <div
+          v-for="m in menus"
+          :key="m.key"
+          class="ys-layout__menu"
+          :class="{ 'is-active': m.key === active }"
+          @click="emit('navigate', m.key)"
+        >
+          {{ m.title }}
+        </div>
+      </aside>
+      <main class="ys-layout__content">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ys-layout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.ys-layout__top {
+  height: 52px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 8px;
+  background: var(--ys-color-bg-elevated);
+  border-bottom: 1px solid var(--ys-color-border);
+}
+.ys-layout__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ys-layout__logo {
+  width: 30px;
+  height: 26px;
+  object-fit: contain;
+}
+.ys-layout__title {
+  font-weight: 600;
+  color: var(--ys-color-text-1);
+}
+.ys-layout__spacer {
+  flex: 1;
+}
+.ys-layout__theme-toggle {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--ys-color-border);
+  background: var(--ys-color-bg-elevated);
+  color: var(--ys-color-text-2);
+}
+.ys-layout__theme-toggle:hover,
+.ys-layout__theme-toggle:focus-visible {
+  border-color: var(--ys-color-primary);
+  background: var(--ys-color-bg-hover);
+  color: var(--ys-color-primary);
+}
+.ys-layout__theme-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+.ys-layout__user {
+  cursor: pointer;
+  color: var(--ys-color-text-2);
+  padding: 0 8px;
+}
+.ys-layout__body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+.ys-layout__side {
+  width: 200px;
+  background: var(--ys-color-bg-elevated);
+  border-right: 1px solid var(--ys-color-border);
+  padding: 8px;
+  overflow-y: auto;
+}
+.ys-layout__menu {
+  padding: 9px 14px;
+  border-radius: var(--ys-radius-m);
+  cursor: pointer;
+  color: var(--ys-color-text-2);
+  font-size: 13px;
+}
+.ys-layout__menu:hover {
+  background: var(--ys-color-bg-hover);
+}
+.ys-layout__menu.is-active {
+  background: var(--ys-color-primary);
+  color: #fff;
+}
+.ys-layout__content {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+  background: var(--ys-color-bg);
+}
+</style>

package/src/components/YsPortalGrid.vue

@@ -0,0 +1,102 @@
+<!-- YsPortalGrid —— 门户应用九宫格。点击经一次性 code 单点登录跳转。 -->
+<script setup lang="ts">
+interface AppCard {
+  name: string;
+  title: string;
+  logo_url?: string;
+  kind: string;
+  status: string;
+  online: boolean;
+  port: number;
+  host?: string;
+  website_url?: string;
+}
+
+defineProps<{ apps: AppCard[] }>();
+const emit = defineEmits<{ open: [app: AppCard] }>();
+</script>
+
+<template>
+  <div class="ys-portal">
+    <div
+      v-for="app in apps"
+      :key="app.name"
+      class="ys-portal__card"
+      :class="{ 'is-offline': app.kind === 'service' && !app.online, 'is-maint': app.status === 'maintenance' }"
+      @click="emit('open', app)"
+    >
+      <img v-if="app.logo_url" :src="app.logo_url" class="ys-portal__logo" alt="" />
+      <div v-else class="ys-portal__logo ys-portal__logo--ph">{{ app.title.slice(0, 1) }}</div>
+      <div class="ys-portal__name">{{ app.title || app.name }}</div>
+      <div class="ys-portal__meta">
+        <span v-if="app.kind === 'service'" class="ys-portal__dot" :class="app.online ? 'on' : 'off'" />
+        <span v-if="app.status === 'maintenance'">维护中</span>
+        <span v-else-if="app.kind === 'link'">外链</span>
+        <span v-else>{{ app.online ? "在线" : "离线" }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ys-portal {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 16px;
+}
+.ys-portal__card {
+  background: var(--ys-color-bg-elevated);
+  border: 1px solid var(--ys-color-border);
+  border-radius: var(--ys-radius-m);
+  padding: 20px 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.12s, box-shadow 0.12s;
+}
+.ys-portal__card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+}
+.ys-portal__card.is-offline {
+  opacity: 0.55;
+}
+.ys-portal__logo {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--ys-radius-m);
+  object-fit: cover;
+  margin: 0 auto 10px;
+}
+.ys-portal__logo--ph {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ys-color-primary);
+  color: #fff;
+  font-size: 22px;
+  font-weight: 600;
+}
+.ys-portal__name {
+  color: var(--ys-color-text-1);
+  font-size: 13px;
+  font-weight: 500;
+}
+.ys-portal__meta {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--ys-color-text-3);
+}
+.ys-portal__dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+.ys-portal__dot.on {
+  background: var(--ys-color-success);
+}
+.ys-portal__dot.off {
+  background: var(--ys-color-info);
+}
+</style>

package/src/components/YsSettingsCenterDialog.vue

@@ -0,0 +1,135 @@
+<!-- YsSettingsCenterDialog —— 统一设置中心；Root 仅展示说明，不提供密码修改入口。 -->
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+
+const props = defineProps<{
+  modelValue: boolean;
+  role?: string;
+  username?: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  changePassword: [currentPassword: string, newPassword: string];
+}>();
+
+const active = ref("security");
+const form = reactive({ current: "", next: "", confirm: "" });
+const error = ref("");
+const submitting = ref(false);
+
+const canChangePassword = computed(
+  () => props.role !== "Root" && props.username?.trim().toLowerCase() !== "root",
+);
+
+function reset() {
+  form.current = "";
+  form.next = "";
+  form.confirm = "";
+  error.value = "";
+  submitting.value = false;
+}
+
+watch(() => props.modelValue, (open) => {
+  if (!open) reset();
+});
+
+function close() {
+  if (submitting.value) return;
+  emit("update:modelValue", false);
+}
+
+async function submit() {
+  error.value = "";
+  if (!form.current || !form.next || !form.confirm) {
+    error.value = "请完整填写密码信息";
+    return;
+  }
+  if (form.next !== form.confirm) {
+    error.value = "两次新密码不一致";
+    return;
+  }
+  if (form.current === form.next) {
+    error.value = "新密码不能与当前密码相同";
+    return;
+  }
+  submitting.value = true;
+  emit("changePassword", form.current, form.next);
+}
+
+defineExpose({
+  finish(errorMessage = "") {
+    submitting.value = false;
+    error.value = errorMessage;
+    if (!errorMessage) close();
+  },
+});
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="设置中心"
+    width="560px"
+    destroy-on-close
+    :close-on-click-modal="!submitting"
+    :close-on-press-escape="!submitting"
+    :show-close="!submitting"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <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>
+          <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" />
+            </el-form-item>
+            <el-form-item label="新密码" required>
+              <el-input v-model="form.next" type="password" show-password autocomplete="new-password" />
+            </el-form-item>
+            <el-form-item label="确认新密码" required>
+              <el-input v-model="form.confirm" type="password" show-password autocomplete="new-password" />
+            </el-form-item>
+          </el-form>
+          <el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
+        </template>
+        <el-empty v-else description="Root 登录密码由平台安全配置维护，不允许在设置中心修改" :image-size="72" />
+      </el-tab-pane>
+      <el-tab-pane v-if="role === 'Manager' && $slots.managerActions" label="前端管理" name="manager-actions">
+        <slot name="managerActions" />
+      </el-tab-pane>
+    </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>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.ys-settings {
+  min-height: 300px;
+}
+.ys-settings__title {
+  margin: 0 0 14px;
+  color: var(--ys-color-text-1);
+}
+.ys-settings__notice {
+  margin-bottom: 18px;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,11 @@
+/* @ysgroup/ui —— 平台组件库（基于 Element Plus 封装，令牌来自 @ysgroup/theme）。 */
+
+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 YsLoginPage } from "./components/YsLoginPage.vue";
+export { default as YsSettingsCenterDialog } from "./components/YsSettingsCenterDialog.vue";
+export { default as YsPortalGrid } from "./components/YsPortalGrid.vue";
+export { enumOptions, enumLabel, type EnumOption } from "./tokens-runtime";
+
+export const YS_UI_VERSION = "0.1.0";

package/src/tokens-runtime.ts

@@ -0,0 +1,22 @@
+/* 运行时工具：明暗切换 + 契约枚举元数据访问（供组件消费）。 */
+import { ENUM_META } from "@ysgroup/contracts";
+
+export interface EnumOption {
+  value: string;
+  label: string;
+  sort: number;
+}
+
+/** 读取契约枚举的选项列表（含中文名与排序），驱动 YsEnumSelect / 表单。 */
+export function enumOptions(enumName: keyof typeof ENUM_META): EnumOption[] {
+  const meta = ENUM_META[enumName] as Record<string, { name?: string; sort?: number }>;
+  if (!meta) return [];
+  return Object.entries(meta)
+    .map(([value, m]) => ({ value, label: m.name ?? value, sort: m.sort ?? 0 }))
+    .sort((a, b) => a.sort - b.sort);
+}
+
+export function enumLabel(enumName: keyof typeof ENUM_META, value: string): string {
+  const meta = ENUM_META[enumName] as Record<string, { name?: string }> | undefined;
+  return meta?.[value]?.name ?? value;
+}