@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/stores/modules/user.ts

@@ -0,0 +1,109 @@
+import { defineStore } from "pinia";
+import { defAuthService } from "../../api/system/auth";
+import { defLoginService } from "../../api/base/login";
+import type { LoginRequest } from "../../rpc/base/v1/login";
+import type { UserInfoForm } from "../../rpc/system/admin/v1/auth";
+import { UserState } from "../../stores/interface";
+import piniaPersistConfig from "../../stores/helper/persist";
+import { useDictStoreHook } from "../../stores/modules/dict";
+
+const defaultUserInfo: UserInfoForm = {
+  user_name: "",
+  nick_name: "",
+  phone: "",
+  avatar: "",
+  role_code: "",
+  role_name: "",
+  dept_name: "",
+  tenant_code: "",
+  tenant_name: ""
+};
+
+export const useUserStore = defineStore("admin-user", {
+  state: (): UserState => ({
+    token: "",
+    refreshToken: "",
+    tokenType: "",
+    tokenExpiresAt: 0,
+    userInfo: defaultUserInfo
+  }),
+  getters: {},
+  actions: {
+    /** 设置访问令牌 */
+    setToken(token: string) {
+      this.token = token;
+    },
+    /** 设置刷新令牌 */
+    setRefreshToken(refreshToken: string) {
+      this.refreshToken = refreshToken;
+    },
+    /** 设置令牌类型 */
+    setTokenType(tokenType: string) {
+      this.tokenType = tokenType;
+    },
+    /** 设置令牌过期时间戳 */
+    setTokenExpiresAt(tokenExpiresAt: number) {
+      this.tokenExpiresAt = tokenExpiresAt;
+    },
+    /** 设置用户信息 */
+    setUserInfo(userInfo: UserState["userInfo"]) {
+      this.userInfo = userInfo;
+    },
+    /** 根据接口返回统一更新令牌信息 */
+    updateTokenAuth(accessToken: string, refreshToken: string, tokenType: string, expiresIn?: number) {
+      const tokenPrefix = tokenType ? `${tokenType} ` : "";
+      const expiresAt = expiresIn ? Date.now() + expiresIn * 1000 : 0;
+
+      this.setToken(`${tokenPrefix}${accessToken}`.trim());
+      this.setRefreshToken(refreshToken ?? "");
+      this.setTokenType(tokenType ?? "");
+      this.setTokenExpiresAt(expiresAt);
+    },
+    /** 判断当前访问令牌是否仍然可用 */
+    isAuthenticated() {
+      return Boolean(this.token.trim() && this.tokenExpiresAt > Date.now());
+    },
+    /** 登录 */
+    async login(loginRequest: LoginRequest) {
+      const data = await defLoginService.Login(loginRequest);
+      this.updateTokenAuth(data.access_token, data.refresh_token ?? "", data.token_type ?? "", data.expires_in);
+    },
+    /** 刷新认证令牌 */
+    async refreshAccessToken() {
+      if (!this.refreshToken) {
+        return Promise.reject(new Error("refresh token 不存在"));
+      }
+
+      const data = await defLoginService.RefreshToken({ refresh_token: this.refreshToken });
+      this.updateTokenAuth(data.access_token, data.refresh_token ?? this.refreshToken, data.token_type ?? "", data.expires_in);
+      return data;
+    },
+    /** 获取用户信息 */
+    async getUserInfo() {
+      const data = await defAuthService.GetUserInfo({});
+      this.setUserInfo(data);
+      return data;
+    },
+    /** 清理认证数据 */
+    clearAuthData() {
+      // 清理登录态时同步清空字典缓存，避免切换账号后读到旧字典。
+      useDictStoreHook().clearDictionaryCache();
+      this.setToken("");
+      this.setRefreshToken("");
+      this.setTokenType("");
+      this.setTokenExpiresAt(0);
+      this.setUserInfo({ ...defaultUserInfo });
+    },
+    /** 退出登录 */
+    async logout() {
+      try {
+        await defLoginService.Logout({});
+      } catch {
+        // 退出接口返回异常时，前端仍需清理本地登录态，避免用户卡在当前会话。
+      } finally {
+        this.clearAuthData();
+      }
+    }
+  },
+  persist: piniaPersistConfig("admin-user")
+});

