feat: RePureTableBar与ReVxeTableBar组件实现全量文本国际化 (#1251)

locales/en.yaml

@@ -238,4 +238,18 @@ login:
   purePassWordRuleReg: The password format should be any combination of 8-18 digits
   purePassWordSureReg: Please enter confirm password
   purePassWordDifferentReg: The two passwords do not match!
-  purePassWordUpdateReg: Password has been updated
+  purePassWordUpdateReg: Password has been updated
+tableBar:
+  pureList: List
+  pureLarge: Large
+  pureDefault: Default
+  pureSmall: Small
+  pureColumnSettings: ColumnSettings
+  pureCollapse: Collapse
+  pureExpand: Expand
+  pureRefresh: Refresh
+  pureDensity: Density
+  pureColumnDisplay: ColumnDisplay
+  pureReset: Reset
+  pureExitFullScreen: ExitFullScreen
+  pureFullScreen: FullScreen

locales/zh-CN.yaml

@@ -238,4 +238,18 @@ login:
   purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
   purePassWordSureReg: 请输入确认密码
   purePassWordDifferentReg: 两次密码不一致!
-  purePassWordUpdateReg: 修改密码成功
+  purePassWordUpdateReg: 修改密码成功
+tableBar:
+  pureList: 列表
+  pureLarge: 宽松
+  pureDefault: 默认
+  pureSmall: 紧凑
+  pureColumnSettings: 列设置
+  pureCollapse: 折叠
+  pureExpand: 展开
+  pureRefresh: 刷新
+  pureDensity: 密度
+  pureColumnDisplay: 列展示
+  pureReset: 重置
+  pureExitFullScreen: 退出全屏
+  pureFullScreen: 全屏

src/components/RePureTableBar/src/bar.tsx

@@ -1,5 +1,5 @@
 import Sortable from "sortablejs";
-import { transformI18n } from "@/plugins/i18n";
+import { $t, transformI18n } from "@/plugins/i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import {
   type PropType,
@@ -30,7 +30,7 @@ const props = {
   /** 头部最左边的标题 */
   title: {
     type: String,
-    default: "列表"
+    default: $t("tableBar.pureList")
   },
   /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
   tableRef: {
@@ -169,19 +169,19 @@ export default defineComponent({
             style={getDropdownItemStyle.value("large")}
             onClick={() => (size.value = "large")}
           >
-            宽松
+            {transformI18n($t("tableBar.pureLarge"))}
           </el-dropdown-item>
           <el-dropdown-item
             style={getDropdownItemStyle.value("default")}
             onClick={() => (size.value = "default")}
           >
-            默认
+            {transformI18n($t("tableBar.pureDefault"))}
           </el-dropdown-item>
           <el-dropdown-item
             style={getDropdownItemStyle.value("small")}
             onClick={() => (size.value = "small")}
           >
-            紧凑
+            {transformI18n($t("tableBar.pureSmall"))}
           </el-dropdown-item>
         </el-dropdown-menu>
       )
@@ -245,7 +245,9 @@ export default defineComponent({
       reference: () => (
         <SettingIcon
           class={["w-[16px]", iconClass.value]}
-          v-tippy={rendTippyProps("列设置")}
+          v-tippy={rendTippyProps(
+            transformI18n($t("tableBar.pureColumnSettings"))
+          )}
         />
       )
     };
@@ -268,7 +270,7 @@ export default defineComponent({
             {slots?.title ? (
               slots.title()
             ) : (
-              <p class="font-bold truncate">{props.title}</p>
+              <p class="font-bold truncate">{transformI18n(props.title)}</p>
             )}
             <div class="flex items-center justify-around">
               {slots?.buttons ? (
@@ -282,7 +284,9 @@ export default defineComponent({
                       transform: isExpandAll.value ? "none" : "rotate(-90deg)"
                     }}
                     v-tippy={rendTippyProps(
-                      isExpandAll.value ? "折叠" : "展开"
+                      isExpandAll.value
+                        ? transformI18n($t("tableBar.pureCollapse"))
+                        : transformI18n($t("tableBar.pureExpand"))
                     )}
                     onClick={() => onExpand()}
                   />
@@ -295,14 +299,18 @@ export default defineComponent({
                   iconClass.value,
                   loading.value ? "animate-spin" : ""
                 ]}
-                v-tippy={rendTippyProps("刷新")}
+                v-tippy={rendTippyProps(
+                  transformI18n($t("tableBar.pureRefresh"))
+                )}
                 onClick={() => onReFresh()}
               />
               <el-divider direction="vertical" />
               <el-dropdown
                 v-slots={dropdown}
                 trigger="click"
-                v-tippy={rendTippyProps("密度")}
+                v-tippy={rendTippyProps(
+                  transformI18n($t("tableBar.pureDensity"))
+                )}
               >
                 <CollapseIcon class={["w-[16px]", iconClass.value]} />
               </el-dropdown>
@@ -318,13 +326,13 @@ export default defineComponent({
                 <div class={[topClass.value]}>
                   <el-checkbox
                     class="-mr-1!"
-                    label="列展示"
+                    label={transformI18n($t("tableBar.pureColumnDisplay"))}
                     v-model={checkAll.value}
                     indeterminate={isIndeterminate.value}
                     onChange={value => handleCheckAllChange(value)}
                   />
                   <el-button type="primary" link onClick={() => onReset()}>
-                    重置
+                    {transformI18n($t("tableBar.pureReset"))}
                   </el-button>
                 </div>
 
@@ -382,7 +390,11 @@ export default defineComponent({
               <iconifyIconOffline
                 class={["w-[16px]", iconClass.value]}
                 icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
-                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                v-tippy={
+                  isFullscreen.value
+                    ? transformI18n($t("tableBar.pureExitFullScreen"))
+                    : transformI18n($t("tableBar.pureFullScreen"))
+                }
                 onClick={() => onFullscreen()}
               />
             </div>

src/components/ReVxeTableBar/src/bar.tsx

@@ -1,5 +1,5 @@
 import Sortable from "sortablejs";
-import { transformI18n } from "@/plugins/i18n";
+import { $t, transformI18n } from "@/plugins/i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { delay, cloneDeep, getKeyList } from "@pureadmin/utils";
 import {
@@ -24,7 +24,7 @@ const props = {
   /** 头部最左边的标题 */
   title: {
     type: String,
-    default: "列表"
+    default: $t("tableBar.pureList")
   },
   vxeTableRef: {
     type: Object as PropType<any>
@@ -161,19 +161,19 @@ export default defineComponent({
             style={getDropdownItemStyle.value("medium")}
             onClick={() => changeSize("medium")}
           >
-            宽松
+            {transformI18n($t("tableBar.pureLarge"))}
           </el-dropdown-item>
           <el-dropdown-item
             style={getDropdownItemStyle.value("small")}
             onClick={() => changeSize("small")}
           >
-            默认
+            {transformI18n($t("tableBar.pureDefault"))}
           </el-dropdown-item>
           <el-dropdown-item
             style={getDropdownItemStyle.value("mini")}
             onClick={() => changeSize("mini")}
           >
-            紧凑
+            {transformI18n($t("tableBar.pureSmall"))}
           </el-dropdown-item>
         </el-dropdown-menu>
       )
@@ -238,7 +238,9 @@ export default defineComponent({
       reference: () => (
         <SettingIcon
           class={["w-[16px]", iconClass.value]}
-          v-tippy={rendTippyProps("列设置")}
+          v-tippy={rendTippyProps(
+            transformI18n($t("tableBar.pureColumnSettings"))
+          )}
         />
       )
     };
@@ -261,7 +263,7 @@ export default defineComponent({
             {slots?.title ? (
               slots.title()
             ) : (
-              <p class="font-bold truncate">{props.title}</p>
+              <p class="font-bold truncate">{transformI18n(props.title)}</p>
             )}
             <div class="flex items-center justify-around">
               {slots?.buttons ? (
@@ -275,7 +277,9 @@ export default defineComponent({
                       transform: isExpandAll.value ? "none" : "rotate(-90deg)"
                     }}
                     v-tippy={rendTippyProps(
-                      isExpandAll.value ? "折叠" : "展开"
+                      isExpandAll.value
+                        ? transformI18n($t("tableBar.pureCollapse"))
+                        : transformI18n($t("tableBar.pureExpand"))
                     )}
                     onClick={() => onExpand()}
                   />
@@ -288,14 +292,18 @@ export default defineComponent({
                   iconClass.value,
                   loading.value ? "animate-spin" : ""
                 ]}
-                v-tippy={rendTippyProps("刷新")}
+                v-tippy={rendTippyProps(
+                  transformI18n($t("tableBar.pureRefresh"))
+                )}
                 onClick={() => onReFresh()}
               />
               <el-divider direction="vertical" />
               <el-dropdown
                 v-slots={dropdown}
                 trigger="click"
-                v-tippy={rendTippyProps("密度")}
+                v-tippy={rendTippyProps(
+                  transformI18n($t("tableBar.pureDensity"))
+                )}
               >
                 <CollapseIcon class={["w-[16px]", iconClass.value]} />
               </el-dropdown>
@@ -311,13 +319,13 @@ export default defineComponent({
                 <div class={[topClass.value]}>
                   <el-checkbox
                     class="-mr-1!"
-                    label="列展示"
+                    label={transformI18n($t("tableBar.pureColumnDisplay"))}
                     v-model={checkAll.value}
                     indeterminate={isIndeterminate.value}
                     onChange={value => handleCheckAllChange(value)}
                   />
                   <el-button type="primary" link onClick={() => onReset()}>
-                    重置
+                    {transformI18n($t("tableBar.pureReset"))}
                   </el-button>
                 </div>
 
@@ -373,7 +381,11 @@ export default defineComponent({
               <iconifyIconOffline
                 class={["w-[16px]", iconClass.value]}
                 icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
-                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                v-tippy={
+                  isFullscreen.value
+                    ? transformI18n($t("tableBar.pureExitFullScreen"))
+                    : transformI18n($t("tableBar.pureFullScreen"))
+                }
                 onClick={() => onFullscreen()}
               />
             </div>

src/layout/components/lay-navbar/index.vue

@@ -53,9 +53,11 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <GlobalizationIcon
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+        <div
+          class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+        >
+          <IconifyIconOffline :icon="GlobalizationIcon" />
+        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -113,7 +115,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover"
+        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >

src/layout/components/lay-notice/index.vue

@@ -3,15 +3,12 @@ import { useI18n } from "vue-i18n";
 import { ref, computed } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./components/NoticeList.vue";
-import BellIcon from "~icons/ep/bell";
+import BellIcon from "~icons/lucide/bell";
 
 const { t } = useI18n();
-const noticesNum = ref(0);
 const notices = ref(noticesData);
 const activeKey = ref(noticesData[0]?.key);
 
-notices.value.map(v => (noticesNum.value += v.list.length));
-
 const getLabel = computed(
   () => item =>
     t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
@@ -21,14 +18,9 @@ const getLabel = computed(
 <template>
   <el-dropdown trigger="click" placement="bottom-end">
     <span
-      :class="[
-        'dropdown-badge',
-        'navbar-bg-hover',
-        'select-none',
-        Number(noticesNum) !== 0 && 'mr-[10px]'
-      ]"
+      :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', 'mr-[7px]']"
     >
-      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
+      <el-badge is-dot>
         <span class="header-notice-icon">
           <IconifyIconOffline :icon="BellIcon" />
         </span>
@@ -65,6 +57,34 @@ const getLabel = computed(
 </template>
 
 <style lang="scss" scoped>
+/* ”铃铛“摇晃衰减动画 */
+@keyframes pure-bell-ring {
+  0%,
+  100% {
+    transform-origin: top;
+  }
+
+  15% {
+    transform: rotateZ(10deg);
+  }
+
+  30% {
+    transform: rotateZ(-10deg);
+  }
+
+  45% {
+    transform: rotateZ(5deg);
+  }
+
+  60% {
+    transform: rotateZ(-5deg);
+  }
+
+  75% {
+    transform: rotateZ(2deg);
+  }
+}
+
 .dropdown-badge {
   display: flex;
   align-items: center;
@@ -74,7 +94,13 @@ const getLabel = computed(
   cursor: pointer;
 
   .header-notice-icon {
-    font-size: 18px;
+    font-size: 16px;
+  }
+
+  &:hover {
+    .header-notice-icon svg {
+      animation: pure-bell-ring 1s both;
+    }
   }
 }
 

src/layout/components/lay-search/index.vue

@@ -11,7 +11,7 @@ function handleSearch() {
 <template>
   <div>
     <div
-      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
       @click="handleSearch"
     >
       <IconifyIconOffline icon="ri/search-line" />

src/layout/components/lay-setting/index.vue

@@ -345,8 +345,8 @@ onUnmounted(() => removeMatchMedia);
           @click="setLayoutThemeColor(item.themeColor)"
         >
           <el-icon
-            style="margin: 0.1em 0.1em 0 0"
-            :size="17"
+            class="mt-px"
+            :size="20"
             :color="getThemeColor(item.themeColor)"
           >
             <IconifyIconOffline :icon="Check" />
@@ -538,17 +538,24 @@ onUnmounted(() => removeMatchMedia);
 }
 
 .theme-color {
-  height: 20px;
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
 
   li {
-    float: left;
-    height: 20px;
-    margin-right: 8px;
+    position: relative;
+    width: 21px;
+    height: 21px;
     cursor: pointer;
     border-radius: 4px;
+    box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+    transition: all 0.2s ease;
 
-    &:nth-child(1) {
-      border: 1px solid #ddd;
+    &:hover {
+      box-shadow:
+        rgb(0 0 0 / 25%) 0 0 0 1px inset,
+        0 2px 4px rgb(0 0 0 / 15%);
+      transform: scale(1.1);
     }
   }
 }

src/layout/components/lay-sidebar/NavHorizontal.vue

@@ -83,9 +83,11 @@ onMounted(() => {
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <GlobalizationIcon
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+        <div
+          class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+        >
+          <IconifyIconOffline :icon="GlobalizationIcon" />
+        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -141,7 +143,7 @@ onMounted(() => {
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover"
+        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >

src/layout/components/lay-sidebar/NavMix.vue

@@ -104,9 +104,11 @@ watch(
       <LaySearch id="header-search" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <GlobalizationIcon
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
+        <div
+          class="globalization-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+        >
+          <IconifyIconOffline :icon="GlobalizationIcon" />
+        </div>
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
@@ -162,7 +164,7 @@ watch(
         </template>
       </el-dropdown>
       <span
-        class="set-icon navbar-bg-hover"
+        class="set-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
         :title="t('buttons.pureOpenSystemSet')"
         @click="onPanel"
       >

src/layout/components/lay-sidebar/components/SidebarFullScreen.vue

@@ -24,7 +24,10 @@ watch(
 </script>
 
 <template>
-  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
+  <span
+    class="fullscreen-icon navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+    @click="toggle"
+  >
     <IconifyIconOffline :icon="screenIcon" />
   </span>
 </template>

src/style/index.scss

@@ -35,3 +35,18 @@
 .html-weakness {
   filter: invert(80%);
 }
+
+/* 轻微缩小，再恢复原状的平滑缩放动画 */
+@keyframes pure-scale-bounce {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

src/style/sidebar.scss

@@ -34,12 +34,14 @@
   }
 
   .set-icon,
-  .fullscreen-icon {
+  .fullscreen-icon,
+  .globalization-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 48px;
+    font-size: 16px;
     cursor: pointer;
   }
 
@@ -449,7 +451,7 @@
       /* 搜索 */
       .search-container,
       /* 国际化 */
-      .globalization,
+      .globalization-icon,
       /* 全屏 */
       .fullscreen-icon,
       /* 消息通知 */
@@ -468,15 +470,6 @@
         color: var(--pure-theme-sub-menu-active-text);
       }
 
-      .globalization {
-        width: 40px;
-        height: 48px;
-        padding: 11px;
-        color: var(--pure-theme-sub-menu-active-text);
-        cursor: pointer;
-        outline: none;
-      }
-
       .el-dropdown-link {
         display: flex;
         align-items: center;
@@ -630,7 +623,7 @@ body[layout="vertical"] {
   /* 搜索 */
   .search-container,
   /* 国际化 */
-  .globalization,
+  .globalization-icon,
   /* 全屏 */
   .fullscreen-icon,
   /* 消息通知 */

src/style/tailwind.css

@@ -44,3 +44,7 @@
 @utility navbar-bg-hover {
   @apply dark:text-white dark:hover:bg-[#242424]!;
 }
+
+@utility animate-scale-bounce {
+  animation: pure-scale-bounce 0.3s ease-in-out;
+}