@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/views/login/index.scss

@@ -0,0 +1,103 @@
+.login-container {
+  height: 100%;
+  min-height: 550px;
+  background-color: #eeeeee;
+  background-image: url("../../assets/images/login_bg.svg");
+  background-size: 100% 100%;
+  background-size: cover;
+  .login-box {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 96.5%;
+    height: 94%;
+    padding: 0 50px;
+    background-color: rgb(255 255 255 / 80%);
+    border-radius: 10px;
+    .dark {
+      position: absolute;
+      top: 13px;
+      right: 18px;
+    }
+    .login-left {
+      width: 800px;
+      margin-right: 10px;
+      .login-left-img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .login-form {
+      box-sizing: border-box;
+      width: 420px;
+      max-width: 100%;
+      padding: 50px 40px 45px;
+      background-color: var(--el-bg-color);
+      border-radius: 10px;
+      box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
+      .login-logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        max-width: 100%;
+        margin-bottom: 45px;
+        overflow: hidden;
+        .login-icon {
+          /* Logo 图标允许按容器收缩，避免与长标题叠加后撑出表单区域。 */
+          flex: 0 1 60px;
+          width: clamp(40px, 14%, 60px);
+          max-width: 60px;
+          height: auto;
+          aspect-ratio: 60 / 52;
+          object-fit: contain;
+        }
+        .logo-text {
+          /* 标题始终保持单行，字号由脚本按容器宽度动态缩放。 */
+          flex: 1 1 auto;
+          min-width: 0;
+          padding: 0 0 0 16px;
+          margin: 0;
+          font-weight: bold;
+          line-height: 1.2;
+          color: #34495e;
+          white-space: nowrap;
+        }
+      }
+      .el-form-item {
+        margin-bottom: 40px;
+      }
+      .login-btn {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 40px;
+        white-space: nowrap;
+        .el-button {
+          width: 185px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (width <= 1250px) {
+  .login-left {
+    display: none;
+  }
+}
+
+@media screen and (width <= 600px) {
+  .login-form {
+    width: 97% !important;
+    padding: 40px 24px 32px !important;
+    .login-logo {
+      margin-bottom: 32px !important;
+      .logo-text {
+        padding-left: 12px !important;
+      }
+    }
+  }
+}

package/dist/package/src/views/login/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="login-container flx-center">
+    <div class="login-box">
+      <SwitchDark class="dark" />
+      <div class="login-left">
+        <img class="login-left-img" :src="backgroundUrl" alt="login" />
+      </div>
+      <div class="login-form">
+        <div ref="loginLogoRef" class="login-logo">
+          <img v-show="showLogoIcon" ref="logoIconRef" class="login-icon" :src="logoUrl" alt="" />
+          <h2 ref="logoTextRef" class="logo-text" :style="{ fontSize: `${logoFontSize}px` }">{{ projectName }}</h2>
+        </div>
+        <LoginForm />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Login">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import LoginForm from "./components/LoginForm.vue";
+import SwitchDark from "../../components/SwitchDark/index.vue";
+import { useConfigStore } from "../../stores/modules/config";
+
+const configStore = useConfigStore();
+const projectName = computed(() => configStore.display.sysName || import.meta.env.VITE_GLOB_APP_TITLE);
+const logoUrl = computed(() => configStore.display.adminLogo);
+const backgroundUrl = computed(() => configStore.display.background);
+
+const MAX_LOGO_FONT_SIZE = 42;
+const PREFERRED_MIN_LOGO_FONT_SIZE = 30;
+const MIN_LOGO_FONT_SIZE = 8;
+const LOGO_TEXT_GAP = 16;
+
+const loginLogoRef = ref<HTMLElement>();
+const logoIconRef = ref<HTMLImageElement>();
+const logoTextRef = ref<HTMLElement>();
+const logoFontSize = ref(MAX_LOGO_FONT_SIZE);
+const showLogoIcon = ref(true);
+
+let logoResizeObserver: ResizeObserver | null = null;
+
+/**
+ * 根据表单头部可用宽度动态缩放标题字号，优先保留文字大小，不够时先隐藏图标。
+ */
+async function updateLogoLayout() {
+  await nextTick();
+
+  const logoTextElement = logoTextRef.value;
+  if (!logoTextElement) return;
+
+  showLogoIcon.value = true;
+  await fitLogoText(true, PREFERRED_MIN_LOGO_FONT_SIZE);
+
+  if (logoTextElement.scrollWidth <= logoTextElement.clientWidth) return;
+
+  showLogoIcon.value = false;
+  await fitLogoText(false, MIN_LOGO_FONT_SIZE);
+}
+
+/**
+ * 在当前图标显示状态下，按可用宽度逐步收缩标题字号。
+ */
+async function fitLogoText(withIcon: boolean, minFontSize: number) {
+  await nextTick();
+
+  const loginLogoElement = loginLogoRef.value;
+  const logoIconElement = logoIconRef.value;
+  const logoTextElement = logoTextRef.value;
+  if (!loginLogoElement || !logoTextElement) return;
+
+  const iconWidth = withIcon && logoIconElement ? logoIconElement.getBoundingClientRect().width : 0;
+  const availableWidth = Math.max(loginLogoElement.clientWidth - iconWidth - (withIcon ? LOGO_TEXT_GAP : 0), 0);
+
+  let nextFontSize = MAX_LOGO_FONT_SIZE;
+  logoFontSize.value = nextFontSize;
+  await nextTick();
+
+  while (nextFontSize > minFontSize && logoTextElement.scrollWidth > availableWidth) {
+    nextFontSize -= 1;
+    logoFontSize.value = nextFontSize;
+    await nextTick();
+  }
+}
+
+onMounted(() => {
+  updateLogoLayout();
+  logoResizeObserver = new ResizeObserver(() => {
+    updateLogoLayout();
+  });
+  if (loginLogoRef.value) {
+    logoResizeObserver.observe(loginLogoRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  logoResizeObserver?.disconnect();
+  logoResizeObserver = null;
+});
+
+watch([projectName, logoUrl], () => {
+  updateLogoLayout();
+});
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>

package/dist/package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare module "virtual:svg-icons-register";

package/dist/package/types/generated/auto-imports.d.ts

@@ -0,0 +1,124 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const ArrowDown: typeof import('@element-plus/icons-vue').ArrowDown
+  const ArrowRight: typeof import('@element-plus/icons-vue').ArrowRight
+  const ArrowUp: typeof import('@element-plus/icons-vue').ArrowUp
+  const Camera: typeof import('@element-plus/icons-vue').Camera
+  const CircleCheck: typeof import('@element-plus/icons-vue').CircleCheck
+  const CircleClose: typeof import('@element-plus/icons-vue').CircleClose
+  const CirclePlus: typeof import('@element-plus/icons-vue').CirclePlus
+  const Delete: typeof import('@element-plus/icons-vue').Delete
+  const Document: typeof import('@element-plus/icons-vue').Document
+  const Download: typeof import('@element-plus/icons-vue').Download
+  const Edit: typeof import('@element-plus/icons-vue').Edit
+  const EditPen: typeof import('@element-plus/icons-vue').EditPen
+  const EffectScope: typeof import('vue').EffectScope
+  const ElConfigProvider: typeof import('element-plus').ElConfigProvider
+  const ElLoading: typeof import('element-plus').ElLoading
+  const ElMessage: typeof import('element-plus').ElMessage
+  const ElMessageBox: typeof import('element-plus').ElMessageBox
+  const ElNotification: typeof import('element-plus').ElNotification
+  const ElTable: typeof import('element-plus').ElTable
+  const ElTree: typeof import('element-plus').ElTree
+  const Expand: typeof import('@element-plus/icons-vue').Expand
+  const Female: typeof import('@element-plus/icons-vue').Female
+  const Fold: typeof import('@element-plus/icons-vue').Fold
+  const Goods: typeof import('@element-plus/icons-vue').Goods
+  const InfoFilled: typeof import('@element-plus/icons-vue').InfoFilled
+  const List: typeof import('@element-plus/icons-vue').List
+  const Male: typeof import('@element-plus/icons-vue').Male
+  const Moon: typeof import('@element-plus/icons-vue').Moon
+  const Operation: typeof import('@element-plus/icons-vue').Operation
+  const Phone: typeof import('@element-plus/icons-vue').Phone
+  const Plus: typeof import('@element-plus/icons-vue').Plus
+  const Position: typeof import('@element-plus/icons-vue').Position
+  const QuestionFilled: typeof import('@element-plus/icons-vue').QuestionFilled
+  const Refresh: typeof import('@element-plus/icons-vue').Refresh
+  const RefreshLeft: typeof import('@element-plus/icons-vue').RefreshLeft
+  const Search: typeof import('@element-plus/icons-vue').Search
+  const Sunny: typeof import('@element-plus/icons-vue').Sunny
+  const Switch: typeof import('@element-plus/icons-vue').Switch
+  const Tickets: typeof import('@element-plus/icons-vue').Tickets
+  const Timer: typeof import('@element-plus/icons-vue').Timer
+  const User: typeof import('@element-plus/icons-vue').User
+  const UserFilled: typeof import('@element-plus/icons-vue').UserFilled
+  const Van: typeof import('@element-plus/icons-vue').Van
+  const View: typeof import('@element-plus/icons-vue').View
+  const Wallet: typeof import('@element-plus/icons-vue').Wallet
+  const computed: typeof import('vue').computed
+  const createApp: typeof import('vue').createApp
+  const customRef: typeof import('vue').customRef
+  const defineAsyncComponent: typeof import('vue').defineAsyncComponent
+  const defineComponent: typeof import('vue').defineComponent
+  const effectScope: typeof import('vue').effectScope
+  const formContextKey: typeof import('element-plus').formContextKey
+  const formItemContextKey: typeof import('element-plus').formItemContextKey
+  const getCurrentInstance: typeof import('vue').getCurrentInstance
+  const getCurrentScope: typeof import('vue').getCurrentScope
+  const getCurrentWatcher: typeof import('vue').getCurrentWatcher
+  const h: typeof import('vue').h
+  const inject: typeof import('vue').inject
+  const isProxy: typeof import('vue').isProxy
+  const isReactive: typeof import('vue').isReactive
+  const isReadonly: typeof import('vue').isReadonly
+  const isRef: typeof import('vue').isRef
+  const isShallow: typeof import('vue').isShallow
+  const markRaw: typeof import('vue').markRaw
+  const nextTick: typeof import('vue').nextTick
+  const onActivated: typeof import('vue').onActivated
+  const onBeforeMount: typeof import('vue').onBeforeMount
+  const onBeforeRouteLeave: typeof import('vue-router').onBeforeRouteLeave
+  const onBeforeRouteUpdate: typeof import('vue-router').onBeforeRouteUpdate
+  const onBeforeUnmount: typeof import('vue').onBeforeUnmount
+  const onBeforeUpdate: typeof import('vue').onBeforeUpdate
+  const onDeactivated: typeof import('vue').onDeactivated
+  const onErrorCaptured: typeof import('vue').onErrorCaptured
+  const onMounted: typeof import('vue').onMounted
+  const onRenderTracked: typeof import('vue').onRenderTracked
+  const onRenderTriggered: typeof import('vue').onRenderTriggered
+  const onScopeDispose: typeof import('vue').onScopeDispose
+  const onServerPrefetch: typeof import('vue').onServerPrefetch
+  const onUnmounted: typeof import('vue').onUnmounted
+  const onUpdated: typeof import('vue').onUpdated
+  const onWatcherCleanup: typeof import('vue').onWatcherCleanup
+  const provide: typeof import('vue').provide
+  const reactive: typeof import('vue').reactive
+  const readonly: typeof import('vue').readonly
+  const ref: typeof import('vue').ref
+  const resolveComponent: typeof import('vue').resolveComponent
+  const shallowReactive: typeof import('vue').shallowReactive
+  const shallowReadonly: typeof import('vue').shallowReadonly
+  const shallowRef: typeof import('vue').shallowRef
+  const toRaw: typeof import('vue').toRaw
+  const toRef: typeof import('vue').toRef
+  const toRefs: typeof import('vue').toRefs
+  const toValue: typeof import('vue').toValue
+  const triggerRef: typeof import('vue').triggerRef
+  const unref: typeof import('vue').unref
+  const useAttrs: typeof import('vue').useAttrs
+  const useCssModule: typeof import('vue').useCssModule
+  const useCssVars: typeof import('vue').useCssVars
+  const useId: typeof import('vue').useId
+  const useLink: typeof import('vue-router').useLink
+  const useModel: typeof import('vue').useModel
+  const useRoute: typeof import('vue-router').useRoute
+  const useRouter: typeof import('vue-router').useRouter
+  const useSlots: typeof import('vue').useSlots
+  const useTemplateRef: typeof import('vue').useTemplateRef
+  const watch: typeof import('vue').watch
+  const watchEffect: typeof import('vue').watchEffect
+  const watchPostEffect: typeof import('vue').watchPostEffect
+  const watchSyncEffect: typeof import('vue').watchSyncEffect
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

package/dist/package/types/generated/components.d.ts

@@ -0,0 +1,151 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import { GlobalComponents } from 'vue'
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElResult: typeof import('element-plus/es')['ElResult']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTransfer: typeof import('element-plus/es')['ElTransfer']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    ElWatermark: typeof import('element-plus/es')['ElWatermark']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface GlobalDirectives {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
+
+// For TSX support
+declare global {
+  const ElAlert: typeof import('element-plus/es')['ElAlert']
+  const ElAside: typeof import('element-plus/es')['ElAside']
+  const ElAvatar: typeof import('element-plus/es')['ElAvatar']
+  const ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+  const ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+  const ElButton: typeof import('element-plus/es')['ElButton']
+  const ElCard: typeof import('element-plus/es')['ElCard']
+  const ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+  const ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+  const ElCol: typeof import('element-plus/es')['ElCol']
+  const ElCollapse: typeof import('element-plus/es')['ElCollapse']
+  const ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+  const ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+  const ElContainer: typeof import('element-plus/es')['ElContainer']
+  const ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+  const ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+  const ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+  const ElDialog: typeof import('element-plus/es')['ElDialog']
+  const ElDivider: typeof import('element-plus/es')['ElDivider']
+  const ElDrawer: typeof import('element-plus/es')['ElDrawer']
+  const ElDropdown: typeof import('element-plus/es')['ElDropdown']
+  const ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+  const ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+  const ElEmpty: typeof import('element-plus/es')['ElEmpty']
+  const ElFooter: typeof import('element-plus/es')['ElFooter']
+  const ElForm: typeof import('element-plus/es')['ElForm']
+  const ElFormItem: typeof import('element-plus/es')['ElFormItem']
+  const ElHeader: typeof import('element-plus/es')['ElHeader']
+  const ElIcon: typeof import('element-plus/es')['ElIcon']
+  const ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
+  const ElInput: typeof import('element-plus/es')['ElInput']
+  const ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+  const ElMain: typeof import('element-plus/es')['ElMain']
+  const ElMenu: typeof import('element-plus/es')['ElMenu']
+  const ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+  const ElOption: typeof import('element-plus/es')['ElOption']
+  const ElPagination: typeof import('element-plus/es')['ElPagination']
+  const ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+  const ElPopover: typeof import('element-plus/es')['ElPopover']
+  const ElProgress: typeof import('element-plus/es')['ElProgress']
+  const ElRadio: typeof import('element-plus/es')['ElRadio']
+  const ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+  const ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+  const ElResult: typeof import('element-plus/es')['ElResult']
+  const ElRow: typeof import('element-plus/es')['ElRow']
+  const ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+  const ElSegmented: typeof import('element-plus/es')['ElSegmented']
+  const ElSelect: typeof import('element-plus/es')['ElSelect']
+  const ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+  const ElSpace: typeof import('element-plus/es')['ElSpace']
+  const ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+  const ElSwitch: typeof import('element-plus/es')['ElSwitch']
+  const ElTable: typeof import('element-plus/es')['ElTable']
+  const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+  const ElTabPane: typeof import('element-plus/es')['ElTabPane']
+  const ElTabs: typeof import('element-plus/es')['ElTabs']
+  const ElTag: typeof import('element-plus/es')['ElTag']
+  const ElTooltip: typeof import('element-plus/es')['ElTooltip']
+  const ElTransfer: typeof import('element-plus/es')['ElTransfer']
+  const ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+  const ElUpload: typeof import('element-plus/es')['ElUpload']
+  const ElWatermark: typeof import('element-plus/es')['ElWatermark']
+  const RouterLink: typeof import('vue-router')['RouterLink']
+  const RouterView: typeof import('vue-router')['RouterView']
+}