package/dist/package/src/stores/runtime.ts

@@ -0,0 +1,4 @@
+export { useAuthStore } from "./modules/auth";
+export { useGlobalStore } from "./modules/global";
+export { useTabsStore } from "./modules/tabs";
+export { useUserStore } from "./modules/user";

package/dist/package/src/styles/common.scss

@@ -0,0 +1,144 @@
+/* 后台业务页卡片与文本的通用主题变量 */
+:root {
+  --admin-page-radius: 6px;
+  --admin-page-card-bg: var(--el-bg-color);
+  --admin-page-card-bg-soft: #f8fafc;
+  --admin-page-card-bg-muted: #f3f4f6;
+  --admin-page-card-border: #e5eaf1;
+  --admin-page-card-border-soft: #e8edf4;
+  --admin-page-card-border-muted: #dbe4f0;
+  --admin-page-divider: #eef2f7;
+  --admin-page-divider-strong: #e6ebf2;
+  --admin-page-text-primary: #1f2937;
+  --admin-page-text-secondary: #64748b;
+  --admin-page-text-placeholder: #94a3b8;
+  --admin-page-shadow: 0 8px 24px rgb(15 23 42 / 4%);
+  --admin-page-accent-soft-bg: #eff6ff;
+  --admin-page-accent-soft-border: #dbeafe;
+  --admin-page-accent-soft-text: #2563eb;
+  --admin-page-badge-bg: #eaf2ff;
+}
+
+/* flex */
+.flx-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flx-justify-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.flx-align-center {
+  display: flex;
+  align-items: center;
+}
+
+/* clearfix */
+.clearfix::after {
+  clear: both;
+  display: block;
+  height: 0;
+  overflow: hidden;
+  content: "";
+}
+
+/* 文字单行省略号 */
+.sle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 文字多行省略号 */
+.mle {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+/* 文字多了自动換行 */
+.break-word {
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.2s;
+}
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+  transition: all 0.2s;
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+  transition: all 0.2s;
+}
+
+/* breadcrumb-transform */
+.breadcrumb-enter-active {
+  transition: all 0.2s;
+}
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+/* scroll bar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--el-border-color-darker);
+  border-radius: 20px;
+}
+
+/* nprogress */
+#nprogress .bar {
+  background: var(--el-color-primary) !important;
+}
+#nprogress .spinner-icon {
+  border-top-color: var(--el-color-primary) !important;
+  border-left-color: var(--el-color-primary) !important;
+}
+#nprogress .peg {
+  box-shadow:
+    0 0 10px var(--el-color-primary),
+    0 0 5px var(--el-color-primary) !important;
+}
+
+/* 外边距、内边距全局样式 */
+@for $i from 0 through 100 {
+  .mt#{$i} {
+    margin-top: #{$i}px !important;
+  }
+  .mr#{$i} {
+    margin-right: #{$i}px !important;
+  }
+  .mb#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+  .ml#{$i} {
+    margin-left: #{$i}px !important;
+  }
+  .pt#{$i} {
+    padding-top: #{$i}px !important;
+  }
+  .pr#{$i} {
+    padding-right: #{$i}px !important;
+  }
+  .pb#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+  .pl#{$i} {
+    padding-left: #{$i}px !important;
+  }
+}

package/dist/package/src/styles/element-dark.scss

