mirror of
https://gitee.com/yiming_chang/vue-pure-admin.git
synced 2024-11-29 17:57:37 +08:00
perf: 框架核心代码国际化全量覆盖(仅需处理业务代码国际化即可) (#1082)
This commit is contained in:
parent
d1d2bcaa11
commit
a402d33b89
@ -41,7 +41,7 @@
|
||||
- 修复`windwos`下点击注册页面会出现滚动条问题
|
||||
- 修复`windows`下页面切换,内容区会出现滚动条问题
|
||||
- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
|
||||
- 修复项目配置中开启灰色模式和深色整体风格,刷新页面整体风格异常
|
||||
- 修复系统配置中开启灰色模式和深色整体风格,刷新页面整体风格异常
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
- 所有`search`搜索图标统一替换为`@iconify-icons/ri/search-line`它比较常用将其放入全局离线图标中
|
||||
- 移除`iframe`在暗模式下的滤镜效果
|
||||
- 带来更美观精致的首页
|
||||
- 更干净整洁的项目配置右侧弹出面板
|
||||
- 更干净整洁的系统配置右侧弹出面板
|
||||
- 重构关于页面,整体更紧致,关键信息更突出
|
||||
|
||||
### 🎫 Feat
|
||||
|
@ -2,7 +2,7 @@ buttons:
|
||||
pureAccountSettings: Account
|
||||
pureLoginOut: LoginOut
|
||||
pureLogin: Login
|
||||
pureSystemSet: Open ProjectConfig
|
||||
pureOpenSystemSet: Open System Configs
|
||||
pureReload: Reload
|
||||
pureCloseCurrentTab: Close CurrentTab
|
||||
pureCloseLeftTabs: Close LeftTabs
|
||||
@ -11,6 +11,54 @@ buttons:
|
||||
pureCloseAllTabs: Close AllTabs
|
||||
pureContentFullScreen: Content FullScreen
|
||||
pureContentExitFullScreen: Content ExitFullScreen
|
||||
pureClickCollapse: Collapse
|
||||
pureClickExpand: Expand
|
||||
pureConfirm: Confirm
|
||||
pureSwitch: Switch
|
||||
pureClose: Close
|
||||
pureBackTop: BackTop
|
||||
pureOpenText: Open
|
||||
pureCloseText: Close
|
||||
search:
|
||||
pureTotal: Total
|
||||
pureHistory: History
|
||||
pureCollect: Collect
|
||||
pureDragSort: (Drag Sort)
|
||||
pureEmpty: Empty
|
||||
purePlaceholder: Search Menu
|
||||
panel:
|
||||
pureSystemSet: System Configs
|
||||
pureCloseSystemSet: Close System Configs
|
||||
pureClearCacheAndToLogin: Clear cache and return to login page
|
||||
pureClearCache: Clear Cache
|
||||
pureOverallStyle: Overall Style
|
||||
pureOverallStyleLight: Light
|
||||
pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
|
||||
pureOverallStyleDark: Dark
|
||||
pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
|
||||
pureOverallStyleSystem: Auto
|
||||
pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
|
||||
pureThemeColor: Theme Color
|
||||
pureLayoutModel: Layout Model
|
||||
pureVerticalTip: The menu on the left is familiar and friendly
|
||||
pureHorizontalTip: Top menu, concise overview
|
||||
pureMixTip: Mixed menu, flexible
|
||||
pureStretch: Stretch Page
|
||||
pureStretchFixed: Fixed
|
||||
pureStretchFixedTip: Compact pages make it easy to find the information you need
|
||||
pureStretchCustom: Custom
|
||||
pureStretchCustomTip: Minimum 1280, maximum 1600
|
||||
pureTagsStyle: Tags Style
|
||||
pureTagsStyleSmart: Smart
|
||||
pureTagsStyleSmartTip: Smart tags add fun and brilliance
|
||||
pureTagsStyleCard: Card
|
||||
pureTagsStyleCardTip: Card tags for efficient browsing
|
||||
pureInterfaceDisplay: Interface Display
|
||||
pureGreyModel: Grey Model
|
||||
pureWeakModel: Weak Model
|
||||
pureHiddenTags: Hidden Tags
|
||||
pureHiddenFooter: Hidden Footer
|
||||
pureMultiTagsCache: MultiTags Cache
|
||||
menus:
|
||||
pureHome: Home
|
||||
pureLogin: Login
|
||||
@ -136,6 +184,7 @@ menus:
|
||||
pureChildMenuOverflow: Child Menu Overflow Show Tooltip Text
|
||||
status:
|
||||
pureLoad: Loading...
|
||||
pureNoMessage: No Message
|
||||
login:
|
||||
pureUsername: Username
|
||||
purePassword: Password
|
||||
@ -160,6 +209,7 @@ login:
|
||||
pureTip: After scanning the code, click "Confirm" to complete the login
|
||||
pureDefinite: Definite
|
||||
pureLoginSuccess: Login Success
|
||||
pureLoginFail: Login Fail
|
||||
pureRegisterSuccess: Regist Success
|
||||
pureTickPrivacy: Please tick Privacy Policy
|
||||
pureReadAccept: I have read it carefully and accept
|
||||
|
@ -2,7 +2,7 @@ buttons:
|
||||
pureAccountSettings: 账户设置
|
||||
pureLoginOut: 退出系统
|
||||
pureLogin: 登录
|
||||
pureSystemSet: 打开项目配置
|
||||
pureOpenSystemSet: 打开系统配置
|
||||
pureReload: 重新加载
|
||||
pureCloseCurrentTab: 关闭当前标签页
|
||||
pureCloseLeftTabs: 关闭左侧标签页
|
||||
@ -11,6 +11,54 @@ buttons:
|
||||
pureCloseAllTabs: 关闭全部标签页
|
||||
pureContentFullScreen: 内容区全屏
|
||||
pureContentExitFullScreen: 内容区退出全屏
|
||||
pureClickCollapse: 点击折叠
|
||||
pureClickExpand: 点击展开
|
||||
pureConfirm: 确认
|
||||
pureSwitch: 切换
|
||||
pureClose: 关闭
|
||||
pureBackTop: 回到顶部
|
||||
pureOpenText: 开
|
||||
pureCloseText: 关
|
||||
search:
|
||||
pureTotal: 共
|
||||
pureHistory: 搜索历史
|
||||
pureCollect: 收藏
|
||||
pureDragSort: (可拖拽排序)
|
||||
pureEmpty: 暂无搜索结果
|
||||
purePlaceholder: 搜索菜单(支持拼音搜索)
|
||||
panel:
|
||||
pureSystemSet: 系统配置
|
||||
pureCloseSystemSet: 关闭配置
|
||||
pureClearCacheAndToLogin: 清空缓存并返回登录页
|
||||
pureClearCache: 清空缓存
|
||||
pureOverallStyle: 整体风格
|
||||
pureOverallStyleLight: 浅色
|
||||
pureOverallStyleLightTip: 清新启航,点亮舒适的工作界面
|
||||
pureOverallStyleDark: 深色
|
||||
pureOverallStyleDarkTip: 月光序曲,沉醉于夜的静谧雅致
|
||||
pureOverallStyleSystem: 自动
|
||||
pureOverallStyleSystemTip: 同步时光,界面随晨昏自然呼应
|
||||
pureThemeColor: 主题色
|
||||
pureLayoutModel: 导航模式
|
||||
pureVerticalTip: 左侧菜单,亲切熟悉
|
||||
pureHorizontalTip: 顶部菜单,简洁概览
|
||||
pureMixTip: 混合菜单,灵活多变
|
||||
pureStretch: 页宽
|
||||
pureStretchFixed: 固定
|
||||
pureStretchFixedTip: 紧凑页面,轻松找到所需信息
|
||||
pureStretchCustom: 自定义
|
||||
pureStretchCustomTip: 最小1280、最大1600
|
||||
pureTagsStyle: 页签风格
|
||||
pureTagsStyleSmart: 灵动
|
||||
pureTagsStyleSmartTip: 灵动标签,添趣生辉
|
||||
pureTagsStyleCard: 卡片
|
||||
pureTagsStyleCardTip: 卡片标签,高效浏览
|
||||
pureInterfaceDisplay: 界面显示
|
||||
pureGreyModel: 灰色模式
|
||||
pureWeakModel: 色弱模式
|
||||
pureHiddenTags: 隐藏标签页
|
||||
pureHiddenFooter: 隐藏页脚
|
||||
pureMultiTagsCache: 页签持久化
|
||||
menus:
|
||||
pureHome: 首页
|
||||
pureLogin: 登录
|
||||
@ -136,6 +184,7 @@ menus:
|
||||
pureChildMenuOverflow: 菜单超出显示 Tooltip 文字提示
|
||||
status:
|
||||
pureLoad: 加载中...
|
||||
pureNoMessage: 暂无消息
|
||||
login:
|
||||
pureUsername: 账号
|
||||
purePassword: 密码
|
||||
@ -160,6 +209,7 @@ login:
|
||||
pureTip: 扫码后点击"确认",即可完成登录
|
||||
pureDefinite: 确定
|
||||
pureLoginSuccess: 登录成功
|
||||
pureLoginFail: 登录失败
|
||||
pureRegisterSuccess: 注册成功
|
||||
pureTickPrivacy: 请勾选隐私政策
|
||||
pureReadAccept: 我已仔细阅读并接受
|
||||
@ -176,4 +226,4 @@ login:
|
||||
purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
|
||||
purePassWordSureReg: 请输入确认密码
|
||||
purePassWordDifferentReg: 两次密码不一致!
|
||||
purePassWordUpdateReg: 修改密码成功
|
||||
purePassWordUpdateReg: 修改密码成功
|
||||
|
@ -5,7 +5,7 @@ export type UserResult = {
|
||||
data: {
|
||||
/** 用户名 */
|
||||
username: string;
|
||||
/** 当前登陆用户的角色 */
|
||||
/** 当前登录用户的角色 */
|
||||
roles: Array<string>;
|
||||
/** `token` */
|
||||
accessToken: string;
|
||||
|
@ -42,6 +42,11 @@ const props = {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 当内容发生变化时,设置 `resize` 可使其自适应容器位置 */
|
||||
resize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
};
|
||||
|
||||
@ -108,7 +113,7 @@ export default defineComponent({
|
||||
});
|
||||
}
|
||||
|
||||
props.block && handleResizeInit();
|
||||
(props.block || props.resize) && handleResizeInit();
|
||||
|
||||
watch(
|
||||
() => curIndex.value,
|
||||
|
@ -35,7 +35,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
|
||||
})
|
||||
.then(({ data: config }) => {
|
||||
let $config = app.config.globalProperties.$config;
|
||||
// 自动注入项目配置
|
||||
// 自动注入系统配置
|
||||
if (app && $config && typeof config === "object") {
|
||||
$config = Object.assign($config, config);
|
||||
app.config.globalProperties.$config = $config;
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Footer from "./footer/index.vue";
|
||||
import { useGlobal, isNumber } from "@pureadmin/utils";
|
||||
import KeepAliveFrame from "./keepAliveFrame/index.vue";
|
||||
@ -10,6 +11,7 @@ const props = defineProps({
|
||||
fixedHeader: Boolean
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const isKeepAlive = computed(() => {
|
||||
@ -121,7 +123,7 @@ const transitionMain = defineComponent({
|
||||
}"
|
||||
>
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
:title="t('buttons.pureBackTop')"
|
||||
target=".app-main .el-scrollbar__wrap"
|
||||
>
|
||||
<backTop />
|
||||
|
@ -113,7 +113,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureSystemSet')"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
|
@ -1,9 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { noticesData } from "./data";
|
||||
import NoticeList from "./noticeList.vue";
|
||||
import Bell from "@iconify-icons/ep/bell";
|
||||
|
||||
const { t } = useI18n();
|
||||
const noticesNum = ref(0);
|
||||
const notices = ref(noticesData);
|
||||
const activeKey = ref(noticesData[0].key);
|
||||
@ -30,7 +32,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
|
||||
>
|
||||
<el-empty
|
||||
v-if="notices.length === 0"
|
||||
description="暂无消息"
|
||||
:description="t('status.pureNoMessage')"
|
||||
:image-size="60"
|
||||
/>
|
||||
<span v-else>
|
||||
|
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType } from "vue";
|
||||
import { ListItem } from "./data";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import NoticeItem from "./noticeItem.vue";
|
||||
|
||||
const props = defineProps({
|
||||
@ -9,6 +10,8 @@ const props = defineProps({
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -19,5 +22,5 @@ const props = defineProps({
|
||||
:noticeItem="item"
|
||||
/>
|
||||
</div>
|
||||
<el-empty v-else description="暂无消息" />
|
||||
<el-empty v-else :description="t('status.pureNoMessage')" />
|
||||
</template>
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
@ -25,6 +26,7 @@ const iconClass = computed(() => {
|
||||
];
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { onReset } = useDataThemeChange();
|
||||
|
||||
onClickOutside(target, (event: any) => {
|
||||
@ -51,10 +53,12 @@ onBeforeUnmount(() => {
|
||||
<div
|
||||
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
|
||||
>
|
||||
<h4 class="dark:text-white">项目配置</h4>
|
||||
<h4 class="dark:text-white">
|
||||
{{ t("panel.pureSystemSet") }}
|
||||
</h4>
|
||||
<span
|
||||
v-tippy="{
|
||||
content: '关闭配置',
|
||||
content: t('panel.pureCloseSystemSet'),
|
||||
placement: 'bottom-start',
|
||||
zIndex: 41000
|
||||
}"
|
||||
@ -78,7 +82,7 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
<el-button
|
||||
v-tippy="{
|
||||
content: '清空缓存并返回登录页',
|
||||
content: t('panel.pureClearCacheAndToLogin'),
|
||||
placement: 'left-start',
|
||||
zIndex: 41000
|
||||
}"
|
||||
@ -87,7 +91,7 @@ onBeforeUnmount(() => {
|
||||
bg
|
||||
@click="onReset"
|
||||
>
|
||||
清空缓存
|
||||
{{ t("panel.pureClearCache") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
|
||||
import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
|
||||
@ -9,6 +10,7 @@ const props = withDefaults(defineProps<{ total: number }>(), {
|
||||
total: 0
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { device } = useNav();
|
||||
</script>
|
||||
|
||||
@ -16,22 +18,22 @@ const { device } = useNav();
|
||||
<div class="search-footer text-[#333] dark:text-white">
|
||||
<span class="search-footer-item">
|
||||
<enterOutlined class="icon" />
|
||||
确认
|
||||
{{ t("buttons.pureConfirm") }}
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<IconifyIconOffline :icon="ArrowUpLine" class="icon" />
|
||||
<IconifyIconOffline :icon="ArrowDownLine" class="icon" />
|
||||
切换
|
||||
{{ t("buttons.pureSwitch") }}
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<mdiKeyboardEsc class="icon" />
|
||||
关闭
|
||||
{{ t("buttons.pureClose") }}
|
||||
</span>
|
||||
<p
|
||||
v-if="device !== 'mobile' && props.total > 0"
|
||||
class="search-footer-total"
|
||||
>
|
||||
共{{ props.total }}项
|
||||
{{ `${t("search.pureTotal")} ${props.total}` }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import Sortable from "sortablejs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import SearchHistoryItem from "./SearchHistoryItem.vue";
|
||||
import type { optionsItem, dragItem, Props } from "../types";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
@ -19,6 +20,7 @@ const innerHeight = ref();
|
||||
/** 判断是否停止鼠标移入事件处理 */
|
||||
const stopMouseEvent = ref(false);
|
||||
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits<Emits>();
|
||||
const instance = getCurrentInstance()!;
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
@ -141,7 +143,9 @@ defineExpose({ handleScroll });
|
||||
<template>
|
||||
<div ref="historyRef" class="history">
|
||||
<template v-if="historyList.length">
|
||||
<div :style="titleStyle">搜索历史</div>
|
||||
<div :style="titleStyle">
|
||||
{{ t("search.pureHistory") }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in historyList"
|
||||
:key="item.path"
|
||||
@ -160,7 +164,9 @@ defineExpose({ handleScroll });
|
||||
</template>
|
||||
<template v-if="collectList.length">
|
||||
<div :style="titleStyle">
|
||||
收藏{{ collectList.length > 1 ? "(可拖拽排序)" : "" }}
|
||||
{{
|
||||
`${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
|
||||
}}
|
||||
</div>
|
||||
<div class="collect-container">
|
||||
<div
|
||||
|
@ -6,8 +6,8 @@ import { useRouter } from "vue-router";
|
||||
import SearchResult from "./SearchResult.vue";
|
||||
import SearchFooter from "./SearchFooter.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import SearchHistory from "./SearchHistory.vue";
|
||||
import { transformI18n, $t } from "@/plugins/i18n";
|
||||
import type { optionsItem, dragItem } from "../types";
|
||||
import { ref, computed, shallowRef, watch } from "vue";
|
||||
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
|
||||
@ -29,7 +29,7 @@ const emit = defineEmits<Emits>();
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const HISTORY_TYPE = "history";
|
||||
const COLLECT_TYPE = "collect";
|
||||
@ -293,7 +293,7 @@ onKeyStroke("ArrowDown", handleDown);
|
||||
v-model="keyword"
|
||||
size="large"
|
||||
clearable
|
||||
placeholder="搜索菜单(中文模式下支持拼音搜索)"
|
||||
:placeholder="t('search.purePlaceholder')"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
@ -305,7 +305,7 @@ onKeyStroke("ArrowDown", handleDown);
|
||||
</el-input>
|
||||
<div class="search-content">
|
||||
<el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
|
||||
<el-empty v-if="showEmpty" description="暂无搜索结果" />
|
||||
<el-empty v-if="showEmpty" :description="t('search.pureEmpty')" />
|
||||
<SearchHistory
|
||||
v-if="showSearchHistory"
|
||||
ref="historyRef"
|
||||
|
@ -9,6 +9,7 @@ import {
|
||||
onUnmounted,
|
||||
onBeforeMount
|
||||
} from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import panel from "../panel/index.vue";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
@ -26,6 +27,7 @@ import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import systemIcon from "@/assets/svg/system.svg?component";
|
||||
|
||||
const { t } = useI18n();
|
||||
const { device } = useNav();
|
||||
const { isDark } = useDark();
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
@ -145,18 +147,20 @@ function setFalse(Doms): any {
|
||||
}
|
||||
|
||||
/** 页宽 */
|
||||
const stretchTypeOptions: Array<OptionsType> = [
|
||||
{
|
||||
label: "固定",
|
||||
tip: "紧凑页面,轻松找到所需信息",
|
||||
value: "fixed"
|
||||
},
|
||||
{
|
||||
label: "自定义",
|
||||
tip: "最小1280、最大1600",
|
||||
value: "custom"
|
||||
}
|
||||
];
|
||||
const stretchTypeOptions = computed<Array<OptionsType>>(() => {
|
||||
return [
|
||||
{
|
||||
label: t("panel.pureStretchFixed"),
|
||||
tip: t("panel.pureStretchFixedTip"),
|
||||
value: "fixed"
|
||||
},
|
||||
{
|
||||
label: t("panel.pureStretchCustom"),
|
||||
tip: t("panel.pureStretchCustomTip"),
|
||||
value: "custom"
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
const setStretch = value => {
|
||||
settings.stretch = value;
|
||||
@ -194,41 +198,43 @@ const pClass = computed(() => {
|
||||
const themeOptions = computed<Array<OptionsType>>(() => {
|
||||
return [
|
||||
{
|
||||
label: "浅色",
|
||||
label: t("panel.pureOverallStyleLight"),
|
||||
icon: dayIcon,
|
||||
theme: "light",
|
||||
tip: "清新启航,点亮舒适的工作界面",
|
||||
tip: t("panel.pureOverallStyleLightTip"),
|
||||
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
|
||||
},
|
||||
{
|
||||
label: "深色",
|
||||
label: t("panel.pureOverallStyleDark"),
|
||||
icon: darkIcon,
|
||||
theme: "dark",
|
||||
tip: "月光序曲,沉醉于夜的静谧雅致",
|
||||
tip: t("panel.pureOverallStyleDarkTip"),
|
||||
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
|
||||
},
|
||||
{
|
||||
label: "自动",
|
||||
label: t("panel.pureOverallStyleSystem"),
|
||||
icon: systemIcon,
|
||||
theme: "system",
|
||||
tip: "同步时光,界面随晨昏自然呼应",
|
||||
tip: t("panel.pureOverallStyleSystemTip"),
|
||||
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
const markOptions: Array<OptionsType> = [
|
||||
{
|
||||
label: "灵动",
|
||||
tip: "灵动标签,添趣生辉",
|
||||
value: "smart"
|
||||
},
|
||||
{
|
||||
label: "卡片",
|
||||
tip: "卡片标签,高效浏览",
|
||||
value: "card"
|
||||
}
|
||||
];
|
||||
const markOptions = computed<Array<OptionsType>>(() => {
|
||||
return [
|
||||
{
|
||||
label: t("panel.pureTagsStyleSmart"),
|
||||
tip: t("panel.pureTagsStyleSmartTip"),
|
||||
value: "smart"
|
||||
},
|
||||
{
|
||||
label: t("panel.pureTagsStyleCard"),
|
||||
tip: t("panel.pureTagsStyleCardTip"),
|
||||
value: "card"
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
/** 设置导航模式 */
|
||||
function setLayoutModel(layout: string) {
|
||||
@ -291,7 +297,7 @@ function watchSystemThemeChange() {
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
/* 初始化项目配置 */
|
||||
/* 初始化系统配置 */
|
||||
nextTick(() => {
|
||||
watchSystemThemeChange();
|
||||
settings.greyVal &&
|
||||
@ -309,8 +315,9 @@ onUnmounted(() => removeMatchMedia);
|
||||
<template>
|
||||
<panel>
|
||||
<div class="p-5">
|
||||
<p :class="pClass">整体风格</p>
|
||||
<p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
|
||||
<Segmented
|
||||
resize
|
||||
class="select-none"
|
||||
:modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
|
||||
:options="themeOptions"
|
||||
@ -326,7 +333,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
"
|
||||
/>
|
||||
|
||||
<p :class="['mt-5', pClass]">主题色</p>
|
||||
<p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
|
||||
<ul class="theme-color">
|
||||
<li
|
||||
v-for="(item, index) in themeColors"
|
||||
@ -345,12 +352,12 @@ onUnmounted(() => removeMatchMedia);
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p :class="['mt-5', pClass]">导航模式</p>
|
||||
<p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
|
||||
<ul class="pure-theme">
|
||||
<li
|
||||
ref="verticalRef"
|
||||
v-tippy="{
|
||||
content: '左侧菜单,亲切熟悉',
|
||||
content: t('panel.pureVerticalTip'),
|
||||
zIndex: 41000
|
||||
}"
|
||||
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
|
||||
@ -363,7 +370,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
v-if="device !== 'mobile'"
|
||||
ref="horizontalRef"
|
||||
v-tippy="{
|
||||
content: '顶部菜单,简洁概览',
|
||||
content: t('panel.pureHorizontalTip'),
|
||||
zIndex: 41000
|
||||
}"
|
||||
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
|
||||
@ -376,7 +383,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
v-if="device !== 'mobile'"
|
||||
ref="mixRef"
|
||||
v-tippy="{
|
||||
content: '混合菜单,灵活多变',
|
||||
content: t('panel.pureMixTip'),
|
||||
zIndex: 41000
|
||||
}"
|
||||
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
|
||||
@ -388,8 +395,9 @@ onUnmounted(() => removeMatchMedia);
|
||||
</ul>
|
||||
|
||||
<span v-if="useAppStoreHook().getViewportWidth > 1280">
|
||||
<p :class="['mt-5', pClass]">页宽</p>
|
||||
<p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
|
||||
<Segmented
|
||||
resize
|
||||
class="mb-2 select-none"
|
||||
:modelValue="isNumber(settings.stretch) ? 1 : 0"
|
||||
:options="stretchTypeOptions"
|
||||
@ -430,53 +438,56 @@ onUnmounted(() => removeMatchMedia);
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<p :class="['mt-4', pClass]">页签风格</p>
|
||||
<p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
|
||||
<Segmented
|
||||
resize
|
||||
class="select-none"
|
||||
:modelValue="markValue === 'smart' ? 0 : 1"
|
||||
:options="markOptions"
|
||||
@change="onChange"
|
||||
/>
|
||||
|
||||
<p class="mt-5 font-medium text-sm dark:text-white">界面显示</p>
|
||||
<p class="mt-5 font-medium text-sm dark:text-white">
|
||||
{{ t("panel.pureInterfaceDisplay") }}
|
||||
</p>
|
||||
<ul class="setting">
|
||||
<li>
|
||||
<span class="dark:text-white">灰色模式</span>
|
||||
<span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.greyVal"
|
||||
inline-prompt
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
@change="greyChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">色弱模式</span>
|
||||
<span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.weakVal"
|
||||
inline-prompt
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
@change="weekChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">隐藏标签页</span>
|
||||
<span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.tabsVal"
|
||||
inline-prompt
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
@change="tagsChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">隐藏页脚</span>
|
||||
<span class="dark:text-white">{{ t("panel.pureHiddenFooter") }}</span>
|
||||
<el-switch
|
||||
v-model="settings.hideFooter"
|
||||
inline-prompt
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
@change="hideFooterChange"
|
||||
/>
|
||||
</li>
|
||||
@ -487,18 +498,20 @@ onUnmounted(() => removeMatchMedia);
|
||||
inline-prompt
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
@change="logoChange"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dark:text-white">页签持久化</span>
|
||||
<span class="dark:text-white">
|
||||
{{ t("panel.pureMultiTagsCache") }}
|
||||
</span>
|
||||
<el-switch
|
||||
v-model="settings.multiTagsCache"
|
||||
inline-prompt
|
||||
active-text="开"
|
||||
inactive-text="关"
|
||||
:active-text="t('buttons.pureOpenText')"
|
||||
:inactive-text="t('buttons.pureCloseText')"
|
||||
@change="multiTagsCacheChange"
|
||||
/>
|
||||
</li>
|
||||
|
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
@ -13,6 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
const iconClass = computed(() => {
|
||||
@ -34,7 +36,9 @@ const toggleClick = () => {
|
||||
<template>
|
||||
<div
|
||||
v-tippy="{
|
||||
content: props.isActive ? '点击折叠' : '点击展开',
|
||||
content: props.isActive
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand'),
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
|
@ -129,7 +129,7 @@ nextTick(() => {
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureSystemSet')"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
|
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
@ -13,6 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
const iconClass = computed(() => {
|
||||
@ -44,7 +46,9 @@ const toggleClick = () => {
|
||||
<div class="left-collapse">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: props.isActive ? '点击折叠' : '点击展开',
|
||||
content: props.isActive
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand'),
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
|
@ -162,7 +162,7 @@ watch(
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureSystemSet')"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
|
||||
@ -10,6 +11,8 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
}>();
|
||||
@ -22,7 +25,11 @@ const toggleClick = () => {
|
||||
<template>
|
||||
<div
|
||||
class="px-3 mr-1 navbar-bg-hover"
|
||||
:title="props.isActive ? '点击折叠' : '点击展开'"
|
||||
:title="
|
||||
props.isActive
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand')
|
||||
"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
|
@ -17,7 +17,8 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
|
||||
const errorInfo = "当前路由配置不正确,请检查配置";
|
||||
const errorInfo =
|
||||
"The current routing configuration is incorrect, please check the configuration";
|
||||
|
||||
export function useNav() {
|
||||
const pureApp = useAppStoreHook();
|
||||
|
@ -3,6 +3,7 @@ import "animate.css";
|
||||
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
|
||||
import "@/components/ReIcon/src/offlineIcon";
|
||||
import { setType } from "./types";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useLayout } from "./hooks/useLayout";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useSettingStoreHook } from "@/store/modules/settings";
|
||||
@ -31,6 +32,7 @@ import Vertical from "./components/sidebar/vertical.vue";
|
||||
import Horizontal from "./components/sidebar/horizontal.vue";
|
||||
import backTop from "@/assets/svg/back_top.svg?component";
|
||||
|
||||
const { t } = useI18n();
|
||||
const appWrapperRef = ref();
|
||||
const { isDark } = useDark();
|
||||
const { layout } = useLayout();
|
||||
@ -185,7 +187,7 @@ const layoutHeader = defineComponent({
|
||||
</div>
|
||||
<el-scrollbar v-else>
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
:title="t('buttons.pureBackTop')"
|
||||
target=".main-container .el-scrollbar__wrap"
|
||||
>
|
||||
<backTop />
|
||||
|
@ -81,7 +81,7 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
|
||||
: true;
|
||||
}
|
||||
|
||||
/** 从localStorage里取出当前登陆用户的角色roles,过滤无权限的菜单 */
|
||||
/** 从localStorage里取出当前登录用户的角色roles,过滤无权限的菜单 */
|
||||
function filterNoPermissionTree(data: RouteComponent[]) {
|
||||
const currentRoles =
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
||||
|
@ -117,7 +117,7 @@ html.dark {
|
||||
}
|
||||
}
|
||||
|
||||
/* 项目配置面板 */
|
||||
/* 系统配置面板 */
|
||||
.right-panel-items {
|
||||
.el-divider__text {
|
||||
--el-bg-color: var(--el-bg-color);
|
||||
|
@ -15,7 +15,7 @@ export interface DataInfo<T> {
|
||||
username?: string;
|
||||
/** 昵称 */
|
||||
nickname?: string;
|
||||
/** 当前登陆用户的角色 */
|
||||
/** 当前登录用户的角色 */
|
||||
roles?: Array<string>;
|
||||
}
|
||||
|
||||
|
@ -19,10 +19,10 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
|
||||
darkMode: config.DarkMode ?? false,
|
||||
sidebarStatus: config.SidebarStatus ?? true,
|
||||
epThemeColor: config.EpThemeColor ?? "#409EFF",
|
||||
themeColor: config.Theme ?? "light", // 主题色(对应项目配置中的主题色,与theme不同的是它不会受到浅色、深色整体风格切换的影响,只会在手动点击主题色时改变)
|
||||
themeColor: config.Theme ?? "light", // 主题色(对应系统配置中的主题色,与theme不同的是它不会受到浅色、深色整体风格切换的影响,只会在手动点击主题色时改变)
|
||||
overallStyle: config.OverallStyle ?? "light" // 整体风格(浅色:light、深色:dark、自动:system)
|
||||
},
|
||||
// 项目配置-界面显示
|
||||
// 系统配置-界面显示
|
||||
configure: Storage.getData("configure", nameSpace) ?? {
|
||||
grey: config.Grey ?? false,
|
||||
weak: config.Weak ?? false,
|
||||
|
@ -51,8 +51,8 @@ const GUIDE_STEPS = [
|
||||
},
|
||||
{
|
||||
element: document.querySelector(".set-icon") as string | HTMLElement,
|
||||
title: "项目配置",
|
||||
intro: "您可以在这里查看项目配置",
|
||||
title: "系统配置",
|
||||
intro: "您可以在这里查看系统配置",
|
||||
position: "left"
|
||||
},
|
||||
{
|
||||
|
@ -77,12 +77,12 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
router
|
||||
.push(getTopMenu(true).path)
|
||||
.then(() => {
|
||||
message("登录成功", { type: "success" });
|
||||
message(t("login.pureLoginSuccess"), { type: "success" });
|
||||
})
|
||||
.finally(() => (disabled.value = false));
|
||||
});
|
||||
} else {
|
||||
message("登录失败", { type: "error" });
|
||||
message(t("login.pureLoginFail"), { type: "error" });
|
||||
}
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
|
Loading…
Reference in New Issue
Block a user