@liujitcn/kratos-admin-core 0.0.28 → 0.0.31

package/dist/package/src/components/Mfa/MfaSetupPanel.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="uri" class="mfa-setup-panel">
+    <img v-if="qrDataUrl" class="mfa-setup-panel__qr" :src="qrDataUrl" :alt="t('core.login.mfa_setup_qr_alt')" />
+    <el-collapse class="mfa-setup-panel__uri">
+      <el-collapse-item :title="t('core.login.mfa_show_uri')" name="uri">
+        <div class="mfa-setup-panel__value">
+          <span class="mfa-setup-panel__text">{{ uri }}</span>
+          <el-tooltip :content="t('core.login.mfa_copy_uri')" placement="top">
+            <el-button text circle :aria-label="t('core.login.mfa_copy_uri')" @click.stop="copySetupUri">
+              <el-icon class="mfa-setup-panel__copy"><CopyDocument /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts" name="MfaSetupPanel">
+import { computed } from "vue";
+import qrcode from "qrcode-generator";
+import { useLocaleStore } from "../../locales";
+import { copyText } from "../../utils/clipboard";
+
+/** MFA TOTP 绑定面板属性。 */
+interface MfaSetupPanelProps {
+  /** TOTP 绑定地址。 */
+  uri: string;
+}
+
+const props = defineProps<MfaSetupPanelProps>();
+const { t } = useLocaleStore();
+
+const qrDataUrl = computed(() => {
+  if (!props.uri) return "";
+  const code = qrcode(0, "M");
+  code.addData(props.uri);
+  code.make();
+  return code.createDataURL(4, 8);
+});
+
+/** 复制 TOTP 绑定地址。 */
+async function copySetupUri() {
+  await copyText(props.uri);
+  ElMessage.success(t("core.login.mfa_uri_copied"));
+}
+</script>
+
+<style scoped lang="scss">
+.mfa-setup-panel__qr {
+  display: block;
+  width: 220px;
+  height: 220px;
+  margin: 12px auto;
+  image-rendering: pixelated;
+}
+
+.mfa-setup-panel__uri {
+  margin-top: 12px;
+}
+
+.mfa-setup-panel__value {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.mfa-setup-panel__text {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+.mfa-setup-panel__copy {
+  color: var(--el-color-primary);
+  font-size: 18px;
+}
+</style>

package/dist/package/src/components/ProForm/components/ProFormItem.vue

@@ -13,6 +13,8 @@
 
   <el-input-number v-else-if="field.component === 'input-number'" v-model="fieldValue" v-bind="fieldProps" />
 
+  <el-color-picker v-else-if="field.component === 'color-picker'" v-model="fieldValue" v-bind="fieldProps" />
+
   <el-segmented v-else-if="field.component === 'segmented'" v-model="fieldValue" :options="fieldOptions" v-bind="fieldProps" />
 
   <el-checkbox v-else-if="field.component === 'checkbox'" v-model="fieldValue" v-bind="fieldProps">
@@ -28,7 +30,12 @@
       :label="option.label"
       :value="option.value"
       :disabled="option.disabled"
-    />
+    >
+      <span class="pro-form-option">
+        <component :is="option.icon" v-if="option.icon" />
+        <span>{{ option.label }}</span>
+      </span>
+    </el-option>
   </el-select>
 
   <el-radio-group v-else-if="field.component === 'radio-group'" v-model="fieldValue" v-bind="fieldProps">
@@ -189,3 +196,11 @@ const multipleKvValue = computed({
   set: value => setFieldValue(value)
 });
 </script>
+
+<style scoped lang="scss">
+.pro-form-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>

package/dist/package/src/components/ProForm/interface/index.ts

@@ -1,4 +1,5 @@
 import type { FormItemRule } from "element-plus";
+import type { Component } from "vue";
 
 /** ProForm 支持的字段组件类型。 */
 export type ProFormComponentType =
@@ -6,6 +7,7 @@ export type ProFormComponentType =
   | "password"
   | "textarea"
   | "input-number"
+  | "color-picker"
   | "segmented"
   | "switch"
   | "checkbox"
@@ -31,6 +33,8 @@ export interface ProFormOption {
   label: string;
   value: string | number | boolean;
   disabled?: boolean;
+  /** 下拉项前置图标。 */
+  icon?: Component;
   children?: ProFormOption[];
   /** Element Plus 懒加载树节点是否为叶子节点。 */
   isLeaf?: boolean;

package/dist/package/src/components/ProTable/components/ColSetting.vue

@@ -12,7 +12,7 @@
         </el-table-column>
         <template #empty>
           <div class="table-empty">
-            <img src="../../../assets/images/notData.png" alt="notData" />
+            <img src="../../../assets/images/notData.png" :alt="t('core.table.no_configurable_columns')" />
             <div>{{ t("core.table.no_configurable_columns") }}</div>
           </div>
         </template>

package/dist/package/src/components/ProTable/index.vue

@@ -41,7 +41,11 @@
           <el-tooltip v-if="showToolButton('refresh')" :content="t('core.table.refresh')" placement="top">
             <el-button class="tool-button" :icon="Refresh" circle @click="handleToolRefresh" />
           </el-tooltip>
-          <el-tooltip v-if="showToolButton('setting') && columns.length" :content="t('core.table.column_setting')" placement="top">
+          <el-tooltip
+            v-if="showToolButton('setting') && columns.length"
+            :content="t('core.table.column_setting')"
+            placement="top"
+          >
             <el-button class="tool-button" :icon="Operation" circle @click="openColSetting" />
           </el-tooltip>
           <el-tooltip
@@ -107,7 +111,7 @@
       <template #empty>
         <div class="table-empty">
           <slot name="empty">
-            <img src="../../assets/images/notData.png" alt="notData" />
+            <img src="../../assets/images/notData.png" :alt="t('common.message.no_data')" />
             <div>{{ t("common.message.no_data") }}</div>
           </slot>
         </div>

package/dist/package/src/components/RichTextPreview/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="core-rich-text-preview" v-html="sanitizedHtml" />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DOMPurify from "dompurify";
+
+defineOptions({
+  name: "CoreRichTextPreview"
+});
+
+/** 富文本预览组件属性。 */
+interface RichTextPreviewProps {
+  /** 待展示的 HTML 内容。 */
+  modelValue: string;
+}
+
+const props = defineProps<RichTextPreviewProps>();
+const sanitizedHtml = computed(() => DOMPurify.sanitize(props.modelValue, { USE_PROFILES: { html: true } }));
+</script>
+
+<style scoped lang="scss">
+.core-rich-text-preview {
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.core-rich-text-preview :deep(p) {
+  margin: 0 0 8px;
+}
+
+.core-rich-text-preview :deep(ul),
+.core-rich-text-preview :deep(ol) {
+  margin: 0 0 8px;
+  padding-left: 24px;
+}
+
+.core-rich-text-preview :deep(img),
+.core-rich-text-preview :deep(video) {
+  max-width: 100%;
+  height: auto;
+}
+</style>

package/dist/package/src/config/index.ts

@@ -1,7 +1,7 @@
 // ? 全局默认配置项
 
 // 首页地址（默认）
-export const HOME_URL: string = "/dashboard/workspace";
+export const HOME_URL: string = "/dashboard";
 
 // 登录页地址（默认）
 export const LOGIN_URL: string = "/login";

package/dist/package/src/layouts/LayoutClassic/index.vue

@@ -4,7 +4,7 @@
     <el-header>
       <div class="header-lf mask-image">
         <div class="logo flx-center">
-          <img class="logo-img" :src="logoUrl" alt="logo" />
+          <img class="logo-img" :src="logoUrl" :alt="t('core.layout.logo_alt')" />
           <span class="logo-text">{{ title }}</span>
         </div>
         <ToolBarLeft />
@@ -46,11 +46,13 @@ import Main from "../../layouts/components/Main/index.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
 import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const globalStore = useGlobalStore();
+const { t } = useLocaleStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);

package/dist/package/src/layouts/LayoutColumns/index.vue

@@ -3,7 +3,7 @@
   <el-container class="layout">
     <div class="aside-split">
       <div class="logo flx-center">
-        <img class="logo-img" :src="logoUrl" alt="logo" />
+        <img class="logo-img" :src="logoUrl" :alt="t('core.layout.logo_alt')" />
       </div>
       <el-scrollbar>
         <div class="split-list">
@@ -60,12 +60,14 @@ import Main from "../../layouts/components/Main/index.vue";
 import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const globalStore = useGlobalStore();
+const { t } = useLocaleStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet.filter(item => Boolean(item.path) || Boolean(item.children?.length)));

package/dist/package/src/layouts/LayoutTransverse/index.vue

@@ -3,7 +3,7 @@
   <el-container class="layout">
     <el-header>
       <div class="logo flx-center">
-        <img class="logo-img" :src="logoUrl" alt="logo" />
+        <img class="logo-img" :src="logoUrl" :alt="t('core.layout.logo_alt')" />
         <span class="logo-text">{{ title }}</span>
       </div>
       <el-menu mode="horizontal" :router="false" :default-active="activeMenu">
@@ -44,11 +44,13 @@ import { getRouteMenuKey, getRouteMetaIcon, getRouteMetaTitle, getRouteTarget, i
 import Main from "../../layouts/components/Main/index.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
+const { t } = useLocaleStore();
 const menuList = computed(() => authStore.showMenuListGet);
 const activeMenu = computed(() => route.path as string);
 const title = computed(() => configStore.display.sysName || import.meta.env.VITE_GLOB_APP_TITLE);

package/dist/package/src/layouts/LayoutVertical/index.vue

@@ -4,7 +4,13 @@
     <el-aside>
       <div class="aside-box" :style="{ width: isCollapse ? '65px' : '240px' }">
         <div ref="logoWrapperRef" :class="['logo', { 'logo--text-only': !showLogoIcon && !isCollapse }]">
-          <img v-show="isCollapse || showLogoIcon" ref="logoIconRef" class="logo-img" :src="logoUrl" alt="logo" />
+          <img
+            v-show="isCollapse || showLogoIcon"
+            ref="logoIconRef"
+            class="logo-img"
+            :src="logoUrl"
+            :alt="t('core.layout.logo_alt')"
+          />
           <span
             v-show="!isCollapse"
             ref="logoTextRef"
@@ -46,11 +52,13 @@ import Main from "../../layouts/components/Main/index.vue";
 import ToolBarLeft from "../../layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "../../layouts/components/Header/ToolBarRight.vue";
 import SubMenu from "../../layouts/components/Menu/SubMenu.vue";
+import { useLocaleStore } from "../../locales";
 
 const route = useRoute();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 const globalStore = useGlobalStore();
+const { t } = useLocaleStore();
 const accordion = computed(() => globalStore.accordion);
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);

package/dist/package/src/layouts/components/Header/components/Avatar.vue

@@ -1,13 +1,13 @@
 <template>
   <el-dropdown ref="dropdownRef" trigger="click" placement="bottom-end" popper-class="header-avatar-dropdown">
     <div class="avatar">
-      <img :src="avatarSrc" alt="avatar" @error="handleAvatarError" />
+      <img :src="avatarSrc" :alt="t('core.layout.avatar')" @error="handleAvatarError" />
     </div>
     <template #dropdown>
       <div class="user-panel">
         <div class="user-panel__summary">
           <div class="user-panel__avatar">
-            <img :src="avatarSrc" alt="avatar" @error="handleAvatarError" />
+            <img :src="avatarSrc" :alt="t('core.layout.avatar')" @error="handleAvatarError" />
           </div>
           <div class="user-panel__identity">
             <div class="user-panel__name">{{ displayName }}</div>
@@ -25,6 +25,10 @@
             <el-icon v-if="action.icon"><component :is="action.icon" /></el-icon>
             <span>{{ action.labelKey ? t(action.labelKey) : action.label }}</span>
           </button>
+          <button class="action-btn action-btn--lock" type="button" @click.stop="lockScreen">
+            <el-icon><Lock /></el-icon>
+            <span>{{ t("core.layout.lock_screen") }}</span>
+          </button>
           <button class="action-btn action-btn--danger" type="button" @click="logout">
             <el-icon><SwitchButton /></el-icon>
             <span>{{ t("common.action.logout") }}</span>
@@ -41,16 +45,17 @@ import { LOGIN_URL } from "../../../../config";
 import { useRouter } from "vue-router";
 import { useUserStore } from "../../../../stores/modules/user";
 import { useAuthStore } from "../../../../stores/modules/auth";
-import { ElMessageBox, ElMessage } from "element-plus";
 import type { DropdownInstance } from "element-plus";
 import defaultAvatar from "../../../../assets/images/avatar.png";
 import { navigateTo } from "../../../../utils/router";
 import { getAdminUserMenuActions } from "../../../../modules";
 import { useLocaleStore } from "../../../../locales";
+import { useLockScreenStore } from "../../../../stores/modules/lockScreen";
 
 const router = useRouter();
 const userStore = useUserStore();
 const authStore = useAuthStore();
+const lockScreenStore = useLockScreenStore();
 const userMenuActions = getAdminUserMenuActions();
 const dropdownRef = ref<DropdownInstance>();
 const { t } = useLocaleStore();
@@ -112,6 +117,12 @@ const handleUserMenuAction = async (path: string) => {
   dropdownRef.value?.handleClose();
   await navigateTo(router, path);
 };
+
+/** 打开锁屏密码设置界面并关闭头像菜单。 */
+const lockScreen = () => {
+  dropdownRef.value?.handleClose();
+  lockScreenStore.openSetup();
+};
 </script>
 
 <style scoped lang="scss">
@@ -192,7 +203,7 @@ const handleUserMenuAction = async (path: string) => {
   height: 38px;
   cursor: pointer;
   border: none;
-  border-radius: 10px;
+  border-radius: var(--admin-page-radius);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
@@ -218,6 +229,14 @@ const handleUserMenuAction = async (path: string) => {
       box-shadow: 0 8px 18px rgb(220 38 38 / 14%);
     }
   }
+  &--lock {
+    color: var(--el-text-color-regular);
+    background: var(--el-fill-color-light);
+    &:hover {
+      background: var(--el-fill-color);
+      box-shadow: 0 8px 18px rgb(15 23 42 / 10%);
+    }
+  }
 }
 :deep(.header-avatar-dropdown) {
   padding: 0;

package/dist/package/src/layouts/components/Header/components/InfoDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="dialogVisible" :title="t('core.layout.info')" width="500px" draggable>
-    <span>This is userInfo</span>
+    <span>{{ t("core.layout.info_content") }}</span>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">{{ t("common.action.cancel") }}</el-button>

package/dist/package/src/layouts/components/Header/components/PasswordDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="dialogVisible" :title="t('core.layout.password_change')" width="500px" draggable>
-    <span>This is Password</span>
+    <span>{{ t("core.layout.password_content") }}</span>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">{{ t("common.action.cancel") }}</el-button>