@@ -0,0 +1,46 @@
+/* 自定义 element 暗黑模式 */
+html.dark {
+  --admin-page-radius: 6px;
+  --admin-page-card-bg: var(--el-bg-color-overlay);
+  --admin-page-card-bg-soft: var(--el-fill-color-light);
+  --admin-page-card-bg-muted: var(--el-fill-color);
+  --admin-page-card-border: var(--el-border-color);
+  --admin-page-card-border-soft: var(--el-border-color-light);
+  --admin-page-card-border-muted: var(--el-border-color-lighter);
+  --admin-page-divider: var(--el-border-color-lighter);
+  --admin-page-divider-strong: var(--el-border-color);
+  --admin-page-text-primary: var(--el-text-color-primary);
+  --admin-page-text-secondary: var(--el-text-color-regular);
+  --admin-page-text-placeholder: var(--el-text-color-secondary);
+  --admin-page-shadow: 0 10px 28px rgb(0 0 0 / 22%);
+  --admin-page-accent-soft-bg: rgb(64 158 255 / 14%);
+  --admin-page-accent-soft-border: rgb(64 158 255 / 30%);
+  --admin-page-accent-soft-text: var(--el-color-primary-light-3);
+  --admin-page-badge-bg: rgb(64 158 255 / 16%);
+
+  /* wangEditor */
+  --w-e-toolbar-color: #eeeeee;
+  --w-e-toolbar-bg-color: #141414;
+  --w-e-textarea-bg-color: #141414;
+  --w-e-textarea-color: #eeeeee;
+  --w-e-toolbar-active-bg-color: #464646;
+  --w-e-toolbar-border-color: var(--el-border-color-darker);
+  .w-e-bar-item button:hover,
+  .w-e-menu-tooltip-v5::before {
+    color: #eeeeee;
+  }
+
+  /* login */
+  .login-container {
+    background-color: #191919 !important;
+    .login-box {
+      background-color: rgb(0 0 0 / 80%) !important;
+      .login-form {
+        box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;
+        .logo-text {
+          color: var(--el-text-color-primary) !important;
+        }
+      }
+    }
+  }
+}

package/dist/package/src/styles/element.scss

