release: update 5.3.0

2025-12-06 18:30:34 +08:00 · 2024-03-29 00:55:40 +08:00
parent b20157fa2e
commit b76600a981
29 changed files with 418 additions and 351 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,9 +8,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { ElConfigProvider } from "element-plus";
+import { ReDialog } from "@/components/ReDialog";
 import en from "element-plus/dist/locale/en.mjs";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
-import { ReDialog } from "@/components/ReDialog";
+
 export default defineComponent({
  name: "app",
  components: {
--- a/src/components/ReDialog/index.ts
+++ b/src/components/ReDialog/index.ts
@@ -51,8 +51,8 @@ const closeAllDialog = () => {

 /** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
 * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
 */
 const ReDialog = withInstall(reDialog);

--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
-  closeDialog,
-  dialogStore,
  type EventType,
  type ButtonProps,
-  type DialogOptions
+  type DialogOptions,
+  closeDialog,
+  dialogStore
 } from "./index";
 import { ref, computed } from "vue";
 import { isFunction } from "@pureadmin/utils";
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,3 +1,5 @@
+import Sortable from "sortablejs";
+import { transformI18n } from "@/plugins/i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
 import {
@@ -8,7 +10,6 @@ import {
  getKeyList
 } from "@pureadmin/utils";

-import Sortable from "sortablejs";
 import DragIcon from "./svg/drag.svg?component";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
@@ -118,6 +119,7 @@ export default defineComponent({
    }

    function handleCheckedColumnsChange(value: string[]) {
+      checkedColumns.value = value;
      const checkedCount = value.length;
      checkAll.value = checkedCount === checkColumnList.length;
      isIndeterminate.value =
@@ -125,7 +127,9 @@ export default defineComponent({
    }

    function handleCheckColumnListChange(val: boolean, label: string) {
-      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
+      dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].hide = !val;
    }

    async function onReset() {
@@ -198,7 +202,9 @@ export default defineComponent({
    };

    const isFixedColumn = (label: string) => {
-      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
+      return dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].fixed
        ? true
        : false;
    };
@@ -293,7 +299,7 @@ export default defineComponent({
                <div class="pt-[6px] pl-[11px]">
                  <el-scrollbar max-height="36vh">
                    <el-checkbox-group
-                      v-model={checkedColumns.value}
+                      modelValue={checkedColumns.value}
                      onChange={value => handleCheckedColumnsChange(value)}
                    >
                      <el-space
@@ -301,7 +307,7 @@ export default defineComponent({
                        alignment="flex-start"
                        size={0}
                      >
-                        {checkColumnList.map(item => {
+                        {checkColumnList.map((item, index) => {
                          return (
                            <div class="flex items-center">
                              <DragIcon
@@ -316,17 +322,18 @@ export default defineComponent({
                                }) => rowDrop(event)}
                              />
                              <el-checkbox
-                                key={item}
+                                key={index}
+                                label={item}
                                value={item}
                                onChange={value =>
                                  handleCheckColumnListChange(value, item)
                                }
                              >
                                <span
-                                  title={item}
+                                  title={transformI18n(item)}
                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
                                >
-                                  {item}
+                                  {transformI18n(item)}
                                </span>
                              </el-checkbox>
                            </div>
--- a/src/components/ReSegmented/src/index.css
+++ b/src/components/ReSegmented/src/index.css
@@ -1,11 +1,20 @@
 .pure-segmented {
+  --pure-control-padding-horizontal: 12px;
+  --pure-control-padding-horizontal-sm: 8px;
+  --pure-segmented-track-padding: 2px;
+  --pure-segmented-line-width: 1px;
+
+  --pure-segmented-border-radius-small: 4px;
+  --pure-segmented-border-radius-base: 6px;
+  --pure-segmented-border-radius-large: 8px;
+
  box-sizing: border-box;
  display: inline-block;
-  padding: 2px;
-  font-size: 14px;
+  padding: var(--pure-segmented-track-padding);
+  font-size: var(--el-font-size-base);
  color: rgba(0, 0, 0, 0.65);
  background-color: rgb(0 0 0 / 4%);
-  border-radius: 2px;
+  border-radius: var(--pure-segmented-border-radius-base);
 }

 .pure-segmented-block {
@@ -23,6 +32,75 @@
  text-overflow: ellipsis;
 }

+/* small */
+.pure-segmented.pure-segmented--small {
+  border-radius: var(--pure-segmented-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item {
+  border-radius: var(--el-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal-sm) -
+        var(--pure-segmented-line-width)
+    );
+}
+
+/* large */
+.pure-segmented.pure-segmented--large {
+  border-radius: var(--pure-segmented-border-radius-large);
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item {
+  border-radius: calc(
+    var(--el-border-radius-base) + var(--el-border-radius-small)
+  );
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  font-size: var(--el-font-size-medium);
+}
+
+/* default */
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--el-border-radius-base);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.pure-segmented .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: 0.1s;
+}
+
 .pure-segmented-group {
  position: relative;
  display: flex;
@@ -52,23 +130,6 @@
  will-change: transform, width;
 }

-.pure-segmented-item {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.pure-segmented-item > div {
-  min-height: 28px;
-  line-height: 28px;
-  padding: 0 11px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .pure-segmented-item > input {
  position: absolute;
  inset-block-start: 0;
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -1,5 +1,14 @@
 import "./index.css";
+import type { OptionsType } from "./type";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import {
+  useDark,
+  isNumber,
+  isFunction,
+  useResizeObserver
+} from "@pureadmin/utils";
+import {
+  type PropType,
  h,
  ref,
  toRef,
@@ -8,14 +17,6 @@ import {
  defineComponent,
  getCurrentInstance
 } from "vue";
-import type { OptionsType } from "./type";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import {
-  isFunction,
-  isNumber,
-  useDark,
-  useResizeObserver
-} from "@pureadmin/utils";

 const props = {
  options: {
@@ -32,6 +33,10 @@ const props = {
  block: {
    type: Boolean,
    default: false
+  },
+  /** 控件尺寸	 */
+  size: {
+    type: String as PropType<"small" | "default" | "large">
  }
 };

@@ -81,13 +86,14 @@ export default defineComponent({
    function handleInit(index = curIndex.value) {
      nextTick(() => {
        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        if (!curLabelRef) return;
        width.value = curLabelRef.clientWidth;
        translateX.value = curLabelRef.offsetLeft;
        initStatus.value = true;
      });
    }

-    if (props.block) {
+    function handleResizeInit() {
      useResizeObserver(".pure-segmented", () => {
        nextTick(() => {
          handleInit(curIndex.value);
@@ -95,6 +101,8 @@ export default defineComponent({
      });
    }

+    props.block && handleResizeInit();
+
    watch(
      () => curIndex.value,
      index => {
@@ -103,11 +111,12 @@ export default defineComponent({
        });
      },
      {
-        deep: true,
        immediate: true
      }
    );

+    watch(() => props.size, handleResizeInit);
+
    const rendLabel = () => {
      return props.options.map((option, index) => {
        return (
@@ -167,7 +176,12 @@ export default defineComponent({

    return () => (
      <div
-        class={["pure-segmented", props.block ? "pure-segmented-block" : ""]}
+        class={{
+          "pure-segmented": true,
+          "pure-segmented-block": props.block,
+          "pure-segmented--large": props.size === "large",
+          "pure-segmented--small": props.size === "small"
+        }}
      >
        <div class="pure-segmented-group">
          <div
--- a/src/components/ReText/src/index.vue
+++ b/src/components/ReText/src/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { h, onMounted, ref, useSlots } from "vue";
-import { useTippy, type TippyOptions } from "vue-tippy";
+import { type TippyOptions, useTippy } from "vue-tippy";

 const props = defineProps({
  // 行数
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,5 +1,5 @@
-import type { App } from "vue";
 import axios from "axios";
+import type { App } from "vue";

 let config: object = {};
 const { VITE_PUBLIC_PATH } = import.meta.env;
--- a/src/directives/optimize/index.ts
+++ b/src/directives/optimize/index.ts
@@ -1,9 +1,9 @@
 import {
-  isFunction,
-  isObject,
  isArray,
+  throttle,
  debounce,
-  throttle
+  isObject,
+  isFunction
 } from "@pureadmin/utils";
 import { useEventListener } from "@vueuse/core";
 import type { Directive, DirectiveBinding } from "vue";
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -96,14 +96,14 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span
        class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -113,14 +113,14 @@ nextTick(() => {
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span
        class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -146,14 +146,14 @@ watch(
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span
        class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -333,10 +333,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      setTimeout(() => {
        if (pureSetting.hiddenSideBar) {
          tagsViews[6].icon = ExitFullscreen;
-          tagsViews[6].text = $t("buttons.hscontentExitFullScreen");
+          tagsViews[6].text = $t("buttons.pureContentExitFullScreen");
        } else {
          tagsViews[6].icon = Fullscreen;
-          tagsViews[6].text = $t("buttons.hscontentFullScreen");
+          tagsViews[6].text = $t("buttons.pureContentFullScreen");
        }
      }, 100);
      break;
--- a/src/layout/frameView.vue
+++ b/src/layout/frameView.vue
@@ -71,7 +71,7 @@ onMounted(() => {
  <div
    v-loading="loading"
    class="frame"
-    :element-loading-text="t('status.hsLoad')"
+    :element-loading-text="t('status.pureLoad')"
  >
    <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
  </div>
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -64,49 +64,49 @@ export function useTags() {
  const tagsViews = reactive<Array<tagsViewsType>>([
    {
      icon: RefreshRight,
-      text: $t("buttons.hsreload"),
+      text: $t("buttons.pureReload"),
      divided: false,
      disabled: false,
      show: true
    },
    {
      icon: Close,
-      text: $t("buttons.hscloseCurrentTab"),
+      text: $t("buttons.pureCloseCurrentTab"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: CloseLeftTags,
-      text: $t("buttons.hscloseLeftTabs"),
+      text: $t("buttons.pureCloseLeftTabs"),
      divided: true,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: CloseRightTags,
-      text: $t("buttons.hscloseRightTabs"),
+      text: $t("buttons.pureCloseRightTabs"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: CloseOtherTags,
-      text: $t("buttons.hscloseOtherTabs"),
+      text: $t("buttons.pureCloseOtherTabs"),
      divided: true,
      disabled: multiTags.value.length > 2 ? false : true,
      show: true
    },
    {
      icon: CloseAllTags,
-      text: $t("buttons.hscloseAllTabs"),
+      text: $t("buttons.pureCloseAllTabs"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: Fullscreen,
-      text: $t("buttons.hscontentFullScreen"),
+      text: $t("buttons.pureContentFullScreen"),
      divided: true,
      disabled: false,
      show: true
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -7,7 +7,7 @@ export const routerArrays: Array<RouteConfigs> =
        {
          path: "/welcome",
          meta: {
-            title: "menus.hshome",
+            title: "menus.pureHome",
            icon: "ep:home-filled"
          }
        }
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -6,7 +6,7 @@ export default {
  meta: {
    icon: "ri:information-line",
    // showLink: false,
-    title: $t("menus.hsabnormal"),
+    title: $t("menus.pureAbnormal"),
    rank: 9
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "403",
      component: () => import("@/views/error/403.vue"),
      meta: {
-        title: $t("menus.hsfourZeroOne")
+        title: $t("menus.pureFourZeroOne")
      }
    },
    {
@@ -23,7 +23,7 @@ export default {
      name: "404",
      component: () => import("@/views/error/404.vue"),
      meta: {
-        title: $t("menus.hsfourZeroFour")
+        title: $t("menus.pureFourZeroFour")
      }
    },
    {
@@ -31,7 +31,7 @@ export default {
      name: "500",
      component: () => import("@/views/error/500.vue"),
      meta: {
-        title: $t("menus.hsFive")
+        title: $t("menus.pureFive")
      }
    }
  ]
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -9,7 +9,7 @@ export default {
  redirect: "/welcome",
  meta: {
    icon: "ep:home-filled",
-    title: $t("menus.hshome"),
+    title: $t("menus.pureHome"),
    rank: 0
  },
  children: [
@@ -18,7 +18,7 @@ export default {
      name: "Welcome",
      component: () => import("@/views/welcome/index.vue"),
      meta: {
-        title: $t("menus.hshome"),
+        title: $t("menus.pureHome"),
        showLink: VITE_HIDE_HOME === "true" ? false : true
      }
    }
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -7,7 +7,7 @@ export default [
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    meta: {
-      title: $t("menus.hslogin"),
+      title: $t("menus.pureLogin"),
      showLink: false,
      rank: 101
    }
@@ -16,7 +16,7 @@ export default [
    path: "/redirect",
    component: Layout,
    meta: {
-      title: $t("status.hsLoad"),
+      title: $t("status.pureLoad"),
      showLink: false,
      rank: 102
    },
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -150,7 +150,7 @@ onBeforeUnmount(() => {
                :rules="[
                  {
                    required: true,
-                    message: transformI18n($t('login.usernameReg')),
+                    message: transformI18n($t('login.pureUsernameReg')),
                    trigger: 'blur'
                  }
                ]"
@@ -159,7 +159,7 @@ onBeforeUnmount(() => {
                <el-input
                  v-model="ruleForm.username"
                  clearable
-                  :placeholder="t('login.username')"
+                  :placeholder="t('login.pureUsername')"
                  :prefix-icon="useRenderIcon(User)"
                />
              </el-form-item>
@@ -171,7 +171,7 @@ onBeforeUnmount(() => {
                  v-model="ruleForm.password"
                  clearable
                  show-password
-                  :placeholder="t('login.password')"
+                  :placeholder="t('login.purePassword')"
                  :prefix-icon="useRenderIcon(Lock)"
                />
              </el-form-item>
@@ -185,7 +185,7 @@ onBeforeUnmount(() => {
                :loading="loading"
                @click="onLogin(ruleFormRef)"
              >
-                {{ t("login.login") }}
+                {{ t("login.pureLogin") }}
              </el-button>
            </Motion>
          </el-form>
--- a/src/views/login/utils/rule.ts
+++ b/src/views/login/utils/rule.ts
@@ -12,9 +12,9 @@ const loginRules = reactive(<FormRules>{
    {
      validator: (rule, value, callback) => {
        if (value === "") {
-          callback(new Error(transformI18n($t("login.passwordReg"))));
+          callback(new Error(transformI18n($t("login.purePassWordReg"))));
        } else if (!REGEXP_PWD.test(value)) {
-          callback(new Error(transformI18n($t("login.passwordRuleReg"))));
+          callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
        } else {
          callback();
        }