@liujitcn/kratos-admin-core 0.0.29 → 0.0.31

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>