@@ -0,0 +1,333 @@
+/* el-alert */
+.el-alert {
+  border: 1px solid;
+}
+
+/* 当前页面最大化 css */
+.main-maximize {
+  .aside-split,
+  .el-aside,
+  .el-header,
+  .el-footer,
+  .tabs-box {
+    display: none !important;
+  }
+}
+
+/* mask image */
+.mask-image {
+  padding-right: 50px;
+  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+}
+
+/* custom card */
+.card {
+  box-sizing: border-box;
+  padding: 20px;
+  overflow-x: hidden;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 6px;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+
+/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
+.no-card {
+  .card {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .table-search {
+    padding: 18px 0 0 !important;
+    margin-bottom: 0 !important;
+  }
+}
+
+/* content-box (常用内容盒子) */
+.content-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  .text {
+    margin: 20px 0 30px;
+    font-size: 23px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+  }
+  .el-descriptions {
+    width: 100%;
+    padding: 40px 0 0;
+    .el-descriptions__title {
+      font-size: 18px;
+    }
+    .el-descriptions__label {
+      width: 200px;
+    }
+  }
+}
+
+/* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */
+.main-box {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .table-box {
+    overflow: hidden;
+  }
+}
+
+/* proTable */
+.table-box,
+.table-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 520px;
+
+  // table-search 表格搜索样式
+  .table-search {
+    padding: 18px 18px 0;
+    margin-bottom: 10px;
+    .el-form {
+      .el-form-item__content > * {
+        width: 100%;
+      }
+
+      // 去除时间选择器上下 padding
+      .el-range-editor.el-input__wrapper {
+        padding: 0 10px;
+      }
+    }
+    .operation {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 18px;
+    }
+  }
+
+  // 表格 header 样式
+  .table-header {
+    .header-button-lf,
+    .header-button-ri {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px 12px;
+      margin-bottom: 15px;
+      .el-button:not(.el-input .el-button) {
+        margin-left: 0;
+      }
+    }
+    .header-button-lf {
+      float: left;
+    }
+    .header-button-ri {
+      float: right;
+    }
+  }
+
+  // el-table 表格样式
+  .el-table {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    table {
+      width: 100%;
+    }
+    .el-table__header th {
+      height: 45px;
+      font-size: 15px;
+      font-weight: bold;
+      color: var(--el-text-color-primary);
+      background: var(--el-fill-color-light);
+    }
+
+    // 固定列表头沿用普通表头底色，避免无横向滚动时被 Element Plus 覆盖为白底。
+    .el-table__header th.el-table-fixed-column--left,
+    .el-table__header th.el-table-fixed-column--right {
+      background: var(--el-fill-color-light);
+    }
+    .el-table__row {
+      height: 45px;
+      font-size: 14px;
+      .move {
+        cursor: move;
+        .el-icon {
+          cursor: move;
+        }
+      }
+    }
+
+    // 设置 el-table 中 header 文字不换行，并省略
+    .el-table__header .el-table__cell > .cell {
+      // white-space: nowrap;
+      white-space: wrap;
+    }
+
+    // 空表时去掉底部那条默认分隔线，和菜单管理页保持一致。
+    .el-table__inner-wrapper::before {
+      height: 0;
+    }
+
+    // 统一修正表格空数据态，让空态填满表格内容区而不是停留在中间一条空行里。
+    .el-table__inner-wrapper {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+    }
+    .el-table__body-wrapper {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+    }
+    .el-table__body-wrapper:has(.el-table__empty-block) {
+      // 空数据时让 Element Plus 内层滚动容器继承表格主体高度，空态才能在完整主体区域居中。
+      .el-scrollbar,
+      .el-scrollbar__wrap,
+      .el-scrollbar__view {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-height: 100%;
+      }
+    }
+    .el-table__empty-block {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      border-top: none;
+      border-bottom: none;
+      &::before,
+      &::after {
+        display: none;
+      }
+      .el-table__empty-text {
+        // 表格存在横向滚动或固定列时，空状态按当前可视区中心展示。
+        position: sticky;
+        left: 50%;
+        width: max-content;
+        max-width: 100%;
+        transform: translateX(-50%);
+      }
+      .table-empty {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        line-height: 24px;
+        color: var(--el-text-color-secondary);
+        img {
+          display: block;
+        }
+      }
+    }
+
+    // table 中 image 图片样式
+    .table-image {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+  }
+
+  // 表格 pagination 样式
+  .el-pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+
+/* el-table 组件大小 */
+.el-table--small {
+  .el-table__header th {
+    height: 40px !important;
+    font-size: 14px !important;
+  }
+  .el-table__row {
+    height: 40px !important;
+    font-size: 13px !important;
+  }
+}
+.el-table--large {
+  .el-table__header th {
+    height: 50px !important;
+    font-size: 16px !important;
+  }
+  .el-table__row {
+    height: 50px !important;
+    font-size: 15px !important;
+  }
+}
+
+/* el-drawer */
+.el-drawer {
+  .el-drawer__header {
+    padding: 16px 20px;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    span {
+      font-size: 17px;
+      line-height: 17px;
+      color: var(--el-text-color-primary) !important;
+    }
+  }
+  .el-drawer__footer {
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  // select 样式
+  .el-select {
+    width: 100%;
+  }
+
+  // drawer-form 中存在两列 form-item 样式
+  .drawer-multiColumn-form {
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item {
+      width: 47%;
+      &:nth-child(2n-1) {
+        margin-right: 5%;
+      }
+    }
+  }
+}
+
+/* el-dialog */
+.el-dialog {
+  padding: 0;
+  margin-top: 8vh;
+  .el-dialog__header {
+    padding: 15px 20px;
+    margin: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    .el-dialog__title {
+      font-size: 17px;
+    }
+  }
+  .el-dialog__body,
+  .el-dialog__footer {
+    padding: 15px 20px;
+  }
+}
+
+@media screen and (width <= 768px) {
+  .el-dialog {
+    margin-top: 4vh;
+  }
+}