diff --git a/src/components/ReIcon/src/Select.vue b/src/components/ReIcon/src/Select.vue
index 08881d0a1..32b758ed4 100644
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -10,15 +10,8 @@ defineOptions({
name: "IconSelect"
});
-const props = defineProps({
- modelValue: {
- require: false,
- type: String
- }
-});
-const emit = defineEmits<{ (e: "update:modelValue", v: string) }>();
+const inputValue = defineModel({ type: String });
-const inputValue = toRef(props, "modelValue");
const iconList = ref(IconJson);
const icon = ref();
const currentActiveType = ref("ep:");
@@ -68,11 +61,11 @@ const iconItemStyle = computed((): ParameterCSSProperties => {
});
function setVal() {
- currentActiveType.value = props.modelValue.substring(
+ currentActiveType.value = inputValue.value.substring(
0,
- props.modelValue.indexOf(":") + 1
+ inputValue.value.indexOf(":") + 1
);
- icon.value = props.modelValue.substring(props.modelValue.indexOf(":") + 1);
+ icon.value = inputValue.value.substring(inputValue.value.indexOf(":") + 1);
}
function onBeforeEnter() {
@@ -96,7 +89,7 @@ function handleClick({ props }) {
function onChangeIcon(item) {
icon.value = item;
- emit("update:modelValue", currentActiveType.value + item);
+ inputValue.value = currentActiveType.value + item;
}
function onCurrentChange(page) {
@@ -105,7 +98,7 @@ function onCurrentChange(page) {
function onClear() {
icon.value = "";
- emit("update:modelValue", "");
+ inputValue.value = "";
}
watch(
@@ -117,7 +110,7 @@ watch(
{ immediate: true }
);
watch(
- () => props.modelValue,
+ () => inputValue.value,
val => val && setVal(),
{ immediate: true }
);
@@ -151,8 +144,8 @@ watch(
diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts
index 4f430a894..6bc0142af 100644
--- a/src/components/ReIcon/src/hooks.ts
+++ b/src/components/ReIcon/src/hooks.ts
@@ -1,5 +1,5 @@
-import { iconType } from "./types";
-import { h, defineComponent, Component } from "vue";
+import type { iconType } from "./types";
+import { h, defineComponent, type Component } from "vue";
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
/**
@@ -33,7 +33,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
});
} else if (typeof icon === "function" || typeof icon?.render === "function") {
// svg
- return icon;
+ return attrs ? h(icon, { ...attrs }) : icon;
} else if (typeof icon === "object") {
return defineComponent({
name: "OfflineIcon",
diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts
index 8ae8a543c..000bdc594 100644
--- a/src/components/ReIcon/src/types.ts
+++ b/src/components/ReIcon/src/types.ts
@@ -13,7 +13,8 @@ export interface iconType {
align?: string;
onLoad?: Function;
includes?: Function;
-
- // all icon
+ // svg 需要什么SVG属性自行添加
+ fill?: string;
+ // all icon
style?: object;
}
diff --git a/src/components/ReQrcode/src/index.tsx b/src/components/ReQrcode/src/index.tsx
index 737440288..8d517547e 100644
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -4,13 +4,13 @@ import {
watch,
nextTick,
computed,
- PropType,
+ type PropType,
defineComponent
} from "vue";
import "./index.scss";
import propTypes from "@/utils/propTypes";
import { isString, cloneDeep } from "@pureadmin/utils";
-import QRCode, { QRCodeRenderersOptions } from "qrcode";
+import QRCode, { type QRCodeRenderersOptions } from "qrcode";
import RefreshRight from "@iconify-icons/ep/refresh-right";
interface QrcodeLogo {
diff --git a/src/components/ReSeamlessScroll/src/index.vue b/src/components/ReSeamlessScroll/src/index.vue
index 78ac77b5a..e0f90d2b9 100644
--- a/src/components/ReSeamlessScroll/src/index.vue
+++ b/src/components/ReSeamlessScroll/src/index.vue
@@ -498,16 +498,16 @@ defineExpose({
@@ -526,7 +526,7 @@ defineExpose({
-
+
diff --git a/src/components/ReSegmented/src/index.css b/src/components/ReSegmented/src/index.css
index 53eeba83e..22acb2b9f 100644
--- a/src/components/ReSegmented/src/index.css
+++ b/src/components/ReSegmented/src/index.css
@@ -6,7 +6,6 @@
color: rgba(0, 0, 0, 0.65);
background-color: rgb(0 0 0 / 4%);
border-radius: 2px;
- transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.pure-segmented-group {
@@ -43,7 +42,7 @@
text-align: center;
cursor: pointer;
border-radius: 4px;
- transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.pure-segmented-item > div {
diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx
index 8378f4ad6..41c08af18 100644
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -121,7 +121,11 @@ export default defineComponent({
class="pure-segmented-item-icon"
style={{ marginRight: option.label ? "6px" : 0 }}
>
- {h(useRenderIcon(option.icon))}
+ {h(
+ useRenderIcon(option.icon, {
+ ...option?.iconAttrs
+ })
+ )}
) : null}
{option.label ? (
diff --git a/src/components/ReSegmented/src/type.ts b/src/components/ReSegmented/src/type.ts
index e96d8166c..0b6f5d432 100644
--- a/src/components/ReSegmented/src/type.ts
+++ b/src/components/ReSegmented/src/type.ts
@@ -1,4 +1,5 @@
import type { VNode, Component } from "vue";
+import type { iconType } from "@/components/ReIcon/src/types.ts";
export interface OptionsType {
/** 文字 */
@@ -8,6 +9,8 @@ export interface OptionsType {
* @see {@link 用法参考 https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
*/
icon?: string | Component;
+ /** 图标属性、样式配置 */
+ iconAttrs?: iconType;
/** 值 */
value?: string | number;
/** 是否禁用 */
diff --git a/src/components/ReSelector/src/index.tsx b/src/components/ReSelector/src/index.tsx
index afd0d5a18..ededc06d7 100644
--- a/src/components/ReSelector/src/index.tsx
+++ b/src/components/ReSelector/src/index.tsx
@@ -55,7 +55,6 @@ export default defineComponent({
emits: ["selectedVal"],
setup(props, { emit }) {
const instance = getCurrentInstance();
- // eslint-disable-next-line vue/no-setup-props-destructure
const currentValue = props.value;
const rateDisabled = computed(() => {
diff --git a/src/components/ReSplitPane/index.tsx b/src/components/ReSplitPane/index.tsx
index 621a57ce2..8a33ae515 100644
--- a/src/components/ReSplitPane/index.tsx
+++ b/src/components/ReSplitPane/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, unref, computed, PropType } from "vue";
+import { defineComponent, ref, unref, computed, type PropType } from "vue";
import resizer from "./resizer";
import "./index.css";
diff --git a/src/config/index.ts b/src/config/index.ts
index 4eaaa4591..54dd959cc 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,4 +1,4 @@
-import { App } from "vue";
+import type { App } from "vue";
import axios from "axios";
let config: object = {};
diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 28354d979..b3564cd7d 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -50,6 +50,12 @@ const getSectionStyle = computed(() => {
});
const transitionMain = defineComponent({
+ props: {
+ route: {
+ type: undefined,
+ required: true
+ }
+ },
render() {
const transitionName =
transitions.value(this.route)?.name || "fade-transform";
@@ -72,12 +78,6 @@ const transitionMain = defineComponent({
default: () => [this.$slots.default()]
}
);
- },
- props: {
- route: {
- type: undefined,
- required: true
- }
}
});
@@ -92,7 +92,8 @@ const transitionMain = defineComponent({
@@ -139,8 +140,8 @@ const transitionMain = defineComponent({
/>
diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index 752fdb034..c13b785f6 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -62,8 +62,8 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
@click="translationCh"
>
简体中文
@@ -73,7 +73,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
-
+
English
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 3a3772099..443c1c03c 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -23,8 +23,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
diff --git a/src/layout/components/notice/noticeList.vue b/src/layout/components/notice/noticeList.vue
index 109cd1af2..2d40d953d 100644
--- a/src/layout/components/notice/noticeList.vue
+++ b/src/layout/components/notice/noticeList.vue
@@ -15,8 +15,8 @@ const props = defineProps({
diff --git a/src/layout/components/panel/index.vue b/src/layout/components/panel/index.vue
index 59001f08c..50318c602 100644
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -2,6 +2,7 @@
import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import Close from "@iconify-icons/ep/close";
const target = ref(null);
@@ -9,7 +10,6 @@ const show = ref(false);
const iconClass = computed(() => {
return [
- "mr-[20px]",
"outline-none",
"width-[20px]",
"height-[20px]",
@@ -22,6 +22,8 @@ const iconClass = computed(() => {
];
});
+const { onReset } = useDataThemeChange();
+
onClickOutside(target, (event: any) => {
if (event.clientX > target.value.offsetLeft) return;
show.value = false;
@@ -43,23 +45,47 @@ onBeforeUnmount(() => {
-
-
-
项目配置
-
-
-
-
-
+
+
项目配置
+
+
+
+
+
+
+
+
+
+ 清空缓存
+
@@ -74,6 +100,10 @@ onBeforeUnmount(() => {
diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
index 266d2a80d..c5d9cbd39 100644
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -146,9 +146,9 @@ onKeyStroke("ArrowDown", handleDown);
();
const mixRef = ref();
@@ -40,8 +34,8 @@ const {
dataTheme,
layoutTheme,
themeColors,
+ toggleClass,
dataThemeChange,
- setEpThemeColor,
setLayoutThemeColor
} = useDataThemeChange();
@@ -89,13 +83,6 @@ function storageConfigureChange(key: string, val: T): void {
$storage.configure = storageConfigure;
}
-function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
- const targetEl = target || document.body;
- let { className } = targetEl;
- className = className.replace(clsName, "").trim();
- targetEl.className = flag ? `${className} ${clsName} ` : className;
-}
-
/** 灰色模式设置 */
const greyChange = (value): void => {
toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
@@ -132,24 +119,11 @@ const multiTagsCacheChange = () => {
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
};
-/** 清空缓存并返回登录页 */
-function onReset() {
- removeToken();
- storageLocal().clear();
- const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
- useAppStoreHook().setLayout(Layout);
- setEpThemeColor(EpThemeColor);
- useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
- toggleClass(Grey, "html-grey", document.querySelector("html"));
- toggleClass(Weak, "html-weakness", document.querySelector("html"));
- router.push("/login");
- useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
- resetRouter();
-}
-
-function onChange(label) {
- storageConfigureChange("showModel", label);
- emitter.emit("tagViewsShowModel", label);
+function onChange({ option }) {
+ const { value } = option;
+ markValue.value = value;
+ storageConfigureChange("showModel", value);
+ emitter.emit("tagViewsShowModel", value);
}
/** 侧边栏Logo */
@@ -185,6 +159,32 @@ const getThemeColor = computed(() => {
};
});
+const themeOptions = computed>(() => {
+ return [
+ {
+ label: "亮色",
+ icon: dayIcon,
+ iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+ },
+ {
+ label: "暗色",
+ icon: darkIcon,
+ iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+ }
+ ];
+});
+
+const markOptions: Array = [
+ {
+ label: "灵动",
+ value: "smart"
+ },
+ {
+ label: "卡片",
+ value: "card"
+ }
+];
+
/** 设置导航模式 */
function setLayoutModel(layout: string) {
layoutTheme.value.layout = layout;
@@ -194,7 +194,8 @@ function setLayoutModel(layout: string) {
theme: layoutTheme.value.theme,
darkMode: $storage.layout?.darkMode,
sidebarStatus: $storage.layout?.sidebarStatus,
- epThemeColor: $storage.layout?.epThemeColor
+ epThemeColor: $storage.layout?.epThemeColor,
+ themeColor: layoutTheme.value.theme
};
useAppStoreHook().setLayout(layout);
}
@@ -234,185 +235,153 @@ onBeforeMount(() => {
- 主题
-
+
+
整体风格
+
-
导航栏模式
-
-
+ 主题色
+
+
+ 导航模式
+
-
-
-
-
-
-
-
-
-
+
-
主题色
-
-
-
界面显示
-
- -
- 灰色模式
-
-
- -
- 色弱模式
-
-
- -
- 隐藏标签页
-
-
- -
- 隐藏页脚
-
-
- -
- 侧边栏Logo
-
-
- -
- 标签页持久化
-
-
-
- -
- 标签风格
-
- 卡片
- 灵动
-
-
-
-
-
-
- 页签风格
+
- 清空缓存并返回登录页
-
+
+
界面显示
+
+ -
+ 灰色模式
+
+
+ -
+ 色弱模式
+
+
+ -
+ 隐藏标签页
+
+
+ -
+ 隐藏页脚
+
+
+ -
+ Logo
+
+
+ -
+ 页签持久化
+
+
+
+
+ 