twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into pages

Browse Source
This commit is contained in:
xiaoxian521 2025-04-09 19:16:25 +08:00
commit 440ce053e5
165 changed files with 2881 additions and 2617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/optimize.ts
View File

@ -57,8 +57,8 @@ const include = [
/** /**
* 在预构建中强制排除的依赖项 * 在预构建中强制排除的依赖项
* 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好 * 温馨提示：平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
*/ */
const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"]; const exclude = ["@iconify/json"];
export { include, exclude }; export { include, exclude };

8
build/plugins.ts
View File

@ -3,8 +3,10 @@ import vue from "@vitejs/plugin-vue";
import { pathResolve } from "./utils"; import { pathResolve } from "./utils";
import { viteBuildInfo } from "./info"; import { viteBuildInfo } from "./info";
import svgLoader from "vite-svg-loader"; import svgLoader from "vite-svg-loader";
import Icons from "unplugin-icons/vite";
import type { PluginOption } from "vite"; import type { PluginOption } from "vite";
import vueJsx from "@vitejs/plugin-vue-jsx"; import vueJsx from "@vitejs/plugin-vue-jsx";
import tailwindcss from "@tailwindcss/vite";
import { configCompressPlugin } from "./compress"; import { configCompressPlugin } from "./compress";
import removeNoMatch from "vite-plugin-router-warn"; import removeNoMatch from "vite-plugin-router-warn";
import { visualizer } from "rollup-plugin-visualizer"; import { visualizer } from "rollup-plugin-visualizer";
@ -19,6 +21,7 @@ export function getPluginsList(
): PluginOption[] { ): PluginOption[] {
const lifecycle = process.env.npm_lifecycle_event; const lifecycle = process.env.npm_lifecycle_event;
return [ return [
tailwindcss(),
vue({ vue({
template: { template: {
compilerOptions: { compilerOptions: {
@ -57,6 +60,11 @@ export function getPluginsList(
}), }),
// svg组件化支持 // svg组件化支持
svgLoader(), svgLoader(),
// 自动按需加载图标
Icons({
compiler: "vue3",
scale: 1
}),
VITE_CDN ? cdn : null, VITE_CDN ? cdn : null,
configCompressPlugin(VITE_COMPRESSION), configCompressPlugin(VITE_COMPRESSION),
// 线上环境删除console // 线上环境删除console

53
eslint.config.js
View File

@ -1,26 +1,25 @@
import js from "@eslint/js"; import js from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue"; import pluginVue from "eslint-plugin-vue";
import * as parserVue from "vue-eslint-parser"; import * as parserVue from "vue-eslint-parser";
import configPrettier from "eslint-config-prettier"; import configPrettier from "eslint-config-prettier";
import pluginPrettier from "eslint-plugin-prettier"; import pluginPrettier from "eslint-plugin-prettier";
import { defineFlatConfig } from "eslint-define-config"; import { defineConfig, globalIgnores } from "eslint/config";
import * as parserTypeScript from "@typescript-eslint/parser";
import pluginTypeScript from "@typescript-eslint/eslint-plugin";
export default defineFlatConfig([ export default defineConfig([
globalIgnores([
"**/.*",
"dist/*",
"*.d.ts",
"public/*",
"src/assets/**",
"src/**/iconfont/**"
]),
{ {
...js.configs.recommended, ...js.configs.recommended,
ignores: [
"**/.*",
"dist/*",
"*.d.ts",
"public/*",
"src/assets/**",
"src/**/iconfont/**"
],
languageOptions: { languageOptions: {
globals: { globals: {
// index.d.ts // types/index.d.ts
RefType: "readonly", RefType: "readonly",
EmitType: "readonly", EmitType: "readonly",
TargetContext: "readonly", TargetContext: "readonly",
@ -73,21 +72,10 @@ export default defineFlatConfig([
] ]
} }
}, },
{ ...tseslint.config({
extends: [...tseslint.configs.recommended],
files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"], files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
languageOptions: {
parser: parserTypeScript,
parserOptions: {
sourceType: "module",
warnOnUnsupportedTypeScriptVersion: false
}
},
plugins: {
"@typescript-eslint": pluginTypeScript
},
rules: { rules: {
...pluginTypeScript.configs.strict.rules,
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-redeclare": "error", "@typescript-eslint/no-redeclare": "error",
"@typescript-eslint/ban-ts-comment": "off", "@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-explicit-any": "off",
@ -114,20 +102,20 @@ export default defineFlatConfig([
} }
] ]
} }
}, }),
{ {
files: ["**/*.d.ts"], files: ["**/*.d.ts"],
rules: { rules: {
"eslint-comments/no-unlimited-disable": "off", "eslint-comments/no-unlimited-disable": "off",
"import/no-duplicates": "off", "import/no-duplicates": "off",
"no-restricted-syntax": "off",
"unused-imports/no-unused-vars": "off" "unused-imports/no-unused-vars": "off"
} }
}, },
{ {
files: ["**/*.?([cm])js"], files: ["**/*.?([cm])js"],
rules: { rules: {
"@typescript-eslint/no-require-imports": "off", "@typescript-eslint/no-require-imports": "off"
"@typescript-eslint/no-var-requires": "off"
} }
}, },
{ {
@ -148,18 +136,19 @@ export default defineFlatConfig([
jsx: true jsx: true
}, },
extraFileExtensions: [".vue"], extraFileExtensions: [".vue"],
parser: "@typescript-eslint/parser", parser: tseslint.parser,
sourceType: "module" sourceType: "module"
} }
}, },
plugins: { plugins: {
"@typescript-eslint": tseslint.plugin,
vue: pluginVue vue: pluginVue
}, },
processor: pluginVue.processors[".vue"], processor: pluginVue.processors[".vue"],
rules: { rules: {
...pluginVue.configs.base.rules, ...pluginVue.configs.base.rules,
...pluginVue.configs["vue3-essential"].rules, ...pluginVue.configs.essential.rules,
...pluginVue.configs["vue3-recommended"].rules, ...pluginVue.configs.recommended.rules,
"no-undef": "off", "no-undef": "off",
"no-unused-vars": "off", "no-unused-vars": "off",
"vue/no-v-html": "off", "vue/no-v-html": "off",

2
mock/mine.ts
View File

@ -25,7 +25,7 @@ export default defineFakeRoute([
url: "/mine-logs", url: "/mine-logs",
method: "get", method: "get",
response: () => { response: () => {
let list = [ const list = [
{ {
id: 1, id: 1,
ip: faker.internet.ipv4(), ip: faker.internet.ipv4(),

94
package.json
View File

@ -54,25 +54,25 @@
"@logicflow/extension": "^1.2.28", "@logicflow/extension": "^1.2.28",
"@pureadmin/descriptions": "^1.2.1", "@pureadmin/descriptions": "^1.2.1",
"@pureadmin/table": "^3.2.1", "@pureadmin/table": "^3.2.1",
"@pureadmin/utils": "^2.5.0", "@pureadmin/utils": "^2.6.0",
"@vue-flow/background": "^1.3.2", "@vue-flow/background": "^1.3.2",
"@vue-flow/core": "^1.42.1", "@vue-flow/core": "^1.42.5",
"@vueuse/core": "^12.5.0", "@vueuse/core": "^13.1.0",
"@vueuse/motion": "^2.2.6", "@vueuse/motion": "^3.0.3",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
"@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/core": "^3.0.4",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.7.9", "axios": "^1.8.4",
"china-area-data": "^5.0.1", "china-area-data": "^5.0.1",
"codemirror": "^5.65.18", "codemirror": "^5.65.19",
"codemirror-editor-vue3": "^2.8.0", "codemirror-editor-vue3": "^2.8.0",
"cropperjs": "^1.6.2", "cropperjs": "^1.6.2",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"deep-chat": "^2.1.1", "deep-chat": "^2.1.1",
"echarts": "^5.6.0", "echarts": "^5.6.0",
"el-table-infinite-scroll": "^3.0.6", "el-table-infinite-scroll": "^3.0.6",
"element-plus": "^2.9.4", "element-plus": "^2.9.7",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
"intro.js": "^7.2.0", "intro.js": "^7.2.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
@ -85,96 +85,94 @@
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"pinia": "^3.0.1", "pinia": "^3.0.1",
"pinyin-pro": "^3.26.0", "pinyin-pro": "^3.26.0",
"plus-pro-components": "^0.1.20", "plus-pro-components": "^0.1.22",
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
"qs": "^6.14.0", "qs": "^6.14.0",
"responsive-storage": "^2.2.0", "responsive-storage": "^2.2.0",
"sortablejs": "^1.15.6", "sortablejs": "^1.15.6",
"swiper": "^11.2.3", "swiper": "^11.2.6",
"typeit": "^8.8.7", "typeit": "^8.8.7",
"v-contextmenu": "^3.2.0", "v-contextmenu": "^3.2.0",
"v3-infinite-loading": "^1.3.2", "v3-infinite-loading": "^1.3.2",
"vditor": "^3.10.9", "vditor": "^3.10.9",
"version-rocket": "^1.7.4", "version-rocket": "^1.7.4",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-i18n": "^11.1.1", "vue-i18n": "^11.1.3",
"vue-json-pretty": "^2.4.0", "vue-json-pretty": "^2.4.0",
"vue-pdf-embed": "^2.1.2", "vue-pdf-embed": "^2.1.2",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vue-tippy": "^6.6.0", "vue-tippy": "^6.7.0",
"vue-types": "^5.1.3", "vue-types": "^6.0.0",
"vue-virtual-scroller": "2.0.0-beta.8", "vue-virtual-scroller": "2.0.0-beta.8",
"vue-waterfall-plugin-next": "^2.6.5", "vue-waterfall-plugin-next": "^2.6.5",
"vue3-danmaku": "^1.6.1", "vue3-danmaku": "^1.6.1",
"vue3-puzzle-vcode": "^1.1.7", "vue3-puzzle-vcode": "^1.1.7",
"vuedraggable": "^4.1.0", "vuedraggable": "^4.1.0",
"vxe-table": "4.6.25", "vxe-table": "4.6.25",
"wavesurfer.js": "^7.9.1", "wavesurfer.js": "^7.9.4",
"xgplayer": "^3.0.20", "xgplayer": "^3.0.21",
"xlsx": "^0.18.5" "xlsx": "^0.18.5"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^19.7.1", "@commitlint/cli": "^19.8.0",
"@commitlint/config-conventional": "^19.7.1", "@commitlint/config-conventional": "^19.8.0",
"@commitlint/types": "^19.5.0", "@commitlint/types": "^19.8.0",
"@eslint/js": "^9.20.0", "@eslint/js": "^9.24.0",
"@faker-js/faker": "^9.5.0", "@faker-js/faker": "^9.6.0",
"@iconify-icons/ep": "^1.2.12", "@iconify/json": "^2.2.324",
"@iconify-icons/ri": "^1.2.10",
"@iconify/vue": "4.2.0", "@iconify/vue": "4.2.0",
"@intlify/unplugin-vue-i18n": "^6.0.3", "@intlify/unplugin-vue-i18n": "^6.0.5",
"@tailwindcss/vite": "^4.1.3",
"@types/codemirror": "^5.60.15", "@types/codemirror": "^5.60.15",
"@types/dagre": "^0.7.52", "@types/dagre": "^0.7.52",
"@types/intro.js": "^5.1.5", "@types/intro.js": "^5.1.5",
"@types/js-cookie": "^3.0.6", "@types/js-cookie": "^3.0.6",
"@types/node": "^20.17.19", "@types/node": "^20.17.30",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.3", "@types/path-browserify": "^1.0.3",
"@types/qrcode": "^1.5.5", "@types/qrcode": "^1.5.5",
"@types/qs": "^6.9.18", "@types/qs": "^6.9.18",
"@types/sortablejs": "^1.15.8", "@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^8.24.0", "@vitejs/plugin-vue": "^5.2.3",
"@typescript-eslint/parser": "^8.24.0", "@vitejs/plugin-vue-jsx": "^4.1.2",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"autoprefixer": "^10.4.20",
"boxen": "^8.0.1", "boxen": "^8.0.1",
"code-inspector-plugin": "^0.20.0", "code-inspector-plugin": "^0.20.7",
"cssnano": "^7.0.6", "cssnano": "^7.0.6",
"dagre": "^0.8.5", "dagre": "^0.8.5",
"eslint": "^9.20.1", "eslint": "^9.24.0",
"eslint-config-prettier": "^10.0.1", "eslint-config-prettier": "^10.1.1",
"eslint-define-config": "^2.1.0", "eslint-plugin-prettier": "^5.2.6",
"eslint-plugin-prettier": "^5.2.3", "eslint-plugin-vue": "^10.0.0",
"eslint-plugin-vue": "^9.32.0",
"gradient-string": "^3.0.0", "gradient-string": "^3.0.0",
"husky": "^9.1.7", "husky": "^9.1.7",
"lint-staged": "^15.4.3", "lint-staged": "^15.5.0",
"postcss": "^8.5.2", "postcss": "^8.5.3",
"postcss-html": "^1.8.0", "postcss-html": "^1.8.0",
"postcss-import": "^16.1.0", "postcss-load-config": "^6.0.1",
"postcss-scss": "^4.0.9", "postcss-scss": "^4.0.9",
"prettier": "^3.5.1", "prettier": "^3.5.3",
"rimraf": "^6.0.1", "rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^5.14.0", "rollup-plugin-visualizer": "^5.14.0",
"sass": "^1.85.0", "sass": "^1.86.3",
"stylelint": "^16.14.1", "stylelint": "^16.18.0",
"stylelint-config-recess-order": "^6.0.0", "stylelint-config-recess-order": "^6.0.0",
"stylelint-config-recommended-vue": "^1.6.0", "stylelint-config-recommended-vue": "^1.6.0",
"stylelint-config-standard-scss": "^14.0.0", "stylelint-config-standard-scss": "^14.0.0",
"stylelint-prettier": "^5.0.3", "stylelint-prettier": "^5.0.3",
"svgo": "^3.3.2", "svgo": "^3.3.2",
"tailwindcss": "3.4.17", "tailwindcss": "^4.1.3",
"typescript": "^5.7.3", "typescript": "^5.8.3",
"vite": "^6.1.0", "typescript-eslint": "^8.29.1",
"unplugin-icons": "^22.1.0",
"vite": "^6.2.5",
"vite-plugin-cdn-import": "^1.0.1", "vite-plugin-cdn-import": "^1.0.1",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-fake-server": "^2.2.0", "vite-plugin-fake-server": "^2.2.0",
"vite-plugin-remove-console": "^2.2.0", "vite-plugin-remove-console": "^2.2.0",
"vite-plugin-router-warn": "^1.0.0", "vite-plugin-router-warn": "^1.0.0",
"vite-svg-loader": "^5.1.0", "vite-svg-loader": "^5.1.0",
"vue-eslint-parser": "^9.4.3", "vue-eslint-parser": "^10.1.3",
"vue-tsc": "^2.2.0" "vue-tsc": "^2.2.8"
}, },
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=22.0.0", "node": "^18.18.0 || ^20.9.0 || >=22.0.0",
@ -184,6 +182,7 @@
"allowedDeprecatedVersions": { "allowedDeprecatedVersions": {
"are-we-there-yet": "*", "are-we-there-yet": "*",
"sourcemap-codec": "*", "sourcemap-codec": "*",
"lodash.isequal": "*",
"domexception": "*", "domexception": "*",
"w3c-hr-time": "*", "w3c-hr-time": "*",
"inflight": "*", "inflight": "*",
@ -194,11 +193,6 @@
"abab": "*", "abab": "*",
"glob": "*" "glob": "*"
}, },
"peerDependencyRules": {
"allowedVersions": {
"eslint": "9"
}
},
"onlyBuiltDependencies": [ "onlyBuiltDependencies": [
"@parcel/watcher", "@parcel/watcher",
"core-js", "core-js",

4045
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
postcss.config.js
View File

@ -3,10 +3,6 @@
/** @type {import('postcss-load-config').Config} */ /** @type {import('postcss-load-config').Config} */
export default { export default {
plugins: { plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}) ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
} }
}; };

2
src/components/ReAnimateSelector/src/index.vue
View File

@ -95,7 +95,7 @@ function onMouseleave() {
:view-style="{ overflow: 'hidden' }" :view-style="{ overflow: 'hidden' }"
class="border-t border-[#e5e7eb]" class="border-t border-[#e5e7eb]"
> >
<ul class="flex flex-wrap justify-around mb-1"> <ul class="flex flex-wrap justify-around mb-1!">
<li <li
v-for="(animate, index) in animatesList" v-for="(animate, index) in animatesList"
:key="index" :key="index"

2
src/components/ReCropper/src/index.tsx
View File

@ -119,7 +119,7 @@ export default defineComponent({
"p-[6px]", "p-[6px]",
"h-[30px]", "h-[30px]",
"w-[30px]", "w-[30px]",
"outline-none", "outline-hidden",
"rounded-[4px]", "rounded-[4px]",
"cursor-pointer", "cursor-pointer",
"hover:bg-[rgba(0,0,0,0.06)]" "hover:bg-[rgba(0,0,0,0.06)]"

6
src/components/ReDialog/index.vue
View File

@ -8,8 +8,8 @@ import {
} from "./index"; } from "./index";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { isFunction } from "@pureadmin/utils"; import { isFunction } from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "~icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
defineOptions({ defineOptions({
name: "ReDialog" name: "ReDialog"
@ -79,7 +79,7 @@ const fullscreenClass = computed(() => {
"el-dialog__close", "el-dialog__close",
"-translate-x-2", "-translate-x-2",
"cursor-pointer", "cursor-pointer",
"hover:!text-[red]" "hover:text-[red]!"
]; ];
}); });

5
src/components/ReFlowChart/src/Control.vue
View File

@ -3,7 +3,7 @@ import { ref, unref, onMounted } from "vue";
import { LogicFlow } from "@logicflow/core"; import { LogicFlow } from "@logicflow/core";
interface Props { interface Props {
lf: LogicFlow; lf?: LogicFlow;
catTurboData?: boolean; catTurboData?: boolean;
} }
@ -114,7 +114,8 @@ onMounted(() => {
:style="{ :style="{
cursor: item.disabled === false ? 'pointer' : 'not-allowed', cursor: item.disabled === false ? 'pointer' : 'not-allowed',
color: item.disabled === false ? '' : '#00000040', color: item.disabled === false ? '' : '#00000040',
background: 'transparent' background: 'transparent',
border: 'none'
}" }"
@click="onControl(item, key)" @click="onControl(item, key)"
> >

4
src/components/ReFlowChart/src/NodePanel.vue
View File

@ -9,8 +9,8 @@ type nodeListType = {
}; };
interface Props { interface Props {
lf: LogicFlow; lf?: LogicFlow;
nodeList: Array<nodeListType>; nodeList?: Array<nodeListType>;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

6
src/components/ReIcon/src/Select.vue
View File

@ -2,7 +2,7 @@
import { IconJson } from "@/components/ReIcon/data"; import { IconJson } from "@/components/ReIcon/data";
import { cloneDeep, isAllEmpty } from "@pureadmin/utils"; import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
import { ref, computed, CSSProperties, watch } from "vue"; import { ref, computed, CSSProperties, watch } from "vue";
import Search from "@iconify-icons/ri/search-eye-line"; import Search from "~icons/ri/search-eye-line";
type ParameterCSSProperties = (item?: string) => CSSProperties | undefined; type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
@ -158,7 +158,7 @@ watch(
:name="pane.name" :name="pane.name"
> >
<el-scrollbar height="220px"> <el-scrollbar height="220px">
<ul class="flex flex-wrap px-2 ml-2"> <ul class="flex flex-wrap px-2! ml-2!">
<li <li
v-for="(item, key) in pageList" v-for="(item, key) in pageList"
:key="key" :key="key"
@ -198,7 +198,7 @@ watch(
@current-change="onCurrentChange" @current-change="onCurrentChange"
/> />
<el-button <el-button
class="justify-end mr-2 ml-2" class="justify-end mx-2!"
type="danger" type="danger"
size="small" size="small"
text text

10
src/components/ReIcon/src/hooks.ts
View File

@ -1,6 +1,6 @@
import type { iconType } from "./types"; import type { iconType } from "./types";
import { h, defineComponent, type Component } from "vue"; import { h, defineComponent, type Component } from "vue";
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index";
/** /**
* 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标 * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
@ -49,10 +49,12 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
return defineComponent({ return defineComponent({
name: "Icon", name: "Icon",
render() { render() {
const IconifyIcon = if (!icon) return;
icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline; const IconifyIcon = icon.includes(":")
? IconifyIconOnline
: IconifyIconOffline;
return h(IconifyIcon, { return h(IconifyIcon, {
icon: icon, icon,
...attrs ...attrs
}); });
} }

44
src/components/ReIcon/src/iconifyIconOffline.ts
View File

@ -13,19 +13,35 @@ export default defineComponent({
render() { render() {
if (typeof this.icon === "object") addIcon(this.icon, this.icon); if (typeof this.icon === "object") addIcon(this.icon, this.icon);
const attrs = this.$attrs; const attrs = this.$attrs;
return h( if (typeof this.icon === "string") {
IconifyIcon, return h(
{ IconifyIcon,
icon: this.icon, {
"aria-hidden": false, icon: this.icon,
style: attrs?.style "aria-hidden": false,
? Object.assign(attrs.style, { outline: "none" }) style: attrs?.style
: { outline: "none" }, ? Object.assign(attrs.style, { outline: "none" })
...attrs : { outline: "none" },
}, ...attrs
{ },
default: () => [] {
} default: () => []
); }
);
} else {
return h(
this.icon,
{
"aria-hidden": false,
style: attrs?.style
? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" },
...attrs
},
{
default: () => []
}
);
}
} }
}); });

149
src/components/ReIcon/src/offlineIcon.ts
View File

@ -1,70 +1,87 @@
// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载 // 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
import { getSvgInfo } from "@pureadmin/utils";
import { addIcon } from "@iconify/vue/dist/offline"; import { addIcon } from "@iconify/vue/dist/offline";
// https://icon-sets.iconify.design/ep/?keyword=ep
import EpMenu from "~icons/ep/menu?raw";
import EpEdit from "~icons/ep/edit?raw";
import EpGuide from "~icons/ep/guide?raw";
import EpSetUp from "~icons/ep/set-up?raw";
import EpMonitor from "~icons/ep/monitor?raw";
import EpLollipop from "~icons/ep/lollipop?raw";
import EpHistogram from "~icons/ep/histogram?raw";
import EpHomeFilled from "~icons/ep/home-filled?raw";
// https://icon-sets.iconify.design/ri/?keyword=ri
import RiMindMap from "~icons/ri/mind-map?raw";
import RiAdminFill from "~icons/ri/admin-fill?raw";
import RiTableLine from "~icons/ri/table-line?raw";
import RiLinksFill from "~icons/ri/links-fill?raw";
import RiAdminLine from "~icons/ri/admin-line?raw";
import RiListCheck from "~icons/ri/list-check?raw";
import RiSearchLine from "~icons/ri/search-line?raw";
import RiWindowLine from "~icons/ri/window-line?raw";
import RiUbuntuFill from "~icons/ri/ubuntu-fill?raw";
import RiHistoryFill from "~icons/ri/history-fill?raw";
import RiEditBoxLine from "~icons/ri/edit-box-line?raw";
import RiCodeBoxLine from "~icons/ri/code-box-line?raw";
import RiArtboardLine from "~icons/ri/artboard-line?raw";
import RiMarkdownLine from "~icons/ri/markdown-line?raw";
import RiFileInfoLine from "~icons/ri/file-info-line?raw";
import RiBankCardLine from "~icons/ri/bank-card-line?raw";
import RiFilePpt2Line from "~icons/ri/file-ppt-2-line?raw";
import RiGitBranchLine from "~icons/ri/git-branch-line?raw";
import RiSettings3Line from "~icons/ri/settings-3-line?raw";
import RiUserVoiceLine from "~icons/ri/user-voice-line?raw";
import RiBookmark2Line from "~icons/ri/bookmark-2-line?raw";
import RiFileSearchLine from "~icons/ri/file-search-line?raw";
import RiChatSearchLine from "~icons/ri/chat-search-line?raw";
import RiInformationLine from "~icons/ri/information-line?raw";
import RiTerminalWindowLine from "~icons/ri/terminal-window-line?raw";
import RiCheckboxCircleLine from "~icons/ri/checkbox-circle-line?raw";
import RiBarChartHorizontalLine from "~icons/ri/bar-chart-horizontal-line?raw";
const icons = [
// Element Plus Icon: https://github.com/element-plus/element-plus-icons
["ep/menu", EpMenu],
["ep/edit", EpEdit],
["ep/guide", EpGuide],
["ep/set-up", EpSetUp],
["ep/monitor", EpMonitor],
["ep/lollipop", EpLollipop],
["ep/histogram", EpHistogram],
["ep/home-filled", EpHomeFilled],
// Remix Icon: https://github.com/Remix-Design/RemixIcon
["ri/mind-map", RiMindMap],
["ri/admin-fill", RiAdminFill],
["ri/table-line", RiTableLine],
["ri/links-fill", RiLinksFill],
["ri/admin-line", RiAdminLine],
["ri/list-check", RiListCheck],
["ri/search-line", RiSearchLine],
["ri/window-line", RiWindowLine],
["ri/ubuntu-fill", RiUbuntuFill],
["ri/history-fill", RiHistoryFill],
["ri/edit-box-line", RiEditBoxLine],
["ri/code-box-line", RiCodeBoxLine],
["ri/artboard-line", RiArtboardLine],
["ri/markdown-line", RiMarkdownLine],
["ri/file-info-line", RiFileInfoLine],
["ri/bank-card-line", RiBankCardLine],
["ri/file-ppt-2-line", RiFilePpt2Line],
["ri/git-branch-line", RiGitBranchLine],
["ri/settings-3-line", RiSettings3Line],
["ri/user-voice-line", RiUserVoiceLine],
["ri/bookmark-2-line", RiBookmark2Line],
["ri/file-search-line", RiFileSearchLine],
["ri/chat-search-line", RiChatSearchLine],
["ri/information-line", RiInformationLine],
["ri/terminal-window-line", RiTerminalWindowLine],
["ri/checkbox-circle-line", RiCheckboxCircleLine],
["ri/bar-chart-horizontal-line", RiBarChartHorizontalLine]
];
// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标 // 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
// @iconify-icons/ep icons.forEach(([name, icon]) => {
import Menu from "@iconify-icons/ep/menu"; addIcon(name as string, getSvgInfo(icon as string));
import Edit from "@iconify-icons/ep/edit"; });
import SetUp from "@iconify-icons/ep/set-up";
import Guide from "@iconify-icons/ep/guide";
import Monitor from "@iconify-icons/ep/monitor";
import Lollipop from "@iconify-icons/ep/lollipop";
import Histogram from "@iconify-icons/ep/histogram";
import HomeFilled from "@iconify-icons/ep/home-filled";
addIcon("ep:menu", Menu);
addIcon("ep:edit", Edit);
addIcon("ep:set-up", SetUp);
addIcon("ep:guide", Guide);
addIcon("ep:monitor", Monitor);
addIcon("ep:lollipop", Lollipop);
addIcon("ep:histogram", Histogram);
addIcon("ep:home-filled", HomeFilled);
// @iconify-icons/ri
import Tag from "@iconify-icons/ri/bookmark-2-line";
import Ppt from "@iconify-icons/ri/file-ppt-2-line";
import Card from "@iconify-icons/ri/bank-card-line";
import Role from "@iconify-icons/ri/admin-fill";
import Info from "@iconify-icons/ri/file-info-line";
import Dept from "@iconify-icons/ri/git-branch-line";
import Table from "@iconify-icons/ri/table-line";
import Links from "@iconify-icons/ri/links-fill";
import Search from "@iconify-icons/ri/search-line";
import FlUser from "@iconify-icons/ri/admin-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import MindMap from "@iconify-icons/ri/mind-map";
import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
import LoginLog from "@iconify-icons/ri/window-line";
import Artboard from "@iconify-icons/ri/artboard-line";
import SystemLog from "@iconify-icons/ri/file-search-line";
import ListCheck from "@iconify-icons/ri/list-check";
import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
import OnlineUser from "@iconify-icons/ri/user-voice-line";
import EditBoxLine from "@iconify-icons/ri/edit-box-line";
import OperationLog from "@iconify-icons/ri/history-fill";
import InformationLine from "@iconify-icons/ri/information-line";
import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
addIcon("ri:bookmark-2-line", Tag);
addIcon("ri:file-ppt-2-line", Ppt);
addIcon("ri:bank-card-line", Card);
addIcon("ri:admin-fill", Role);
addIcon("ri:file-info-line", Info);
addIcon("ri:git-branch-line", Dept);
addIcon("ri:links-fill", Links);
addIcon("ri:table-line", Table);
addIcon("ri:search-line", Search);
addIcon("ri:admin-line", FlUser);
addIcon("ri:settings-3-line", Setting);
addIcon("ri:mind-map", MindMap);
addIcon("ri:bar-chart-horizontal-line", BarChart);
addIcon("ri:window-line", LoginLog);
addIcon("ri:file-search-line", SystemLog);
addIcon("ri:artboard-line", Artboard);
addIcon("ri:list-check", ListCheck);
addIcon("ri:ubuntu-fill", UbuntuFill);
addIcon("ri:user-voice-line", OnlineUser);
addIcon("ri:edit-box-line", EditBoxLine);
addIcon("ri:history-fill", OperationLog);
addIcon("ri:information-line", InformationLine);
addIcon("ri:terminal-window-line", TerminalWindowLine);
addIcon("ri:checkbox-circle-line", CheckboxCircleLine);

18
src/components/RePureTableBar/src/bar.tsx
View File

@ -18,8 +18,8 @@ import {
getKeyList getKeyList
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "~icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import DragIcon from "@/assets/table-bar/drag.svg?component"; import DragIcon from "@/assets/table-bar/drag.svg?component";
import ExpandIcon from "@/assets/table-bar/expand.svg?component"; import ExpandIcon from "@/assets/table-bar/expand.svg?component";
import RefreshIcon from "@/assets/table-bar/refresh.svg?component"; import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@ -87,9 +87,9 @@ export default defineComponent({
"text-black", "text-black",
"dark:text-white", "dark:text-white",
"duration-100", "duration-100",
"hover:!text-primary", "hover:text-primary!",
"cursor-pointer", "cursor-pointer",
"outline-none" "outline-hidden"
]; ];
}); });
@ -255,12 +255,12 @@ export default defineComponent({
<div <div
{...attrs} {...attrs}
class={[ class={[
"w-[99/100]", "w-full",
"px-2", "px-2",
"pb-2", "pb-2",
"bg-bg_color", "bg-bg_color",
isFullscreen.value isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"] ? ["h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2" : "mt-2"
]} ]}
> >
@ -317,7 +317,7 @@ export default defineComponent({
> >
<div class={[topClass.value]}> <div class={[topClass.value]}>
<el-checkbox <el-checkbox
class="!-mr-1" class="-mr-1!"
label="列展示" label="列展示"
v-model={checkAll.value} v-model={checkAll.value}
indeterminate={isIndeterminate.value} indeterminate={isIndeterminate.value}
@ -347,8 +347,8 @@ export default defineComponent({
class={[ class={[
"drag-btn w-[16px] mr-2", "drag-btn w-[16px] mr-2",
isFixedColumn(item) isFixedColumn(item)
? "!cursor-no-drop" ? "cursor-no-drop!"
: "!cursor-grab" : "cursor-grab!"
]} ]}
onMouseenter={(event: { onMouseenter={(event: {
preventDefault: () => void; preventDefault: () => void;

2
src/components/ReQrcode/src/index.tsx
View File

@ -11,7 +11,7 @@ import "./index.scss";
import propTypes from "@/utils/propTypes"; import propTypes from "@/utils/propTypes";
import { isString, cloneDeep } from "@pureadmin/utils"; import { isString, cloneDeep } from "@pureadmin/utils";
import QRCode, { type QRCodeRenderersOptions } from "qrcode"; import QRCode, { type QRCodeRenderersOptions } from "qrcode";
import RefreshRight from "@iconify-icons/ep/refresh-right"; import RefreshRight from "~icons/ep/refresh-right";
interface QrcodeLogo { interface QrcodeLogo {
src?: string; src?: string;

4
src/components/ReSeamlessScroll/src/utils.ts
View File

@ -60,12 +60,15 @@ export function copyObj() {
copyIsArray, copyIsArray,
clone, clone,
i = 1, i = 1,
// eslint-disable-next-line prefer-rest-params
target = arguments[0] || {}, // 使用||运算符，排除隐式强制类型转换为false的数据类型 target = arguments[0] || {}, // 使用||运算符，排除隐式强制类型转换为false的数据类型
deep = false, deep = false,
// eslint-disable-next-line prefer-const
len = arguments.length; len = arguments.length;
if (typeof target === "boolean") { if (typeof target === "boolean") {
deep = target; deep = target;
// eslint-disable-next-line prefer-rest-params
target = arguments[1] || {}; target = arguments[1] || {};
i++; i++;
} }
@ -79,6 +82,7 @@ export function copyObj() {
for (; i < len; i++) { for (; i < len; i++) {
//所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象 //所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
// eslint-disable-next-line prefer-rest-params
if ((options = arguments[i]) != null) { if ((options = arguments[i]) != null) {
// 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性 // 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
for (name in options) { for (name in options) {

18
src/components/ReVxeTableBar/src/bar.tsx
View File

@ -12,8 +12,8 @@ import {
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "~icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import DragIcon from "@/assets/table-bar/drag.svg?component"; import DragIcon from "@/assets/table-bar/drag.svg?component";
import ExpandIcon from "@/assets/table-bar/expand.svg?component"; import ExpandIcon from "@/assets/table-bar/expand.svg?component";
import RefreshIcon from "@/assets/table-bar/refresh.svg?component"; import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@ -80,9 +80,9 @@ export default defineComponent({
"text-black", "text-black",
"dark:text-white", "dark:text-white",
"duration-100", "duration-100",
"hover:!text-primary", "hover:text-primary!",
"cursor-pointer", "cursor-pointer",
"outline-none" "outline-hidden"
]; ];
}); });
@ -248,12 +248,12 @@ export default defineComponent({
<div <div
{...attrs} {...attrs}
class={[ class={[
"w-[99/100]", "w-full",
"px-2", "px-2",
"pb-2", "pb-2",
"bg-bg_color", "bg-bg_color",
isFullscreen.value isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"] ? ["h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2" : "mt-2"
]} ]}
> >
@ -310,7 +310,7 @@ export default defineComponent({
> >
<div class={[topClass.value]}> <div class={[topClass.value]}>
<el-checkbox <el-checkbox
class="!-mr-1" class="-mr-1!"
label="列展示" label="列展示"
v-model={checkAll.value} v-model={checkAll.value}
indeterminate={isIndeterminate.value} indeterminate={isIndeterminate.value}
@ -340,8 +340,8 @@ export default defineComponent({
class={[ class={[
"drag-btn w-[16px] mr-2", "drag-btn w-[16px] mr-2",
isFixedColumn(item) isFixedColumn(item)
? "!cursor-no-drop" ? "cursor-no-drop!"
: "!cursor-grab" : "cursor-grab!"
]} ]}
onMouseenter={(event: { onMouseenter={(event: {
preventDefault: () => void; preventDefault: () => void;

4
src/directives/ripple/index.ts
View File

@ -32,8 +32,8 @@ const calculate = (
const offset = el.getBoundingClientRect(); const offset = el.getBoundingClientRect();
// 获取点击位置距离 el 的垂直和水平距离 // 获取点击位置距离 el 的垂直和水平距离
let localX = e.clientX - offset.left; const localX = e.clientX - offset.left;
let localY = e.clientY - offset.top; const localY = e.clientY - offset.top;
let radius = 0; let radius = 0;
let scale = 0.3; let scale = 0.3;

16
src/layout/components/lay-navbar/index.vue
View File

@ -9,10 +9,10 @@ import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vu
import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue"; import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component"; import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line"; import AccountSettingsIcon from "~icons/ri/user-settings-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line"; import Setting from "~icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check"; import Check from "~icons/ep/check";
const { const {
layout, layout,
@ -33,7 +33,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</script> </script>
<template> <template>
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]"> <div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
<LaySidebarTopCollapse <LaySidebarTopCollapse
v-if="device === 'mobile'" v-if="device === 'mobile'"
class="hamburger-container" class="hamburger-container"
@ -54,13 +54,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon <GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none" class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/> />
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')" :style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]" :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh" @click="translationCh"
> >
<IconifyIconOffline <IconifyIconOffline
@ -72,7 +72,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')" :style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]" :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn" @click="translationEn"
> >
<span v-show="locale === 'en'" class="check-en"> <span v-show="locale === 'en'" class="check-en">

2
src/layout/components/lay-notice/components/NoticeItem.vue
View File

@ -49,7 +49,7 @@ function hoverDescription(event, description) {
<template> <template>
<div <div
class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]" class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
> >
<el-avatar <el-avatar
v-if="noticeItem.avatar" v-if="noticeItem.avatar"

2
src/layout/components/lay-notice/index.vue
View File

@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { noticesData } from "./data"; import { noticesData } from "./data";
import NoticeList from "./components/NoticeList.vue"; import NoticeList from "./components/NoticeList.vue";
import BellIcon from "@iconify-icons/ep/bell"; import BellIcon from "~icons/ep/bell";
const { t } = useI18n(); const { t } = useI18n();
const noticesNum = ref(0); const noticesNum = ref(0);

8
src/layout/components/lay-panel/index.vue
View File

@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core"; import { onClickOutside } from "@vueuse/core";
import { ref, computed, onMounted, onBeforeUnmount } from "vue"; import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import CloseIcon from "@iconify-icons/ep/close"; import CloseIcon from "~icons/ep/close";
const target = ref(null); const target = ref(null);
const show = ref<Boolean>(false); const show = ref<Boolean>(false);
@ -16,7 +16,7 @@ const iconClass = computed(() => {
"flex", "flex",
"justify-center", "justify-center",
"items-center", "items-center",
"outline-none", "outline-hidden",
"rounded-[4px]", "rounded-[4px]",
"cursor-pointer", "cursor-pointer",
"transition-colors", "transition-colors",
@ -51,7 +51,7 @@ onBeforeUnmount(() => {
<div class="right-panel-background" /> <div class="right-panel-background" />
<div ref="target" class="right-panel bg-bg_color"> <div ref="target" class="right-panel bg-bg_color">
<div <div
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]" class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
> >
<h4 class="dark:text-white"> <h4 class="dark:text-white">
{{ t("panel.pureSystemSet") }} {{ t("panel.pureSystemSet") }}
@ -78,7 +78,7 @@ onBeforeUnmount(() => {
</el-scrollbar> </el-scrollbar>
<div <div
class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]" class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
> >
<el-button <el-button
v-tippy="{ v-tippy="{

6
src/layout/components/lay-search/components/SearchFooter.vue
View File

@ -3,10 +3,10 @@ import { useI18n } from "vue-i18n";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component"; import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
import EnterOutlined from "@/assets/svg/enter_outlined.svg?component"; import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line"; import ArrowUpLine from "~icons/ri/arrow-up-line";
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line"; import ArrowDownLine from "~icons/ri/arrow-down-line";
withDefaults(defineProps<{ total: number }>(), { withDefaults(defineProps<{ total?: number }>(), {
total: 0 total: 0
}); });

4
src/layout/components/lay-search/components/SearchHistoryItem.vue
View File

@ -2,8 +2,8 @@
import type { optionsItem } from "../types"; import type { optionsItem } from "../types";
import { transformI18n } from "@/plugins/i18n"; import { transformI18n } from "@/plugins/i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import StarIcon from "@iconify-icons/ep/star"; import StarIcon from "~icons/ep/star";
import CloseIcon from "@iconify-icons/ep/close"; import CloseIcon from "~icons/ep/close";
interface Props { interface Props {
item: optionsItem; item: optionsItem;

2
src/layout/components/lay-search/components/SearchModal.vue
View File

@ -13,7 +13,7 @@ import { ref, computed, shallowRef, watch } from "vue";
import { useDebounceFn, onKeyStroke } from "@vueuse/core"; import { useDebounceFn, onKeyStroke } from "@vueuse/core";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils"; import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
import SearchIcon from "@iconify-icons/ri/search-line"; import SearchIcon from "~icons/ri/search-line";
interface Props { interface Props {
/** 弹窗显隐 */ /** 弹窗显隐 */

2
src/layout/components/lay-search/index.vue
View File

@ -14,7 +14,7 @@ function handleSearch() {
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"
@click="handleSearch" @click="handleSearch"
> >
<IconifyIconOffline icon="ri:search-line" /> <IconifyIconOffline icon="ri/search-line" />
</div> </div>
<SearchModal v-model:value="show" /> <SearchModal v-model:value="show" />
</div> </div>

22
src/layout/components/lay-setting/index.vue
View File

@ -19,9 +19,9 @@ import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils"; import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
import Check from "@iconify-icons/ep/check"; import Check from "~icons/ep/check";
import LeftArrow from "@iconify-icons/ri/arrow-left-s-line"; import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
import RightArrow from "@iconify-icons/ri/arrow-right-s-line"; import RightArrow from "~icons/ri/arrow-right-s-line?width=20&height=20";
import DayIcon from "@/assets/svg/day.svg?component"; import DayIcon from "@/assets/svg/day.svg?component";
import DarkIcon from "@/assets/svg/dark.svg?component"; import DarkIcon from "@/assets/svg/dark.svg?component";
import SystemIcon from "@/assets/svg/system.svg?component"; import SystemIcon from "@/assets/svg/system.svg?component";
@ -189,7 +189,7 @@ const getThemeColor = computed(() => {
}); });
const pClass = computed(() => { const pClass = computed(() => {
return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"]; return ["mb-[12px]!", "font-medium", "text-sm", "dark:text-white"];
}); });
const themeOptions = computed<Array<OptionsType>>(() => { const themeOptions = computed<Array<OptionsType>>(() => {
@ -335,7 +335,7 @@ onUnmounted(() => removeMatchMedia);
" "
/> />
<p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p> <p :class="['mt-5!', pClass]">{{ t("panel.pureThemeColor") }}</p>
<ul class="theme-color"> <ul class="theme-color">
<li <li
v-for="(item, index) in themeColors" v-for="(item, index) in themeColors"
@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
</li> </li>
</ul> </ul>
<p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p> <p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<ul class="pure-theme"> <ul class="pure-theme">
<li <li
ref="verticalRef" ref="verticalRef"
@ -397,7 +397,7 @@ onUnmounted(() => removeMatchMedia);
</ul> </ul>
<span v-if="useAppStoreHook().getViewportWidth > 1280"> <span v-if="useAppStoreHook().getViewportWidth > 1280">
<p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p> <p :class="['mt-5!', pClass]">{{ t("panel.pureStretch") }}</p>
<Segmented <Segmented
resize resize
class="mb-2 select-none" class="mb-2 select-none"
@ -426,21 +426,19 @@ onUnmounted(() => removeMatchMedia);
> >
<IconifyIconOffline <IconifyIconOffline
:icon="settings.stretch ? RightArrow : LeftArrow" :icon="settings.stretch ? RightArrow : LeftArrow"
height="20"
/> />
<div <div
class="flex-grow border-b border-dashed" class="grow border-0 border-b border-dashed"
style="border-color: var(--el-color-primary)" style="border-color: var(--el-color-primary)"
/> />
<IconifyIconOffline <IconifyIconOffline
:icon="settings.stretch ? LeftArrow : RightArrow" :icon="settings.stretch ? LeftArrow : RightArrow"
height="20"
/> />
</div> </div>
</button> </button>
</span> </span>
<p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p> <p :class="['mt-4!', pClass]">{{ t("panel.pureTagsStyle") }}</p>
<Segmented <Segmented
resize resize
class="select-none" class="select-none"
@ -449,7 +447,7 @@ onUnmounted(() => removeMatchMedia);
@change="onChange" @change="onChange"
/> />
<p class="mt-5 font-medium text-sm dark:text-white"> <p class="mt-5! font-medium text-sm dark:text-white">
{{ t("panel.pureInterfaceDisplay") }} {{ t("panel.pureInterfaceDisplay") }}
</p> </p>
<ul class="setting"> <ul class="setting">

14
src/layout/components/lay-sidebar/NavHorizontal.vue
View File

@ -12,10 +12,10 @@ import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue"; import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component"; import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line"; import AccountSettingsIcon from "~icons/ri/user-settings-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line"; import Setting from "~icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check"; import Check from "~icons/ep/check";
const menuRef = ref(); const menuRef = ref();
const showLogo = ref( const showLogo = ref(
@ -84,13 +84,13 @@ onMounted(() => {
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon <GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none" class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/> />
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')" :style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]" :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh" @click="translationCh"
> >
<span v-show="locale === 'zh'" class="check-zh"> <span v-show="locale === 'zh'" class="check-zh">
@ -100,7 +100,7 @@ onMounted(() => {
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')" :style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]" :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn" @click="translationEn"
> >
<span v-show="locale === 'en'" class="check-en"> <span v-show="locale === 'en'" class="check-en">

14
src/layout/components/lay-sidebar/NavMix.vue
View File

@ -13,10 +13,10 @@ import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue"
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue"; import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component"; import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line"; import AccountSettingsIcon from "~icons/ri/user-settings-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line"; import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line"; import Setting from "~icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check"; import Check from "~icons/ep/check";
const menuRef = ref(); const menuRef = ref();
const defaultActive = ref(null); const defaultActive = ref(null);
@ -105,13 +105,13 @@ watch(
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon <GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none" class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/> />
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')" :style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]" :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh" @click="translationCh"
> >
<span v-show="locale === 'zh'" class="check-zh"> <span v-show="locale === 'zh'" class="check-zh">
@ -121,7 +121,7 @@ watch(
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')" :style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]" :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn" @click="translationEn"
> >
<span v-show="locale === 'en'" class="check-en"> <span v-show="locale === 'en'" class="check-en">

4
src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
View File

@ -105,12 +105,12 @@ watch(
</script> </script>
<template> <template>
<el-breadcrumb class="!leading-[50px] select-none" separator="/"> <el-breadcrumb class="leading-[50px]! select-none" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item <el-breadcrumb-item
v-for="item in levelList" v-for="item in levelList"
:key="item.path" :key="item.path"
class="!inline !items-stretch" class="inline! items-stretch!"
> >
<a @click.prevent="handleLink(item)"> <a @click.prevent="handleLink(item)">
{{ transformI18n(item.meta.title) }} {{ transformI18n(item.meta.title) }}

4
src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue
View File

@ -4,10 +4,10 @@ import { useI18n } from "vue-i18n";
import { useGlobal } from "@pureadmin/utils"; import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill"; import ArrowLeft from "~icons/ri/arrow-left-double-fill";
interface Props { interface Props {
isActive: boolean; isActive?: boolean;
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {

18
src/layout/components/lay-sidebar/components/SidebarItem.vue
View File

@ -17,10 +17,10 @@ import {
useAttrs useAttrs
} from "vue"; } from "vue";
import ArrowUp from "@iconify-icons/ep/arrow-up-bold"; import ArrowUp from "~icons/ep/arrow-up-bold";
import EpArrowDown from "@iconify-icons/ep/arrow-down-bold"; import EpArrowDown from "~icons/ep/arrow-down-bold";
import ArrowLeft from "@iconify-icons/ep/arrow-left-bold"; import ArrowLeft from "~icons/ep/arrow-left-bold";
import ArrowRight from "@iconify-icons/ep/arrow-right-bold"; import ArrowRight from "~icons/ep/arrow-right-bold";
const attrs = useAttrs(); const attrs = useAttrs();
const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav(); const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();
@ -144,7 +144,7 @@ function resolvePath(routePath) {
item?.pathList?.length === 2) item?.pathList?.length === 2)
" "
truncated truncated
class="!w-full !pl-4 !text-inherit" class="w-full! pl-4! text-inherit!"
> >
{{ transformI18n(onlyOneChild.meta.title) }} {{ transformI18n(onlyOneChild.meta.title) }}
</el-text> </el-text>
@ -156,7 +156,7 @@ function resolvePath(routePath) {
offset: [0, -10], offset: [0, -10],
theme: tooltipEffect theme: tooltipEffect
}" }"
class="!w-full !text-inherit" class="w-full! text-inherit!"
> >
{{ transformI18n(onlyOneChild.meta.title) }} {{ transformI18n(onlyOneChild.meta.title) }}
</ReText> </ReText>
@ -196,9 +196,9 @@ function resolvePath(routePath) {
theme: tooltipEffect theme: tooltipEffect
}" }"
:class="{ :class="{
'!w-full': true, 'w-full!': true,
'!text-inherit': true, 'text-inherit!': true,
'!pl-4': 'pl-4!':
layout !== 'horizontal' && layout !== 'horizontal' &&
isCollapse && isCollapse &&
!toRaw(item.meta.icon) && !toRaw(item.meta.icon) &&

6
src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
View File

@ -4,10 +4,10 @@ import { useI18n } from "vue-i18n";
import { useGlobal } from "@pureadmin/utils"; import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import MenuFold from "@iconify-icons/ri/menu-fold-fill"; import MenuFold from "~icons/ri/menu-fold-fill";
interface Props { interface Props {
isActive: boolean; isActive?: boolean;
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
@ -23,7 +23,7 @@ const iconClass = computed(() => {
"mb-1", "mb-1",
"w-[16px]", "w-[16px]",
"h-[16px]", "h-[16px]",
"inline-block", "inline-block!",
"align-middle", "align-middle",
"cursor-pointer", "cursor-pointer",
"duration-[100ms]" "duration-[100ms]"

8
src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import MenuFold from "@iconify-icons/ri/menu-fold-fill"; import MenuFold from "~icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill"; import MenuUnfold from "~icons/ri/menu-unfold-fill";
interface Props { interface Props {
isActive: boolean; isActive?: boolean;
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
@ -32,7 +32,7 @@ const toggleClick = () => {
> >
<IconifyIconOffline <IconifyIconOffline
:icon="isActive ? MenuFold : MenuUnfold" :icon="isActive ? MenuFold : MenuUnfold"
class="inline-block align-middle hover:text-primary dark:hover:!text-white" class="inline-block align-middle hover:text-primary dark:hover:text-white!"
/> />
</div> </div>
</template> </template>

12
src/layout/components/lay-tag/index.vue
View File

@ -18,11 +18,11 @@ import {
useResizeObserver useResizeObserver
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "~icons/ri/fullscreen-fill";
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line"; import ArrowDown from "~icons/ri/arrow-down-s-line";
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line"; import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line"; import ArrowLeftSLine from "~icons/ri/arrow-left-s-line";
const { const {
Close, Close,
@ -589,7 +589,7 @@ onBeforeUnmount(() => {
> >
<template v-if="showModel !== 'chrome'"> <template v-if="showModel !== 'chrome'">
<span <span
class="tag-title dark:!text-text_color_primary dark:hover:!text-primary" class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
> >
{{ transformI18n(item.meta.title) }} {{ transformI18n(item.meta.title) }}
</span> </span>

6
src/layout/hooks/useNav.ts
View File

@ -14,8 +14,8 @@ import { useUserStoreHook } from "@/store/modules/user";
import { useGlobal, isAllEmpty } from "@pureadmin/utils"; import { useGlobal, isAllEmpty } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "~icons/ri/fullscreen-fill";
const errorInfo = const errorInfo =
"The current routing configuration is incorrect, please check the configuration"; "The current routing configuration is incorrect, please check the configuration";
@ -64,7 +64,7 @@ export function useNav() {
const getDropdownItemClass = computed(() => { const getDropdownItemClass = computed(() => {
return (locale, t) => { return (locale, t) => {
return locale === t ? "" : "dark:hover:!text-primary"; return locale === t ? "" : "dark:hover:text-primary!";
}; };
}); });

14
src/layout/hooks/useTag.ts
View File

@ -21,13 +21,13 @@ import {
hasClass hasClass
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "~icons/ri/fullscreen-fill";
import CloseAllTags from "@iconify-icons/ri/subtract-line"; import CloseAllTags from "~icons/ri/subtract-line";
import CloseOtherTags from "@iconify-icons/ri/text-spacing"; import CloseOtherTags from "~icons/ri/text-spacing";
import CloseRightTags from "@iconify-icons/ri/text-direction-l"; import CloseRightTags from "~icons/ri/text-direction-l";
import CloseLeftTags from "@iconify-icons/ri/text-direction-r"; import CloseLeftTags from "~icons/ri/text-direction-r";
import RefreshRight from "@iconify-icons/ep/refresh-right"; import RefreshRight from "~icons/ep/refresh-right";
import Close from "@iconify-icons/ep/close"; import Close from "~icons/ep/close";
export function useTags() { export function useTags() {
const route = useRoute(); const route = useRoute();

8
src/layout/types.ts
View File

@ -1,4 +1,4 @@
import type { IconifyIcon } from "@iconify/vue"; import type { FunctionalComponent } from "vue";
const { VITE_HIDE_HOME } = import.meta.env; const { VITE_HIDE_HOME } = import.meta.env;
export const routerArrays: Array<RouteConfigs> = export const routerArrays: Array<RouteConfigs> =
@ -8,7 +8,7 @@ export const routerArrays: Array<RouteConfigs> =
path: "/welcome", path: "/welcome",
meta: { meta: {
title: "menus.pureHome", title: "menus.pureHome",
icon: "ep:home-filled" icon: "ep/home-filled"
} }
} }
] ]
@ -16,7 +16,7 @@ export const routerArrays: Array<RouteConfigs> =
export type routeMetaType = { export type routeMetaType = {
title?: string; title?: string;
icon?: string | IconifyIcon; icon?: string | FunctionalComponent;
showLink?: boolean; showLink?: boolean;
savedPosition?: boolean; savedPosition?: boolean;
auths?: Array<string>; auths?: Array<string>;
@ -36,7 +36,7 @@ export type multiTagsType = {
}; };
export type tagsViewsType = { export type tagsViewsType = {
icon: string | IconifyIcon; icon: string | FunctionalComponent;
text: string; text: string;
divided: boolean; divided: boolean;
disabled: boolean; disabled: boolean;

2
src/plugins/i18n.ts
View File

@ -10,7 +10,7 @@ import zhLocale from "element-plus/es/locale/lang/zh-cn";
const siphonI18n = (function () { const siphonI18n = (function () {
// 仅初始化一次国际化配置 // 仅初始化一次国际化配置
let cache = Object.fromEntries( const cache = Object.fromEntries(
Object.entries( Object.entries(
import.meta.glob("../../locales/*.y(a)?ml", { eager: true }) import.meta.glob("../../locales/*.y(a)?ml", { eager: true })
).map(([key, value]: any) => { ).map(([key, value]: any) => {

2
src/router/modules/able.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/able", path: "/able",
redirect: "/able/watermark", redirect: "/able/watermark",
meta: { meta: {
icon: "ri:ubuntu-fill", icon: "ri/ubuntu-fill",
title: $t("menus.pureAble"), title: $t("menus.pureAble"),
rank: able rank: able
}, },

2
src/router/modules/about.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/about", path: "/about",
redirect: "/about/index", redirect: "/about/index",
meta: { meta: {
icon: "ri:file-info-line", icon: "ri/file-info-line",
title: $t("menus.pureAbout"), title: $t("menus.pureAbout"),
rank: about rank: about
}, },

2
src/router/modules/board.ts
View File

@ -6,7 +6,7 @@ export default {
path: "/board", path: "/board",
redirect: "/board/index", redirect: "/board/index",
meta: { meta: {
icon: "ri:artboard-line", icon: "ri/artboard-line",
title: $t("menus.pureBoard"), title: $t("menus.pureBoard"),
rank: board rank: board
}, },

2
src/router/modules/chatai.ts
View File

@ -4,7 +4,7 @@ export default {
path: "/chatai", path: "/chatai",
redirect: "/chatai/index", redirect: "/chatai/index",
meta: { meta: {
icon: "ri:chat-search-line", icon: "ri/chat-search-line",
title: "chat-ai", title: "chat-ai",
rank: chatai rank: chatai
}, },

2
src/router/modules/codemirror.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/codemirror", path: "/codemirror",
redirect: "/codemirror/index", redirect: "/codemirror/index",
meta: { meta: {
icon: "ri:code-box-line", icon: "ri/code-box-line",
title: $t("menus.pureCodeMirror"), title: $t("menus.pureCodeMirror"),
rank: codemirror rank: codemirror
}, },

2
src/router/modules/components.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/components", path: "/components",
redirect: "/components/dialog", redirect: "/components/dialog",
meta: { meta: {
icon: "ep:menu", icon: "ep/menu",
title: $t("menus.pureComponents"), title: $t("menus.pureComponents"),
rank: components rank: components
}, },

2
src/router/modules/editor.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/editor", path: "/editor",
redirect: "/editor/index", redirect: "/editor/index",
meta: { meta: {
icon: "ep:edit", icon: "ep/edit",
title: $t("menus.pureEditor"), title: $t("menus.pureEditor"),
rank: editor rank: editor
}, },

2
src/router/modules/error.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/error", path: "/error",
redirect: "/error/403", redirect: "/error/403",
meta: { meta: {
icon: "ri:information-line", icon: "ri/information-line",
// showLink: false, // showLink: false,
title: $t("menus.pureAbnormal"), title: $t("menus.pureAbnormal"),
rank: error rank: error

2
src/router/modules/flowchart.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/flow-chart", path: "/flow-chart",
redirect: "/flow-chart/index", redirect: "/flow-chart/index",
meta: { meta: {
icon: "ep:set-up", icon: "ep/set-up",
title: $t("menus.pureFlowChart"), title: $t("menus.pureFlowChart"),
rank: flowchart rank: flowchart
}, },

2
src/router/modules/form.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/form", path: "/form",
redirect: "/form/index", redirect: "/form/index",
meta: { meta: {
icon: "ri:edit-box-line", icon: "ri/edit-box-line",
title: $t("menus.pureSchemaForm"), title: $t("menus.pureSchemaForm"),
rank: form rank: form
}, },

2
src/router/modules/formdesign.ts
View File

@ -6,7 +6,7 @@ export default {
path: "/form-design", path: "/form-design",
redirect: "/form-design/index", redirect: "/form-design/index",
meta: { meta: {
icon: "ri:terminal-window-line", icon: "ri/terminal-window-line",
title: $t("menus.pureFormDesign"), title: $t("menus.pureFormDesign"),
rank: formdesign rank: formdesign
}, },

2
src/router/modules/ganttastic.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/ganttastic", path: "/ganttastic",
redirect: "/ganttastic/index", redirect: "/ganttastic/index",
meta: { meta: {
icon: "ri:bar-chart-horizontal-line", icon: "ri/bar-chart-horizontal-line",
title: $t("menus.pureGanttastic"), title: $t("menus.pureGanttastic"),
rank: ganttastic rank: ganttastic
}, },

2
src/router/modules/guide.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/guide", path: "/guide",
redirect: "/guide/index", redirect: "/guide/index",
meta: { meta: {
icon: "ep:guide", icon: "ep/guide",
title: $t("menus.pureGuide"), title: $t("menus.pureGuide"),
rank: guide rank: guide
}, },

2
src/router/modules/home.ts
View File

@ -9,7 +9,7 @@ export default {
component: Layout, component: Layout,
redirect: "/welcome", redirect: "/welcome",
meta: { meta: {
icon: "ep:home-filled", icon: "ep/home-filled",
title: $t("menus.pureHome"), title: $t("menus.pureHome"),
rank: home rank: home
}, },

4
src/router/modules/list.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/list", path: "/list",
redirect: "/list/card", redirect: "/list/card",
meta: { meta: {
icon: "ri:list-check", icon: "ri/list-check",
title: $t("menus.pureList"), title: $t("menus.pureList"),
rank: list rank: list
}, },
@ -15,7 +15,7 @@ export default {
name: "CardList", name: "CardList",
component: () => import("@/views/list/card/index.vue"), component: () => import("@/views/list/card/index.vue"),
meta: { meta: {
icon: "ri:bank-card-line", icon: "ri/bank-card-line",
title: $t("menus.pureCardList"), title: $t("menus.pureCardList"),
showParent: true showParent: true
} }

2
src/router/modules/markdown.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/markdown", path: "/markdown",
redirect: "/markdown/index", redirect: "/markdown/index",
meta: { meta: {
icon: "ri:markdown-line", icon: "ri/markdown-line",
title: $t("menus.pureMarkdown"), title: $t("menus.pureMarkdown"),
rank: markdown rank: markdown
}, },

2
src/router/modules/mind.ts
View File

@ -6,7 +6,7 @@ export default {
path: "/mind-map", path: "/mind-map",
redirect: "/mind-map/index", redirect: "/mind-map/index",
meta: { meta: {
icon: "ri:mind-map", icon: "ri/mind-map",
title: $t("menus.pureMindMap"), title: $t("menus.pureMindMap"),
rank: mind rank: mind
}, },

2
src/router/modules/nested.ts
View File

@ -6,7 +6,7 @@ export default {
redirect: "/nested/menu1/menu1-1", redirect: "/nested/menu1/menu1-1",
meta: { meta: {
title: $t("menus.pureMenus"), title: $t("menus.pureMenus"),
icon: "ep:histogram", icon: "ep/histogram",
rank: nested rank: nested
}, },
children: [ children: [

2
src/router/modules/ppt.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/ppt", path: "/ppt",
redirect: "/ppt/index", redirect: "/ppt/index",
meta: { meta: {
icon: "ri:file-ppt-2-line", icon: "ri/file-ppt-2-line",
title: "PPT", title: "PPT",
rank: ppt rank: ppt
}, },

2
src/router/modules/result.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/result", path: "/result",
redirect: "/result/success", redirect: "/result/success",
meta: { meta: {
icon: "ri:checkbox-circle-line", icon: "ri/checkbox-circle-line",
title: $t("menus.pureResult"), title: $t("menus.pureResult"),
rank: result rank: result
}, },

2
src/router/modules/table.ts
View File

@ -5,7 +5,7 @@ export default {
path: "/table", path: "/table",
redirect: "/table/index", redirect: "/table/index",
meta: { meta: {
icon: "ri:table-line", icon: "ri/table-line",
title: $t("menus.pureTable"), title: $t("menus.pureTable"),
rank: table rank: table
}, },

2
src/router/modules/vueflow.ts
View File

@ -4,7 +4,7 @@ export default {
path: "/vue-flow", path: "/vue-flow",
redirect: "/vue-flow/index", redirect: "/vue-flow/index",
meta: { meta: {
icon: "ep:set-up", icon: "ep/set-up",
title: "vue-flow", title: "vue-flow",
rank: vueflow rank: vueflow
}, },

9
src/style/reset.scss
View File

@ -1,12 +1,3 @@
*,
::before,
::after {
box-sizing: border-box;
border-color: currentColor;
border-style: solid;
border-width: 0;
}
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;

55
src/style/tailwind.css
View File

@ -1,21 +1,46 @@
@tailwind base; @layer theme, base, components, utilities;
@tailwind components; @import "tailwindcss/theme.css" layer(theme);
@tailwind utilities; @import "tailwindcss/utilities.css" layer(utilities);
@layer components { @custom-variant dark (&:is(.dark *));
.flex-c {
@apply flex justify-center items-center;
}
.flex-ac { @theme {
@apply flex justify-around items-center; --color-bg_color: var(--el-bg-color);
} --color-primary: var(--el-color-primary);
--color-text_color_primary: var(--el-text-color-primary);
--color-text_color_regular: var(--el-text-color-regular);
}
.flex-bc { /*
@apply flex justify-between items-center; The default border color has changed to `currentColor` in Tailwind CSS v4,
} so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
.navbar-bg-hover { If we ever want to remove these styles, we need to add an explicit border
@apply dark:text-white dark:hover:!bg-[#242424]; color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
} }
} }
@utility flex-c {
@apply flex justify-center items-center;
}
@utility flex-ac {
@apply flex justify-around items-center;
}
@utility flex-bc {
@apply flex justify-between items-center;
}
@utility navbar-bg-hover {
@apply dark:text-white dark:hover:bg-[#242424]!;
}

2
src/utils/print.ts
View File

@ -140,8 +140,10 @@ Print.prototype = {
"position:absolute;width:0;height:0;top:-10px;left:-10px;" "position:absolute;width:0;height:0;top:-10px;left:-10px;"
); );
// eslint-disable-next-line prefer-const
w = f.contentWindow || f.contentDocument; w = f.contentWindow || f.contentDocument;
// eslint-disable-next-line prefer-const
doc = f.contentDocument || f.contentWindow.document; doc = f.contentDocument || f.contentWindow.document;
doc.open(); doc.open();
doc.write(content); doc.write(content);

12
src/views/able/directives.vue
View File

@ -76,7 +76,7 @@ function onReset() {
immediate: true, immediate: true,
timeout: 1000 timeout: 1000
}" }"
class="!w-[200px]" class="w-[200px]!"
clearable clearable
@clear="onInput" @clear="onInput"
/> />
@ -86,7 +86,7 @@ function onReset() {
<el-input <el-input
v-model="searchTwo" v-model="searchTwo"
v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }" v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
class="!w-[200px]" class="w-[200px]!"
clearable clearable
/> />
</div> </div>
@ -100,7 +100,7 @@ function onReset() {
timeout: 400, timeout: 400,
params: { name: '小明', sex: '男' } params: { name: '小明', sex: '男' }
}" }"
class="!w-[200px]" class="w-[200px]!"
clearable clearable
/> />
</div> </div>
@ -112,7 +112,7 @@ function onReset() {
<el-input <el-input
v-model="searchFour" v-model="searchFour"
v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }" v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
class="!w-[200px]" class="w-[200px]!"
clearable clearable
/> />
</div> </div>
@ -125,7 +125,7 @@ function onReset() {
fn: onInputFive, fn: onInputFive,
params: { name: '小明', sex: '男' } params: { name: '小明', sex: '男' }
}" }"
class="!w-[200px]" class="w-[200px]!"
clearable clearable
/> />
</div> </div>
@ -134,7 +134,7 @@ function onReset() {
<div class="mb-2"> <div class="mb-2">
文本复制指令（双击输入框内容即可复制） 文本复制指令（双击输入框内容即可复制）
<el-input v-model="searchSix" v-copy="searchSix" class="!w-[200px]" /> <el-input v-model="searchSix" v-copy="searchSix" class="w-[200px]!" />
</div> </div>
<div> <div>
文本复制指令（自定义触发事件，单击复制） 文本复制指令（自定义触发事件，单击复制）

4
src/views/able/infinite-scroll.vue
View File

@ -51,7 +51,9 @@ const load = () => {
代码位置 src/views/able/infinite-scroll.vue 代码位置 src/views/able/infinite-scroll.vue
</el-link> </el-link>
</template> </template>
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p> <div class="mb-2">
{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}
</div>
<el-table <el-table
v-el-table-infinite-scroll="load" v-el-table-infinite-scroll="load"
border border

2
src/views/able/menu-tree.vue
View File

@ -7,7 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { extractPathList, deleteChildren } from "@/utils/tree"; import { extractPathList, deleteChildren } from "@/utils/tree";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types"; import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
import NodeTree from "@iconify-icons/ri/node-tree"; import NodeTree from "~icons/ri/node-tree";
defineOptions({ defineOptions({
name: "MenuTree" name: "MenuTree"

4
src/views/able/pinyin.vue
View File

@ -21,8 +21,8 @@ defineOptions({
</div> </div>
</template> </template>
<p v-html="html('带 音 调')" /> <p v-html="html('带 音 调')" />
<p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" /> <p class="mt-2!" v-html="html('不 带 音 调', { toneType: 'none' })" />
<p class="mt-2 custom" v-html="html('自 定 义 样 式')" /> <p class="mt-2! custom" v-html="html('自 定 义 样 式')" />
</el-card> </el-card>
</template> </template>

2
src/views/able/print/index.vue
View File

@ -83,7 +83,7 @@ const tableData: User[] = [
<span class="font-medium">打印功能（报表、图表、图片）</span> <span class="font-medium">打印功能（报表、图表、图片）</span>
<el-select <el-select
v-model="value" v-model="value"
class="!w-[100px] mr-2" class="w-[100px]! mr-2"
placeholder="Select" placeholder="Select"
size="small" size="small"
> >

2
src/views/able/sensitive.vue
View File

@ -45,6 +45,6 @@ function onInput() {
</el-tag> </el-tag>
</div> </div>
<el-input v-model="modelValue" @input="onInput" /> <el-input v-model="modelValue" @input="onInput" />
<p class="mt-2">{{ modelValue }}</p> <p class="mt-2!">{{ modelValue }}</p>
</el-card> </el-card>
</template> </template>

2
src/views/able/video.vue
View File

@ -2,7 +2,7 @@
import { onMounted } from "vue"; import { onMounted } from "vue";
import { deviceDetection } from "@pureadmin/utils"; import { deviceDetection } from "@pureadmin/utils";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import VideoPlay from "@iconify-icons/ep/video-play"; import VideoPlay from "~icons/ep/video-play";
import Player from "xgplayer"; import Player from "xgplayer";
import "xgplayer/dist/index.min.css"; import "xgplayer/dist/index.min.css";

2
src/views/able/watermark.vue
View File

@ -53,7 +53,7 @@ onBeforeUnmount(() => {
代码位置 src/views/able/watermark.vue 代码位置 src/views/able/watermark.vue
</el-link> </el-link>
</template> </template>
<el-space wrap class="!mb-2"> <el-space wrap class="mb-2!">
<span> 请输入要创建水印的值：</span> <span> 请输入要创建水印的值：</span>
<el-input v-model="value" class="mr-4" style="width: 200px" clearable /> <el-input v-model="value" class="mr-4" style="width: 200px" clearable />
<span>请选择要创建水印的颜色：</span> <span>请选择要创建水印的颜色：</span>

4
src/views/able/wavesurfer/index.vue
View File

@ -103,13 +103,13 @@ onBeforeUnmount(() => {
</template> </template>
<div <div
v-loading="loading" v-loading="loading"
class="w-8/12 !m-auto !mt-[20px]" class="w-8/12 m-auto! mt-[20px]!"
element-loading-background="transparent" element-loading-background="transparent"
> >
<div ref="wavesurferRef" /> <div ref="wavesurferRef" />
<div v-show="totalTime" class="flex justify-between"> <div v-show="totalTime" class="flex justify-between">
<span class="text-[#81888f]">00:00</span> <span class="text-[#81888f]">00:00</span>
<h1 class="text-4xl mt-2">{{ curTime }}</h1> <h1 class="text-4xl mt-2!">{{ curTime }}</h1>
<span class="text-[#81888f]">{{ totalTime }}</span> <span class="text-[#81888f]">{{ totalTime }}</span>
</div> </div>
<div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto"> <div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto">

8
src/views/about/columns.tsx
View File

@ -7,7 +7,7 @@ export function useColumns() {
minWidth: 100, minWidth: 100,
cellRenderer: () => { cellRenderer: () => {
return ( return (
<el-tag size="large" class="!text-base"> <el-tag size="large" class="text-base!">
{version} {version}
</el-tag> </el-tag>
); );
@ -18,7 +18,7 @@ export function useColumns() {
minWidth: 120, minWidth: 120,
cellRenderer: () => { cellRenderer: () => {
return ( return (
<el-tag size="large" class="!text-base"> <el-tag size="large" class="text-base!">
{lastBuildTime} {lastBuildTime}
</el-tag> </el-tag>
); );
@ -29,7 +29,7 @@ export function useColumns() {
minWidth: 140, minWidth: 140,
cellRenderer: () => { cellRenderer: () => {
return ( return (
<el-tag size="large" class="!text-base"> <el-tag size="large" class="text-base!">
{engines.node} {engines.node}
</el-tag> </el-tag>
); );
@ -40,7 +40,7 @@ export function useColumns() {
minWidth: 140, minWidth: 140,
cellRenderer: () => { cellRenderer: () => {
return ( return (
<el-tag size="large" class="!text-base"> <el-tag size="large" class="text-base!">
{engines.pnpm} {engines.pnpm}
</el-tag> </el-tag>
); );

2
src/views/account-settings/components/AccountManagement.vue
View File

@ -43,7 +43,7 @@ function onClick(item) {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]' deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]" ]"
> >
<h3 class="my-8">账户管理</h3> <h3 class="my-8!">账户管理</h3>
<div v-for="(item, index) in list" :key="index"> <div v-for="(item, index) in list" :key="index">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-1"> <div class="flex-1">

2
src/views/account-settings/components/Preferences.vue
View File

@ -38,7 +38,7 @@ function onChange(val, item) {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]' deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]" ]"
> >
<h3 class="my-8">偏好设置</h3> <h3 class="my-8!">偏好设置</h3>
<div v-for="(item, index) in list" :key="index"> <div v-for="(item, index) in list" :key="index">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-1"> <div class="flex-1">

6
src/views/account-settings/components/Profile.vue
View File

@ -6,7 +6,7 @@ import { type UserInfo, getMine } from "@/api/user";
import type { FormInstance, FormRules } from "element-plus"; import type { FormInstance, FormRules } from "element-plus";
import ReCropperPreview from "@/components/ReCropperPreview"; import ReCropperPreview from "@/components/ReCropperPreview";
import { createFormData, deviceDetection } from "@pureadmin/utils"; import { createFormData, deviceDetection } from "@pureadmin/utils";
import uploadLine from "@iconify-icons/ri/upload-line"; import uploadLine from "~icons/ri/upload-line";
defineOptions({ defineOptions({
name: "Profile" name: "Profile"
@ -110,7 +110,7 @@ getMine().then(res => {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]' deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]" ]"
> >
<h3 class="my-8">个人信息</h3> <h3 class="my-8!">个人信息</h3>
<el-form <el-form
ref="userInfoFormRef" ref="userInfoFormRef"
label-position="top" label-position="top"
@ -128,7 +128,7 @@ getMine().then(res => {
:show-file-list="false" :show-file-list="false"
:on-change="onChange" :on-change="onChange"
> >
<el-button plain class="ml-4"> <el-button plain class="ml-4!">
<IconifyIconOffline :icon="uploadLine" /> <IconifyIconOffline :icon="uploadLine" />
<span class="ml-2">更新头像</span> <span class="ml-2">更新头像</span>
</el-button> </el-button>

2
src/views/account-settings/components/SecurityLog.vue
View File

@ -78,7 +78,7 @@ onMounted(() => {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]' deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]" ]"
> >
<h3 class="my-8">安全日志</h3> <h3 class="my-8!">安全日志</h3>
<pure-table <pure-table
row-key="id" row-key="id"
table-layout="auto" table-layout="auto"

18
src/views/account-settings/index.vue
View File

@ -11,11 +11,11 @@ import AccountManagement from "./components/AccountManagement.vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue"; import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
import leftLine from "@iconify-icons/ri/arrow-left-s-line"; import leftLine from "~icons/ri/arrow-left-s-line";
import ProfileIcon from "@iconify-icons/ri/user-3-line"; import ProfileIcon from "~icons/ri/user-3-line";
import PreferencesIcon from "@iconify-icons/ri/settings-3-line"; import PreferencesIcon from "~icons/ri/settings-3-line";
import SecurityLogIcon from "@iconify-icons/ri/window-line"; import SecurityLogIcon from "~icons/ri/window-line";
import AccountManagementIcon from "@iconify-icons/ri/profile-line"; import AccountManagementIcon from "~icons/ri/profile-line";
defineOptions({ defineOptions({
name: "AccountSettings" name: "AccountSettings"
@ -70,12 +70,12 @@ getMine().then(res => {
<el-container class="h-full"> <el-container class="h-full">
<el-aside <el-aside
v-if="isOpen" v-if="isOpen"
class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]" class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r-[1px] border-[var(--pure-border-color)]"
:width="deviceDetection() ? '180px' : '240px'" :width="deviceDetection() ? '180px' : '240px'"
> >
<el-menu :default-active="witchPane" class="pure-account-settings-menu"> <el-menu :default-active="witchPane" class="pure-account-settings-menu">
<el-menu-item <el-menu-item
class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]" class="hover:transition-all! hover:duration-200! hover:text-base! h-[50px]!"
@click="router.go(-1)" @click="router.go(-1)"
> >
<div class="flex items-center"> <div class="flex items-center">
@ -86,10 +86,10 @@ getMine().then(res => {
<div class="flex items-center ml-8 mt-4 mb-4"> <div class="flex items-center ml-8 mt-4 mb-4">
<el-avatar :size="48" :src="userInfo.avatar" /> <el-avatar :size="48" :src="userInfo.avatar" />
<div class="ml-4 flex flex-col max-w-[130px]"> <div class="ml-4 flex flex-col max-w-[130px]">
<ReText class="font-bold !self-baseline"> <ReText class="font-bold self-baseline!">
{{ userInfo.nickname }} {{ userInfo.nickname }}
</ReText> </ReText>
<ReText class="!self-baseline" type="info"> <ReText class="self-baseline!" type="info">
{{ userInfo.username }} {{ userInfo.username }}
</ReText> </ReText>
</div> </div>

2
src/views/components/animatecss.vue
View File

@ -36,6 +36,6 @@ watch(animate, () => {
代码位置 src/views/components/animatecss.vue 代码位置 src/views/components/animatecss.vue
</el-link> </el-link>
</template> </template>
<ReAnimateSelector v-model="animate" class="!w-[200px]" /> <ReAnimateSelector v-model="animate" class="w-[200px]!" />
</el-card> </el-card>
</template> </template>

24
src/views/components/check-button.vue
View File

@ -109,7 +109,7 @@ watch(size, val =>
代码位置 src/views/components/check-button.vue 代码位置 src/views/components/check-button.vue
</el-link> </el-link>
</template> </template>
<p class="mb-2">单选（紧凑风格的按钮样式）</p> <div class="mb-2">单选（紧凑风格的按钮样式）</div>
<el-radio-group <el-radio-group
v-model="radio" v-model="radio"
:size="dynamicSize" :size="dynamicSize"
@ -121,7 +121,7 @@ watch(size, val =>
</el-radio-group> </el-radio-group>
<el-divider /> <el-divider />
<p class="mb-2">单选（带有边框）</p> <div class="mb-2">单选（带有边框）</div>
<el-radio-group <el-radio-group
v-model="radioBox" v-model="radioBox"
:size="dynamicSize" :size="dynamicSize"
@ -133,7 +133,7 @@ watch(size, val =>
</el-radio-group> </el-radio-group>
<el-divider /> <el-divider />
<p class="mb-2">单选（自定义内容）</p> <div class="mb-2">单选（自定义内容）</div>
<el-radio-group <el-radio-group
v-model="radioCustom" v-model="radioCustom"
:size="dynamicSize" :size="dynamicSize"
@ -160,7 +160,7 @@ watch(size, val =>
</el-radio-group> </el-radio-group>
<el-divider /> <el-divider />
<p class="mb-2">多选（紧凑风格的按钮样式）</p> <div class="mb-2">多选（紧凑风格的按钮样式）</div>
<el-checkbox-group <el-checkbox-group
v-model="checkboxGroup" v-model="checkboxGroup"
:size="dynamicSize" :size="dynamicSize"
@ -172,7 +172,7 @@ watch(size, val =>
</el-checkbox-group> </el-checkbox-group>
<el-divider /> <el-divider />
<p class="mb-2">多选（带有边框）</p> <div class="mb-2">多选（带有边框）</div>
<el-checkbox-group <el-checkbox-group
v-model="checkboxGroupBox" v-model="checkboxGroupBox"
:size="dynamicSize" :size="dynamicSize"
@ -184,7 +184,7 @@ watch(size, val =>
</el-checkbox-group> </el-checkbox-group>
<el-divider /> <el-divider />
<p class="mb-2">多选（来点不一样的体验）</p> <div class="mb-2">多选（来点不一样的体验）</div>
<el-checkbox-group <el-checkbox-group
v-model="checkboxGroupCustom" v-model="checkboxGroupCustom"
class="pure-checkbox" class="pure-checkbox"
@ -218,14 +218,14 @@ watch(size, val =>
</el-checkbox-group> </el-checkbox-group>
<el-divider /> <el-divider />
<p>可控制间距的按钮样式</p> <div>可控制间距的按钮样式</div>
<el-slider <el-slider
v-model="spaceSize" v-model="spaceSize"
class="mb-2 !w-[300px]" class="mb-2 w-[300px]!"
:show-tooltip="false" :show-tooltip="false"
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2">单选</p> <div class="mb-2">单选</div>
<el-space wrap :size="spaceSize"> <el-space wrap :size="spaceSize">
<el-check-tag <el-check-tag
v-for="(tag, index) in checkTag" v-for="(tag, index) in checkTag"
@ -241,7 +241,7 @@ watch(size, val =>
{{ tag.title }} {{ tag.title }}
</el-check-tag> </el-check-tag>
</el-space> </el-space>
<p class="mb-2 mt-4"> <div class="mb-2 mt-4">
多选 多选
{{ {{
getKeyList( getKeyList(
@ -249,7 +249,7 @@ watch(size, val =>
"title" "title"
) )
}} }}
</p> </div>
<el-space wrap :size="spaceSize"> <el-space wrap :size="spaceSize">
<el-check-tag <el-check-tag
v-for="(tag, index) in checkGroupTag" v-for="(tag, index) in checkGroupTag"
@ -267,7 +267,7 @@ watch(size, val =>
</el-space> </el-space>
<el-divider /> <el-divider />
<p class="mb-2">单个可选按钮</p> <div class="mb-2">单个可选按钮</div>
<el-check-tag <el-check-tag
:class="[ :class="[
'select-none', 'select-none',

4
src/views/components/check-card.vue
View File

@ -69,7 +69,7 @@ watch(size, val =>
</el-link> </el-link>
</template> </template>
<p class="mb-2 mt-4">单选</p> <div class="mb-2 mt-4">单选</div>
<PlusCheckCardGroup <PlusCheckCardGroup
v-model="list" v-model="list"
:options="options" :options="options"
@ -77,7 +77,7 @@ watch(size, val =>
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4">多选</p> <div class="mb-2 mt-4">多选</div>
<PlusCheckCardGroup <PlusCheckCardGroup
v-model="list1" v-model="list1"
:options="options" :options="options"

4
src/views/components/collapse.vue
View File

@ -50,12 +50,12 @@ const handleChange = (val: string[]) => {
</el-link> </el-link>
</template> </template>
<p class="mb-2">基础用法</p> <div class="mb-2">基础用法</div>
<el-radio-group v-model="radio" class="mb-3"> <el-radio-group v-model="radio" class="mb-3">
<el-radio value="">可同时展开多个面板</el-radio> <el-radio value="">可同时展开多个面板</el-radio>
<el-radio value="accordion">每次只能展开一个面板</el-radio> <el-radio value="accordion">每次只能展开一个面板</el-radio>
</el-radio-group> </el-radio-group>
<el-button size="small" text bg class="ml-8 mb-1" @click="onClick"> <el-button size="small" text bg class="ml-8! mb-1!" @click="onClick">
外部触发打开、关闭 外部触发打开、关闭
</el-button> </el-button>
<el-collapse <el-collapse

4
src/views/components/color-picker.vue
View File

@ -73,7 +73,7 @@ function onClick() {
</el-link> </el-link>
</template> </template>
<p class="mb-2">不同尺寸、选择透明度、预定义颜色</p> <div class="mb-2">不同尺寸、选择透明度、预定义颜色</div>
<el-color-picker <el-color-picker
v-model="color" v-model="color"
show-alpha show-alpha
@ -83,7 +83,7 @@ function onClick() {
/> />
<el-divider /> <el-divider />
<p class="mb-2">外部触发器</p> <div class="mb-2">外部触发器</div>
<el-space wrap> <el-space wrap>
<el-color-picker <el-color-picker
ref="colorPickerRef" ref="colorPickerRef"

2
src/views/components/contextmenu/basic.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<p class="mb-2">基础用法</p> <div class="mb-2">基础用法</div>
<div v-contextmenu:contextmenu class="wrapper"> <div v-contextmenu:contextmenu class="wrapper">
<code>右键点击此区域</code> <code>右键点击此区域</code>
</div> </div>

2
src/views/components/contextmenu/menuDynamic.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<p class="mb-2">动态菜单</p> <div class="mb-2">动态菜单</div>
<div v-contextmenu:contextmenu class="wrapper"> <div v-contextmenu:contextmenu class="wrapper">
<code>右键点击此区域</code> <code>右键点击此区域</code>
</div> </div>

2
src/views/components/contextmenu/menuGroup.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<p class="mb-2">按钮组</p> <div class="mb-2">按钮组</div>
<div v-contextmenu:contextmenu class="wrapper"> <div v-contextmenu:contextmenu class="wrapper">
<code>右键点击此区域</code> <code>右键点击此区域</code>
</div> </div>

30
src/views/components/date-picker.vue
View File

@ -160,11 +160,11 @@ watch(size, val =>
</el-link> </el-link>
</template> </template>
<p class="mb-2">选择某一天</p> <div class="mb-2">选择某一天</div>
<el-date-picker <el-date-picker
v-model="value" v-model="value"
type="date" type="date"
class="!w-[160px]" class="w-[160px]!"
placeholder="请选择" placeholder="请选择"
:disabled-date="disabledDate" :disabled-date="disabledDate"
:shortcuts="shortcuts" :shortcuts="shortcuts"
@ -175,12 +175,12 @@ watch(size, val =>
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4">选择周、月、年或多个日期</p> <div class="mb-2 mt-4">选择周、月、年或多个日期</div>
<el-space wrap> <el-space wrap>
<el-date-picker <el-date-picker
v-model="value1" v-model="value1"
type="week" type="week"
class="!w-[160px]" class="w-[160px]!"
format="YYYY年第ww周" format="YYYY年第ww周"
placeholder="选择某年中的某周" placeholder="选择某年中的某周"
:size="dynamicSize" :size="dynamicSize"
@ -189,7 +189,7 @@ watch(size, val =>
<el-date-picker <el-date-picker
v-model="value2" v-model="value2"
type="month" type="month"
class="!w-[160px]" class="w-[160px]!"
placeholder="选择某月" placeholder="选择某月"
:size="dynamicSize" :size="dynamicSize"
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
@ -197,7 +197,7 @@ watch(size, val =>
<el-date-picker <el-date-picker
v-model="value3" v-model="value3"
type="year" type="year"
class="!w-[160px]" class="w-[160px]!"
placeholder="选择某年" placeholder="选择某年"
:size="dynamicSize" :size="dynamicSize"
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
@ -205,18 +205,18 @@ watch(size, val =>
<el-date-picker <el-date-picker
v-model="value4" v-model="value4"
type="dates" type="dates"
class="!w-[160px]" class="w-[160px]!"
placeholder="选择多个日期" placeholder="选择多个日期"
:size="dynamicSize" :size="dynamicSize"
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
</el-space> </el-space>
<p class="mb-2 mt-4">选择一段时间</p> <div class="mb-2 mt-4">选择一段时间</div>
<el-date-picker <el-date-picker
v-model="value5" v-model="value5"
type="daterange" type="daterange"
class="!w-[240px]" class="w-[240px]!"
unlink-panels unlink-panels
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
@ -229,7 +229,7 @@ watch(size, val =>
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4">选择月份范围</p> <div class="mb-2 mt-4">选择月份范围</div>
<el-date-picker <el-date-picker
v-model="value6" v-model="value6"
type="monthrange" type="monthrange"
@ -245,7 +245,7 @@ watch(size, val =>
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4">日期格式</p> <div class="mb-2 mt-4">日期格式</div>
<el-radio-group <el-radio-group
v-model="dateFormat" v-model="dateFormat"
class="mb-2" class="mb-2"
@ -261,7 +261,7 @@ watch(size, val =>
<el-date-picker <el-date-picker
v-model="value7" v-model="value7"
type="date" type="date"
class="!w-[160px]" class="w-[160px]!"
placeholder="请选择日期" placeholder="请选择日期"
format="YYYY/MM/DD" format="YYYY/MM/DD"
:value-format="dateFormat" :value-format="dateFormat"
@ -271,18 +271,18 @@ watch(size, val =>
<span class="ml-2">{{ value7 }}</span> <span class="ml-2">{{ value7 }}</span>
</el-space> </el-space>
<p class="mb-2 mt-4">自定义前缀</p> <div class="mb-2 mt-4">自定义前缀</div>
<el-date-picker <el-date-picker
v-model="value8" v-model="value8"
type="date" type="date"
class="!w-[160px]" class="w-[160px]!"
placeholder="请选择日期" placeholder="请选择日期"
:prefix-icon="useRenderIcon('twemoji:spiral-calendar')" :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
:size="dynamicSize" :size="dynamicSize"
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4">自定义内容</p> <div class="mb-2 mt-4">自定义内容</div>
<el-date-picker <el-date-picker
v-model="value9" v-model="value9"
type="date" type="date"

14
src/views/components/datetime-picker.vue
View File

@ -186,18 +186,18 @@ watch(size, val =>
</el-link> </el-link>
</template> </template>
<p class="mb-2">日期和时间点</p> <div class="mb-2">日期和时间点</div>
<el-date-picker <el-date-picker
v-model="value" v-model="value"
type="datetime" type="datetime"
class="!w-[200px]" class="w-[200px]!"
placeholder="请选择日期时间" placeholder="请选择日期时间"
:shortcuts="shortcuts" :shortcuts="shortcuts"
:size="dynamicSize" :size="dynamicSize"
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4">日期时间格式</p> <div class="mb-2 mt-4">日期时间格式</div>
<el-radio-group <el-radio-group
v-model="datetimeFormat" v-model="datetimeFormat"
class="mb-2" class="mb-2"
@ -213,7 +213,7 @@ watch(size, val =>
<el-date-picker <el-date-picker
v-model="value1" v-model="value1"
type="datetime" type="datetime"
class="!w-[200px]" class="w-[200px]!"
placeholder="请选择日期时间" placeholder="请选择日期时间"
format="YYYY/MM/DD hh:mm:ss" format="YYYY/MM/DD hh:mm:ss"
:value-format="datetimeFormat" :value-format="datetimeFormat"
@ -223,7 +223,7 @@ watch(size, val =>
<span class="ml-2">{{ value1 }}</span> <span class="ml-2">{{ value1 }}</span>
</el-space> </el-space>
<p class="mb-2 mt-4">日期和时间范围</p> <div class="mb-2 mt-4">日期和时间范围</div>
<el-date-picker <el-date-picker
v-model="value2" v-model="value2"
type="datetimerange" type="datetimerange"
@ -238,9 +238,9 @@ watch(size, val =>
:disabled="size === 'disabled'" :disabled="size === 'disabled'"
/> />
<p class="mb-2 mt-4"> <div class="mb-2 mt-4">
弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置） 弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置）
</p> </div>
<el-space wrap class="w-[400px]"> <el-space wrap class="w-[400px]">
<el-check-tag <el-check-tag
v-for="(tag, index) in checkTag" v-for="(tag, index) in checkTag"

6
src/views/components/dialog/form.vue
View File

@ -3,7 +3,7 @@ import { ref } from "vue";
// 声明 props 类型 // 声明 props 类型
export interface FormProps { export interface FormProps {
formInline: { formInline?: {
user: string; user: string;
region: string; region: string;
}; };
@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
<el-form-item label="姓名"> <el-form-item label="姓名">
<el-input <el-input
v-model="newFormInline.user" v-model="newFormInline.user"
class="!w-[220px]" class="w-[220px]!"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</el-form-item> </el-form-item>
<el-form-item label="城市"> <el-form-item label="城市">
<el-select <el-select
v-model="newFormInline.region" v-model="newFormInline.region"
class="!w-[220px]" class="w-[220px]!"
placeholder="请选择城市" placeholder="请选择城市"
> >
<el-option label="上海" value="上海" /> <el-option label="上海" value="上海" />

4
src/views/components/dialog/formPrimitive.vue
View File

@ -3,7 +3,7 @@ import { useVModel } from "@vueuse/core";
// 声明 props 类型 // 声明 props 类型
export interface FormProps { export interface FormProps {
data: string; data?: string;
} }
// 声明 props 默认值 // 声明 props 默认值
@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
</script> </script>
<template> <template>
<el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" /> <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
</template> </template>

6
src/views/components/drawer/form.vue
View File

@ -3,7 +3,7 @@ import { ref } from "vue";
// 声明 props 类型 // 声明 props 类型
export interface FormProps { export interface FormProps {
formInline: { formInline?: {
user: string; user: string;
region: string; region: string;
}; };
@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
<el-form-item label="姓名"> <el-form-item label="姓名">
<el-input <el-input
v-model="newFormInline.user" v-model="newFormInline.user"
class="!w-[220px]" class="w-[220px]!"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</el-form-item> </el-form-item>
<el-form-item label="城市"> <el-form-item label="城市">
<el-select <el-select
v-model="newFormInline.region" v-model="newFormInline.region"
class="!w-[220px]" class="w-[220px]!"
placeholder="请选择城市" placeholder="请选择城市"
> >
<el-option label="上海" value="上海" /> <el-option label="上海" value="上海" />

4
src/views/components/drawer/formPrimitive.vue
View File

@ -3,7 +3,7 @@ import { useVModel } from "@vueuse/core";
// 声明 props 类型 // 声明 props 类型
export interface FormProps { export interface FormProps {
data: string; data?: string;
} }
// 声明 props 默认值 // 声明 props 默认值
@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
</script> </script>
<template> <template>
<el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" /> <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
</template> </template>

8
src/views/components/el-button.vue
View File

@ -84,7 +84,7 @@ watch(size, val =>
</el-link> </el-link>
</template> </template>
<p class="mb-2">基础按钮</p> <div class="mb-2">基础按钮</div>
<el-radio-group v-model="baseRadio" class="mb-3"> <el-radio-group v-model="baseRadio" class="mb-3">
<el-radio label="default" value="default" /> <el-radio label="default" value="default" />
<el-radio label="plain" value="plain" /> <el-radio label="plain" value="plain" />
@ -117,7 +117,7 @@ watch(size, val =>
</el-space> </el-space>
<el-divider /> <el-divider />
<p class="mb-4">加载状态按钮</p> <div class="mb-4">加载状态按钮</div>
<el-button <el-button
text text
bg bg
@ -166,7 +166,7 @@ watch(size, val =>
</el-button> </el-button>
<el-divider /> <el-divider />
<p class="mb-4">自定义元素标签。例如：按钮、div、链接</p> <div class="mb-4">自定义元素标签。例如：按钮、div、链接</div>
<el-button :size="dynamicSize" :disabled="size === 'disabled'"> <el-button :size="dynamicSize" :disabled="size === 'disabled'">
button 标签 button 标签
</el-button> </el-button>
@ -196,7 +196,7 @@ watch(size, val =>
</el-button> </el-button>
<el-divider /> <el-divider />
<p class="mb-4">自定义颜色</p> <div class="mb-4">自定义颜色</div>
<el-space wrap> <el-space wrap>
<el-button <el-button
color="#626aef" color="#626aef"

6
src/views/components/message.vue
View File

@ -3,7 +3,7 @@ import { h } from "vue";
import hot from "@/assets/svg/hot.svg?component"; import hot from "@/assets/svg/hot.svg?component";
import { message, closeAllMessage } from "@/utils/message"; import { message, closeAllMessage } from "@/utils/message";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Check from "@iconify-icons/ep/check"; import Check from "~icons/ep/check";
defineOptions({ defineOptions({
name: "Message" name: "Message"
@ -25,7 +25,7 @@ defineOptions({
</el-link> </el-link>
</template> </template>
<h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4> <h4 class="mb-4!">Element Plus 的消息提示，点击弹出提示信息</h4>
<el-space wrap> <el-space wrap>
<el-button <el-button
@ -121,7 +121,7 @@ defineOptions({
<el-divider /> <el-divider />
<h4 class="mb-4"> <h4 class="mb-4!">
类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage 类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
样式改版，不会影响 ElMessage 样式改版，不会影响 ElMessage
原本样式，使用和打包大小成本极低并适配整体暗色风格） 原本样式，使用和打包大小成本极低并适配整体暗色风格）

6
src/views/components/progress.vue
View File

@ -32,7 +32,7 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
</el-link> </el-link>
</template> </template>
<p class="mb-4">直线进度条动画</p> <div class="mb-4">直线进度条动画</div>
<div class="w-1/4"> <div class="w-1/4">
<el-progress indeterminate :percentage="50" class="mb-4" /> <el-progress indeterminate :percentage="50" class="mb-4" />
<el-progress <el-progress
@ -61,7 +61,7 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
/> />
</div> </div>
<p class="mb-4">进度条内显示百分比标识</p> <div class="mb-4">进度条内显示百分比标识</div>
<div class="w-1/4"> <div class="w-1/4">
<el-progress <el-progress
:text-inside="true" :text-inside="true"
@ -97,7 +97,7 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
/> />
</div> </div>
<p class="mb-4">自定义内容</p> <div class="mb-4">自定义内容</div>
<div class="w-1/4 demo-progress"> <div class="w-1/4 demo-progress">
<el-progress :percentage="50"> <el-progress :percentage="50">
<el-button text>自定义内容</el-button> <el-button text>自定义内容</el-button>

22
src/views/components/segmented.vue
View File

@ -1,7 +1,7 @@
<script setup lang="tsx"> <script setup lang="tsx">
import { h, ref, watch } from "vue"; import { h, ref, watch } from "vue";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import HomeFilled from "@iconify-icons/ep/home-filled"; import HomeFilled from "~icons/ep/home-filled";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Segmented, { type OptionsType } from "@/components/ReSegmented"; import Segmented, { type OptionsType } from "@/components/ReSegmented";
@ -220,39 +220,39 @@ watch(size, val => (dynamicSize.value = size.value));
</el-link> </el-link>
</template> </template>
<el-scrollbar> <el-scrollbar>
<p class="mb-2"> <div class="mb-2">
基础用法（v-model）<span class="text-primary"> 基础用法（v-model）<span class="text-primary">
{{ optionsBasis[value].label }} {{ optionsBasis[value].label }}
</span> </span>
</p> </div>
<Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" /> <Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">tooltip 提示</p> <div class="mb-2">tooltip 提示</div>
<Segmented :options="optionsTooltip" :size="dynamicSize" /> <Segmented :options="optionsTooltip" :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">change 事件</p> <div class="mb-2">change 事件</div>
<Segmented <Segmented
:options="optionsChange" :options="optionsChange"
:size="dynamicSize" :size="dynamicSize"
@change="onChange" @change="onChange"
/> />
<el-divider /> <el-divider />
<p class="mb-2">禁用</p> <div class="mb-2">禁用</div>
<Segmented :options="optionsDisabled" :size="dynamicSize" /> <Segmented :options="optionsDisabled" :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">全局禁用</p> <div class="mb-2">全局禁用</div>
<Segmented :options="optionsBasis" :size="dynamicSize" disabled /> <Segmented :options="optionsBasis" :size="dynamicSize" disabled />
<el-divider /> <el-divider />
<p class="mb-2">block 属性(将宽度调整为父元素宽度)</p> <div class="mb-2">block 属性(将宽度调整为父元素宽度)</div>
<Segmented :options="optionsBlock" block :size="dynamicSize" /> <Segmented :options="optionsBlock" block :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">可设置图标</p> <div class="mb-2">可设置图标</div>
<Segmented :options="optionsIcon" :size="dynamicSize" /> <Segmented :options="optionsIcon" :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">只设置图标</p> <div class="mb-2">只设置图标</div>
<Segmented :options="optionsOnlyIcon" :size="dynamicSize" /> <Segmented :options="optionsOnlyIcon" :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">自定义渲染</p> <div class="mb-2">自定义渲染</div>
<Segmented :options="optionsLabel" :size="dynamicSize" /> <Segmented :options="optionsLabel" :size="dynamicSize" />
</el-scrollbar> </el-scrollbar>
</el-card> </el-card>

Some files were not shown because too many files have changed in this diff Show More