9 |
11 |
12 |
--------------------------------------------------------------------------------
/src/server/config.ts:
--------------------------------------------------------------------------------
1 | import type { AppConfig } from '@/store/types';
2 | import { deffHttp } from '@/utils/axios';
3 |
4 | enum Api {
5 | ROUTE_CONFIG_INFO = '/serverConfig.json',
6 | }
7 |
8 | export const getConfigInfo = () => deffHttp.get
7 |
10 |
11 |
--------------------------------------------------------------------------------
/src/hooks/useCurrentInstance.ts:
--------------------------------------------------------------------------------
1 | import { getCurrentInstance } from 'vue';
2 | import type { ComponentInternalInstance } from 'vue';
3 |
4 | export function useCurrentInstance() {
5 | const { appContext } = getCurrentInstance() as ComponentInternalInstance;
6 | const globalProperties = appContext.config.globalProperties;
7 | return {
8 | ...globalProperties,
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/src/views/functions/guide/index.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 | 引导页
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/components/TsxComponents.tsx:
--------------------------------------------------------------------------------
1 | import { defineComponent, ref } from 'vue';
2 |
3 | export default defineComponent({
4 | name: 'TsxComponents',
5 | setup(_props) {
6 | const dataname = refTSX：{dataname.value}
10 |
11 |
12 |
13 |
14 | );
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/src/utils/plugin/progress.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/rstacruz/nprogress
2 | import NProgress from 'nprogress';
3 | import '@/styles/nprogress.scss';
4 |
5 | NProgress.configure({
6 | easing: 'ease',
7 | // 递增进度条的速度
8 | speed: 400,
9 | // 是否显示加载ico
10 | showSpinner: true,
11 | // 自动递增间隔
12 | trickleSpeed: 300,
13 | // 初始化时的最小百分比
14 | minimum: 0.2,
15 | });
16 |
17 | export default NProgress;
18 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, mergeConfig } from 'vitest/config';
2 | import viteConfig from './vite.config';
3 |
4 | export default defineConfig(configEnv =>
5 | mergeConfig(
6 | viteConfig(configEnv),
7 | defineConfig({
8 | test: {
9 | environment: 'jsdom',
10 | testTransformMode: {
11 | web: ['*.tsx'],
12 | },
13 | },
14 | }),
15 | ),
16 | );
17 |
--------------------------------------------------------------------------------
/src/locales/types.ts:
--------------------------------------------------------------------------------
1 | import type { LocalesEnum } from '@/enum/locales';
2 | import type en from './modules/en.json';
3 |
4 | export type MessageSchema = typeof en;
5 |
6 | export type localeKey = (typeof LocalesEnum)[keyof typeof LocalesEnum];
7 |
8 | export interface LocalesType {
9 | name: string;
10 | locale: localeKey;
11 | }
12 |
13 | export type LocaleMessages = {
14 | [K in localeKey]: MessageSchema;
15 | };
16 |
--------------------------------------------------------------------------------
/src/server/route.ts:
--------------------------------------------------------------------------------
1 | import { deffHttp } from '@/utils/axios';
2 |
3 | enum Api {
4 | ROUTE_LIST = '/mock_api/getRoute',
5 | }
6 |
7 | interface Param {
8 | name: string;
9 | }
10 |
11 | export interface RouteDataItemType {
12 | path: string;
13 | name: string;
14 | children: RouteDataItemType[];
15 | }
16 |
17 | export const getRouteApi = (data: Param) => deffHttp.post
21 | page-params --- {{ params.id }}
22 |
23 |
24 |
--------------------------------------------------------------------------------
/k8s/base/hap.yaml:
--------------------------------------------------------------------------------
1 | apiVersion: autoscaling/v2
2 | kind: HorizontalPodAutoscaler
3 | metadata:
4 | name: vue-xs-admin-hpa
5 | namespace: vue-xs-admin
6 | spec:
7 | scaleTargetRef:
8 | apiVersion: apps/v1
9 | kind: Deployment
10 | name: vue-xs-admin-deploy
11 | minReplicas: 1
12 | maxReplicas: 5
13 | metrics:
14 | - type: Resource
15 | resource:
16 | name: cpu
17 | target:
18 | type: Utilization
19 | averageUtilization: 80
20 | - type: Resource
21 | resource:
22 | name: memory
23 | target:
24 | type: Utilization
25 | averageUtilization: 80
26 |
--------------------------------------------------------------------------------
/src/router/modules/home/index.ts:
--------------------------------------------------------------------------------
1 | import { t } from '@/hooks/web/useI18n';
2 | /* Layout */
3 | // import Layout from '@/layouts/index.vue'
4 | // import AppMain from '@/layouts/components/AppMain/index.vue'
5 | import type { AppRouteRecordRaw } from '@/router/type';
6 |
7 | const safeManagerRoutes: Array
10 |
11 |
22 |
23 |
--------------------------------------------------------------------------------
/src/assets/icons/about.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | ## PR 标题
2 |
3 | 简要描述本次 Pull Request 的目的或变更内容。
4 |
5 | ## 变更类型
6 |
7 | 请勾选本次 PR 属于以下哪种类型（可多选）：
8 |
9 | - [ ] Bug 修复（修复现有问题）
10 | - [ ] 新功能（添加新功能或特性）
11 | - [ ] 文档更新（仅更改文档）
12 | - [ ] 性能优化（提升性能或代码质量）
13 | - [ ] 测试添加（增加或完善测试用例）
14 | - [ ] 重构代码（不影响功能的代码优化）
15 |
16 | ## 相关问题
17 |
18 | 请关联相关的 Issue 编号（如适用）：
19 |
20 | - 关联问题：#123
21 |
22 | ## 变更内容描述
23 |
24 | 详细描述本次变更的内容：
25 |
26 | 1. 添加/更新的功能或逻辑。
27 | 2. 影响的模块或文件。
28 | 3. 其他说明信息。
29 |
30 | ## Checklist
31 |
32 | 在提交前，请确保已完成以下事项：
33 |
34 | - [ ] 我的代码遵循项目的编码规范。
35 | - [ ] 我已对代码进行了自测，并确保功能正常。
36 | - [ ] 我的变更不影响现有功能或测试通过。
37 | - [ ] 文档已更新（如适用）。
38 |
39 | ## 其他说明
40 |
41 | 其他需要告知审阅者的信息：
42 |
43 | - 示例：兼容性注意事项、已知问题等。
44 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | # .github/workflows/release.yml
2 |
3 | name: Release
4 |
5 | permissions:
6 | contents: write
7 |
8 | on:
9 | push:
10 | tags:
11 | - 'v*'
12 |
13 | jobs:
14 | release:
15 | runs-on: ubuntu-latest
16 | steps:
17 | - uses: actions/checkout@v4
18 | with:
19 | fetch-depth: 0
20 |
21 | - name: Set node
22 | uses: actions/setup-node@v4
23 | with:
24 | registry-url: https://registry.npmjs.org/
25 | node-version: lts/*
26 |
27 | - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
28 | env:
29 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
30 |
--------------------------------------------------------------------------------
/src/views/details-page/datails-info/index.vue:
--------------------------------------------------------------------------------
1 |
21 |
22 |
23 |
14 |
15 |
21 |
24 | page --- {{ query.id }}
25 |
27 |
28 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/src/router/modules/about/index.ts:
--------------------------------------------------------------------------------
1 | import { t } from '@/hooks/web/useI18n';
2 | import type { AppRouteRecordRaw } from '@/router/type';
3 |
4 | const about: AppRouteRecordRaw[] = [
5 | {
6 | path: '/about',
7 | redirect: '/about/index',
8 | name: 'RtAdminInfo',
9 | meta: {
10 | title: t('route.pathName.about'),
11 | icon: 'about',
12 | alwaysShow: false,
13 | position: 11,
14 | },
15 | children: [
16 | {
17 | path: 'index',
18 | name: 'RtAbout',
19 | component: () => import('@/views/about/index.vue'),
20 | meta: { title: t('route.pathName.about') },
21 | },
22 | ],
23 | },
24 | ];
25 |
26 | export default about;
27 |
--------------------------------------------------------------------------------
/src/server/useInfo.ts:
--------------------------------------------------------------------------------
1 | import type { RoleEnum } from '@/enum/role';
2 | import { deffHttp } from '@/utils/axios';
3 |
4 | export interface UseInfoType {
5 | name: string;
6 | userid: string;
7 | email: string;
8 | signature: string;
9 | introduction: string;
10 | title: string;
11 | token: string;
12 | role: RoleEnum;
13 | }
14 |
15 | export interface UserParams {
16 | username: string;
17 | password: string;
18 | }
19 |
20 | export const getUserInfo = (user: string, pwd: string) =>
21 | deffHttp.post
14 |
21 |
22 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.codeActionsOnSave": {
3 | "source.fixAll.eslint": "explicit",
4 | "source.fixAll.stylelint": "explicit"
5 | },
6 | "files.associations": {
7 | "tailwind.css": "tailwindcss"
8 | },
9 | "css.validate": false,
10 | "less.validate": false,
11 | "scss.validate": false,
12 | "eslint.validate": ["json", "javascript", "typescript", "typescriptreact", "javascriptreact"],
13 | "stylelint.enable": true,
14 | "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
15 | "i18n-ally.localesPaths": ["src/locales/modules"],
16 | "i18n-ally.displayLanguage": "zh-CN",
17 | "i18n-ally.enabledFrameworks": ["vue"],
18 | "i18n-ally.sourceLanguage": "zh-CN",
19 | "i18n-ally.keystyle": "nested"
20 | }
21 |
--------------------------------------------------------------------------------
/src/store/modules/app.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia';
2 | import { getConfig } from '@/config';
3 | import { store } from '@/store';
4 | import type { AppConfig, AppState } from '../types';
5 |
6 | const useAppStore = defineStore('app', {
7 | state: (): AppState => ({
8 | appConfigMode: getConfig(),
9 | }),
10 | getters: {
11 | getAppConfigMode(): AppConfig {
12 | return this.appConfigMode;
13 | },
14 | },
15 | actions: {
16 | setAppConfigMode(data: AppConfig): void {
17 | const newData = data;
18 | localStorage.setItem('appConfigMode', JSON.stringify(newData));
19 | this.appConfigMode = newData;
20 | },
21 | },
22 | });
23 |
24 | export function useAppStoreHook() {
25 | return useAppStore(store);
26 | }
27 |
--------------------------------------------------------------------------------
/src/views/permissions/page/index.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
15 | 详情页{{ item }}
16 |
17 |
18 | 详情页-params-{{ item }}
19 |
20 |
20 | 切换权限：
21 |
22 | {{ userInfoStore.roles }}
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/hooks/web/useTheme.ts:
--------------------------------------------------------------------------------
1 | import { useColorMode } from '@vueuse/core';
2 | import { watch } from 'vue';
3 | import type { AppConfig } from '@/store/types';
4 | import { updateColor } from '@/utils/theme/transformTheme';
5 | import { useRootSetting } from '../setting/useRootSetting';
6 |
7 | export const useTheme = () => {
8 | const color = useColorMode({ disableTransition: false });
9 |
10 | const { appConfig, setAppConfigMode } = useRootSetting();
11 |
12 | const toggleDarkMode = () => {
13 | setAppConfigMode({ themeMode: color.value as AppConfig['themeMode'] });
14 | };
15 |
16 | watch(color, () => {
17 | toggleDarkMode();
18 | updateColor(appConfig.value.primaryColor, color.value as AppConfig['themeMode']);
19 | });
20 |
21 | return { color };
22 | };
23 |
--------------------------------------------------------------------------------
/.github/workflows/lint-and-type-checking.yml:
--------------------------------------------------------------------------------
1 | name: Lint and type checking
2 | on:
3 | pull_request:
4 | branches:
5 | - main
6 |
7 | jobs:
8 | lint-and-type-checking:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: Checkout
12 | uses: actions/checkout@v4
13 | with:
14 | fetch-depth: 0
15 |
16 | - name: Setup pnpm
17 | uses: pnpm/action-setup@v4
18 |
19 | - name: Setup Node.js
20 | uses: actions/setup-node@v4
21 | with:
22 | node-version: '22'
23 | cache: pnpm
24 |
25 | - name: Install dependencies
26 | run: pnpm install
27 |
28 | - name: Run lint check
29 | run: npm run lint:eslint
30 |
31 | - name: Run type check
32 | run: npm run type:check
33 |
--------------------------------------------------------------------------------
/src/layouts/page-layouts/components/AppFold/index.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
18 |
19 | 点击上传
20 |
21 |
22 |
24 |
25 |
--------------------------------------------------------------------------------
/src/router/modules/echarts/index.ts:
--------------------------------------------------------------------------------
1 | import { t } from '@/hooks/web/useI18n';
2 | import type { AppRouteRecordRaw } from '@/router/type';
3 |
4 | const echarts: AppRouteRecordRaw[] = [
5 | {
6 | path: '/echarts',
7 | redirect: '/echarts/bar',
8 | name: 'RtEcharts',
9 | meta: { title: t('route.pathName.echarts'), icon: 'echarts', position: 3 },
10 | children: [
11 | {
12 | path: 'bar',
13 | name: 'RtBar',
14 | component: () => import('@/views/echarts/bar/index.vue'),
15 | meta: { title: t('route.pathName.echarts_bar') },
16 | },
17 | {
18 | path: 'map',
19 | name: 'RtMap',
20 | component: () => import('@/views/echarts/map/index.vue'),
21 | meta: { title: t('route.pathName.echarts_map') },
22 | },
23 | ],
24 | },
25 | ];
26 |
27 | export default echarts;
28 |
--------------------------------------------------------------------------------
/src/assets/icons/password.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/hooks/web/useMessage.tsx:
--------------------------------------------------------------------------------
1 | import { ElMessage, ElMessageBox } from 'element-plus';
2 | import type { ElMessageBoxOptions } from 'element-plus';
3 | import { useI18n } from '@/hooks/web/useI18n';
4 |
5 | const { t } = useI18n();
6 |
7 | function createElMessageBox(message: string, title: string, options: ElMessageBoxOptions) {
8 | ElMessageBox.confirm(message, title, options)
9 | .then(() => {})
10 | .catch(() => {});
11 | }
12 |
13 | function createErrorModal(message: string) {
14 | createElMessageBox(message, t('sys.errorTip'), {
15 | confirmButtonText: t('sys.okText'),
16 | cancelButtonText: t('sys.closeText'),
17 | type: 'error',
18 | });
19 | }
20 |
21 | function createErrorMsg(message: string) {
22 | ElMessage.error(message);
23 | }
24 |
25 | export function useMessage() {
26 | return {
27 | createErrorModal,
28 | createErrorMsg,
29 | };
30 | }
31 |
--------------------------------------------------------------------------------
/src/views/details-page/hooks/useDatailsInfo.ts:
--------------------------------------------------------------------------------
1 | import { useDetailsNavigation } from '@/hooks/web/useDetailsNavigation';
2 |
3 | export function useDatailsInfo() {
4 | const { openDetails } = useDetailsNavigation();
5 |
6 | function toDatailsInfo(params: string, model: string) {
7 | if (model === 'query') {
8 | // query 参数详情页
9 | openDetails({
10 | path: `/details_page/details_info`,
11 | name: `RtDetailsInfo`,
12 | query: { id: `${params}` },
13 | title: { 'zh-CN': `详情页-${params}`, en: `pageDatails-${params}` },
14 | });
15 | } else {
16 | // params 参数详情页
17 | openDetails({
18 | path: `/details_page/details_params/${params}`,
19 | name: `RtDetailsParams`,
20 | title: { 'zh-CN': `详情页-params-${params}`, en: `pageDatails-${params}` },
21 | });
22 | }
23 | }
24 |
25 | return { toDatailsInfo };
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/Table/index.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/locales/index.ts:
--------------------------------------------------------------------------------
1 | import messages from '@intlify/unplugin-vue-i18n/messages';
2 | import { createI18n } from 'vue-i18n';
3 | import type { App } from 'vue';
4 | import { LocalesEnum } from '@/enum/locales';
5 | import type { localeKey, LocaleMessages, LocalesType } from './types';
6 |
7 | const localesList: LocalesType[] = [
8 | {
9 | name: 'English',
10 | locale: LocalesEnum.EN,
11 | },
12 | {
13 | name: '中文简体',
14 | locale: LocalesEnum.ZHCN,
15 | },
16 | ];
17 |
18 | const i18n = createI18n({
19 | legacy: false,
20 | locale: LocalesEnum.ZHCN,
21 | fallbackLocale: LocalesEnum.ZHCN,
22 | messages: messages as LocaleMessages,
23 | });
24 |
25 | export const configMainI18n = (app: App
14 |
17 |
18 |
19 |
42 |
--------------------------------------------------------------------------------
/src/assets/icons/guide.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/hooks/web/useI18n.ts:
--------------------------------------------------------------------------------
1 | import en from 'element-plus/es/locale/lang/en';
2 | import zh_Cn from 'element-plus/es/locale/lang/zh-cn';
3 | import { computed } from 'vue';
4 | import i18n, { availableLocales } from '@/locales/index';
5 |
6 | export const useI18n = () => i18n.global;
7 |
8 | export const t: typeof i18n.global.t = (key: string) => key;
9 |
10 | export const localesList = availableLocales;
11 |
12 | export const deffElementLocale = () => {
13 | const { locale } = useI18n();
14 |
15 | const tolocale = computed(() => {
16 | if (locale.value === 'en') return en;
17 | else return zh_Cn;
18 | });
19 |
20 | return { tolocale };
21 | };
22 |
23 | // 转换国际化，适用于不在i18n配置的国际化语言
24 | export function translateI18n(message: any = '') {
25 | if (!message) {
26 | return '';
27 | }
28 | const locale = i18n.global.locale.value;
29 | if (typeof message === 'object') {
30 | return message[locale];
31 | }
32 | const key = message.split('.')[0];
33 | if (key && Object.keys(i18n.global.messages.value[locale]).includes(key)) {
34 | return i18n.global.t(message);
35 | }
36 | return message;
37 | }
38 |
--------------------------------------------------------------------------------
/src/router/modules/editor/index.ts:
--------------------------------------------------------------------------------
1 | import { t } from '@/hooks/web/useI18n';
2 | import type { AppRouteRecordRaw } from '@/router/type';
3 |
4 | const editor: AppRouteRecordRaw[] = [
5 | {
6 | path: '/editor',
7 | redirect: '/editor/rich-text',
8 | name: 'RtEditor',
9 | meta: { title: t('route.pathName.editor'), icon: 'editor', position: 4 },
10 | children: [
11 | {
12 | path: 'rich-text',
13 | name: 'RtRichText',
14 | component: () => import('@/views/editor/rich-text/index.vue'),
15 | meta: { title: t('route.pathName.editor_richText') },
16 | },
17 | {
18 | path: 'markdown',
19 | name: 'RtMarkdown',
20 | component: () => import('@/views/editor/markdown/index.vue'),
21 | meta: { title: t('route.pathName.editor_markdown') },
22 | },
23 | {
24 | path: 'logic-flow',
25 | name: 'RtLogicFlow',
26 | component: () => import('@/views/editor/logic-flow/index.vue'),
27 | meta: { title: t('route.pathName.editor_logicFlow') },
28 | },
29 | ],
30 | },
31 | ];
32 |
33 | export default editor;
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 小斯（xiaosi）
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/Application/AppLocale.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
18 |
19 | 
20 |
21 |
22 | 退出登录
23 |
25 |
26 |
27 |
28 |
29 |
30 |
39 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "jsx": "preserve",
5 | "jsxImportSource": "vue",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "useDefineForClassFields": true,
8 | "baseUrl": "./",
9 | "module": "ESNext",
10 |
11 | /* Bundler mode */
12 | "moduleResolution": "bundler",
13 |
14 | "paths": {
15 | "@/*": ["src/*"],
16 | "#/*": ["types/*"]
17 | },
18 | "resolveJsonModule": true,
19 | "types": [
20 | "node",
21 | "vite/client",
22 | "element-plus/global",
23 | "element-plus/lib/locale",
24 | "@intlify/unplugin-vue-i18n/messages"
25 | ],
26 | "allowImportingTsExtensions": true,
27 | /* Linting */
28 | "strict": true,
29 | "noFallthroughCasesInSwitch": true,
30 | "noUnusedLocals": true,
31 | "noUnusedParameters": true,
32 | "noEmit": true,
33 | "allowSyntheticDefaultImports": true,
34 | "isolatedModules": true,
35 | "skipLibCheck": true
36 | },
37 |
38 | "references": [{ "path": "./tsconfig.node.json" }],
39 | "include": ["src", "types", "tests"],
40 | "exclude": ["node_modules", "dist", "**/*.js", "discard/"]
41 | }
42 |
--------------------------------------------------------------------------------
/src/config/index.ts:
--------------------------------------------------------------------------------
1 | import { _storage } from '@jsxiaosi/utils';
2 | import type { App } from 'vue';
3 | import { getConfigInfo } from '@/server/config';
4 | import type { AppConfig } from '@/store/types';
5 | import { configTheme } from '@/utils/theme/transformTheme';
6 |
7 | let config: AppConfig = {} as AppConfig;
8 |
9 | export function getConfig(): AppConfig {
10 | return config;
11 | }
12 |
13 | // 延迟进入vue，显示loding页
14 | export async function getServerConfig(app: App): Promise
20 |
21 |
24 |
29 |
30 |
31 |
34 |
35 |
36 |
37 |
48 |
--------------------------------------------------------------------------------
/src/assets/icons/editor.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/styles/theme.scss:
--------------------------------------------------------------------------------
1 | /* 根据element 主题统一配色 不在页面内直接使用element css 变量是为了更好的统一管理 */
2 | :root {
3 | // 统一颜色主题
4 | --color-white: #fff;
5 | --main-color: var(--el-color-primary); // 主色
6 | --sub-color: var(--el-color-primary-light-5); // 浅蓝1
7 | --sub-color-8: var(--el-color-primary-light-8); // 浅蓝2
8 | --sub-color-9: var(--el-color-primary-light-9); // 浅蓝2
9 |
10 | // 背景颜色
11 | --main-bg-color: #fff; // 首选背景颜色
12 | --sub-main-bg-content: #f5f6fa; // 次选背景颜色
13 |
14 | // 主题文字颜色
15 | --text-color-primary: var(--el-text-color-primary); // 首选文字颜色
16 | --text-color-regular: var(--el-text-color-regular); // 次选文字颜色
17 | --text-color-placeholder: var(--el-text-color-placeholder); // 分割线/备注
18 | --text-color-disabled: var(--el-text-color-disabled);
19 |
20 | // border-color
21 | --border-color-light: var(--el-border-color-light);
22 |
23 | // 文字大小
24 | --font-size-extra-large: var(--el-font-size-extra-large); // 超大号字体
25 | --font-size-large: var(--el-font-size-large); // 大号字体
26 | --font-size-medium: var(--el-font-size-medium); // 中等字体
27 | --font-size-base: var(--el-font-size-base); // 基本字体
28 | --font-size-small: var(--el-font-size-small); // 小号字体
29 | --font-size-extra-small: var(--el-font-size-extra-small); // 超小号字体
30 | }
31 |
32 | html.dark {
33 | --main-bg-color: #212121; // 首选背景颜色
34 | --sub-main-bg-content: #151515; // 次选背景颜色
35 | }
36 |
--------------------------------------------------------------------------------
/src/views/editor/rich-text/index.vue:
--------------------------------------------------------------------------------
1 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
45 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | ///
18 |
19 |
22 |
23 |
24 |
62 |
--------------------------------------------------------------------------------
/src/utils/axios/axiosConfig.ts:
--------------------------------------------------------------------------------
1 | import type { RequestOptions, Result } from '#/axios';
2 | import type { AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
3 | /**
4 | * axios 数据处理类
5 | */
6 |
7 | export interface CreateAxiosOptions extends AxiosRequestConfig {
8 | requestOptions?: RequestOptions;
9 | interceptor?: AxiosInterceptor;
10 | }
11 |
12 | export type InternalAxiosOptions = Pick
16 |
22 |
23 |
24 |
62 |
--------------------------------------------------------------------------------
/src/utils/axios/axiosStatus.ts:
--------------------------------------------------------------------------------
1 | import type { ErrorMessageMode } from '#/axios';
2 | import { useMessage } from '@/hooks/web/useMessage';
3 | import i18n from '@/locales';
4 | const { createErrorModal, createErrorMsg } = useMessage();
5 |
6 | export function checkStatus(status: number, msg: string, errorMessageMode: ErrorMessageMode = 'message'): void {
7 | const { t } = i18n.global;
8 | let errMessage = '';
9 |
10 | switch (status) {
11 | case 400:
12 | errMessage = `${msg}`;
13 | break;
14 | case 401:
15 | errMessage = t('api.errMsg401');
16 | break;
17 | case 403:
18 | errMessage = t('api.errMsg403');
19 | break;
20 | case 404:
21 | errMessage = t('api.errMsg404');
22 | break;
23 | case 405:
24 | errMessage = t('api.errMsg405');
25 | break;
26 | case 408:
27 | errMessage = t('api.errMsg408');
28 | break;
29 | case 500:
30 | errMessage = t('api.errMsg500');
31 | break;
32 | case 501:
33 | errMessage = t('api.errMsg501');
34 | break;
35 | case 502:
36 | errMessage = t('api.errMsg502');
37 | break;
38 | case 503:
39 | errMessage = t('api.errMsg503');
40 | break;
41 | case 504:
42 | errMessage = t('api.errMsg504');
43 | break;
44 | case 505:
45 | errMessage = t('api.errMsg505');
46 | break;
47 | default:
48 | }
49 | if (errMessage) {
50 | if (errorMessageMode === 'modal') {
51 | createErrorModal(msg);
52 | } else if (errorMessageMode === 'message') {
53 | createErrorMsg(errMessage);
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/views/functions/water-mark/hooks/useWaterMark.ts:
--------------------------------------------------------------------------------
1 | import { onBeforeUnmount, ref, shallowRef, unref } from 'vue';
2 | import type { Ref } from 'vue';
3 | import { createBase64, createWaterMarkDom } from '@/utils/waterMark';
4 | import type { WaterMarkOptions } from '@/utils/waterMark';
5 |
6 | export const useWaterMark = (
7 | appendEl: Ref
17 | 
18 |
19 |
20 | {{ config.title }}
21 |
18 |
14 |
17 |
25 | {{ $t('error-page.back') }}
26 |
27 |
28 |
29 |
30 |
70 |
--------------------------------------------------------------------------------
/src/views/error/404.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
18 | {{ $t('error-page.403.title') }}
19 |
20 |
21 | {{ $t('error-page.403.description') }}
22 |
23 |
24 |
14 |
17 |
25 | {{ $t('error-page.back') }}
26 |
27 |
28 |
29 |
30 |
70 |
--------------------------------------------------------------------------------
/src/views/error/500.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
18 | {{ $t('error-page.404.title') }}
19 |
20 |
21 | {{ $t('error-page.404.description') }}
22 |
23 |
24 |
14 |
17 |
25 | {{ $t('error-page.back') }}
26 |
27 |
28 |
29 |
30 |
70 |
--------------------------------------------------------------------------------
/src/utils/waterMark.ts:
--------------------------------------------------------------------------------
1 | // 全局保存 canvas 和 div ，避免重复创建（单例模式）
2 | const globalCanvas = null;
3 | const globalWaterMark = null;
4 |
5 | export interface WaterMarkOptions {
6 | width?: number;
7 | height?: number;
8 | rotate?: number;
9 | fontSize?: string;
10 | fillStyle?: string;
11 | textAlign?: CanvasTextAlign;
12 | }
13 |
14 | export const waterMarkStyle = `
15 | display: inline-block;
16 | overflow: hidden;
17 | position: absolute;
18 | left: 0;
19 | top: 0;
20 | width: 100%;
21 | height: 100%;
22 | pointer-events: none;
23 | background-repeat: repeat;
24 | z-index: 1000;
25 | `;
26 |
27 | const domSymbol = Symbol('watermark-dom');
28 |
29 | export function createBase64(text: string, options?: WaterMarkOptions) {
30 | const { width, height, rotate, fontSize, fillStyle, textAlign } = options || {};
31 | const canvas = globalCanvas || document.createElement('canvas');
32 | canvas.width = width || 240;
33 | canvas.height = height || 100;
34 | const ctx = canvas.getContext('2d'); // 获取画布上下文
35 |
36 | if (ctx && text) {
37 | ctx.rotate(rotate || (-20 * Math.PI) / 180);
38 | ctx.font = fontSize || '14px normal';
39 | ctx.fillStyle = fillStyle || 'rgba(180, 180, 180, 0.3)';
40 | ctx.textAlign = textAlign || 'left';
41 | ctx.textBaseline = 'middle';
42 | ctx.fillText(text, canvas.width / 20, canvas.height / 1.5);
43 | }
44 |
45 | return canvas.toDataURL('image/png');
46 | }
47 |
48 | // 设置水印
49 | export function createWaterMarkDom() {
50 | // 创建 waterMark 父元素
51 | const waterMark = globalWaterMark || document.createElement('div');
52 | waterMark.id = domSymbol.toString();
53 | waterMark.className = `water-mark`;
54 | waterMark.setAttribute('style', `${waterMarkStyle}`);
55 |
56 | return waterMark;
57 | }
58 |
--------------------------------------------------------------------------------
/src/views/index/components/PieChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
56 |
57 |
58 |
59 |
60 |
61 |
67 |
--------------------------------------------------------------------------------
/src/assets/icons/echarts.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/hooks/event/useEventListener.ts:
--------------------------------------------------------------------------------
1 | import { useDebounceFn, useThrottleFn } from '@vueuse/core';
2 | import { ref, unref, watch } from 'vue';
3 | import type { Ref } from 'vue';
4 |
5 | export type RemoveEventFn = () => void;
6 | export interface UseEventParams {
7 | el?: Element | Ref
18 | {{ $t('error-page.500.title') }}
19 |
20 |
21 | {{ $t('error-page.500.description') }}
22 |
23 |
24 |
24 |
25 |
26 |
27 |
28 |
43 |
44 |
45 |
46 |
47 |
48 |
58 |
--------------------------------------------------------------------------------
/src/store/types.ts:
--------------------------------------------------------------------------------
1 | import type { StorageConfig } from '@jsxiaosi/utils/es/window/storage/types';
2 | import type { _RouteLocationBase, LocationQuery, RouteParams, RouteRecordName } from 'vue-router';
3 | import type { PermissionMode } from '@/enum/role';
4 | import type { localeKey } from '@/locales/types';
5 | import type { AppRouteRecordRaw, Meta } from '@/router/type';
6 |
7 | export interface AppState {
8 | appConfigMode: AppConfig;
9 | }
10 |
11 | export type SidebarMode = 'vertical' | 'horizontal' | 'blend';
12 |
13 | export interface AppConfig {
14 | // 标题
15 | title: string;
16 | // 折叠菜单
17 | collapseMenu: boolean;
18 | // 菜单显示模式： 'vertical'：左侧模式 | 'horizontal'：顶部模式 | 'blend'：混合模式
19 | sidebarMode: SidebarMode;
20 | // 主题模式：白天主题、夜间主题
21 | themeMode: 'light' | 'dark';
22 | // 国际化
23 | locale: localeKey;
24 | // storage配置
25 | StorageConfig: StorageConfig;
26 | // 移动端菜单
27 | drawerSidebar?: boolean;
28 | // 主题颜色
29 | primaryColor: string;
30 | // 灰色模式
31 | greyMode: boolean;
32 | // 色弱模式
33 | colorWeaknessMode: boolean;
34 | // 隐藏侧边菜单栏
35 | hideSidebar: boolean;
36 | // 隐藏顶部
37 | hideNavbart: boolean;
38 | // 隐藏标签栏
39 | hideTabs: boolean;
40 | // 关闭标签页拖拽
41 | closeTabDrag: boolean;
42 | // 隐藏标签栏操作按钮
43 | hideTabsConfig: boolean;
44 | // 标签持久化
45 | tabPersistent: boolean;
46 | // 侧边栏按钮
47 | sidebarFold: 'none' | 'top' | 'bottom';
48 | // 路由模式 REAREND后端路由、ROLE角色权限控制路由
49 | permissionMode: keyof typeof PermissionMode;
50 | }
51 |
52 | export type MultiTabsType = Omit<
53 | _RouteLocationBase,
54 | 'fullPath' | 'hash' | 'params' | 'query' | 'redirectedFrom' | 'meta'
55 | > & {
56 | query?: LocationQuery;
57 | params?: RouteParams;
58 | meta?: Meta;
59 | };
60 | export interface PermissionState {
61 | wholeMenus: AppRouteRecordRaw[];
62 | cachePageList: RouteRecordName[];
63 | multiTabs: MultiTabsType[];
64 | }
65 |
--------------------------------------------------------------------------------
/src/layouts/page-layouts/components/Sidebar/MinSidebar.vue:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 |
29 | {{ toName[index] }}
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{ cindex }}
37 |
38 | {{ i }}
39 |
40 |
41 |
42 |
48 |
49 |
50 |
59 |
60 |
61 |
64 |
65 |
66 |
67 | Create
68 | Reset
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/src/router/modules/components/index.ts:
--------------------------------------------------------------------------------
1 | import { t } from '@/hooks/web/useI18n';
2 | import type { AppRouteRecordRaw } from '@/router/type';
3 |
4 | const component: AppRouteRecordRaw[] = [
5 | {
6 | path: '/components',
7 | // component: Layout,
8 | redirect: '/components/form',
9 | name: 'RtComponents',
10 | meta: {
11 | title: t('route.pathName.components'),
12 | icon: 'components',
13 | position: 2,
14 | },
15 | children: [
16 | {
17 | path: 'form',
18 | name: 'RtForm',
19 | component: () => import('@/views/components/form/index.vue'),
20 | meta: { title: t('route.pathName.form'), keepAlive: true },
21 | },
22 | {
23 | path: 'table',
24 | name: 'RtTable',
25 | component: () => import('@/views/components/table-page/index.vue'),
26 | meta: { title: t('route.pathName.table') },
27 | },
28 | {
29 | path: 'drag',
30 | name: 'RtDrag',
31 | component: () => import('@/views/components/drag/index.vue'),
32 | meta: { title: t('route.pathName.dragCpts') },
33 | },
34 | {
35 | path: 'count-to',
36 | name: 'RtCountTo',
37 | component: () => import('@/views/components/count-to/index.vue'),
38 | meta: { title: t('route.pathName.countTo') },
39 | },
40 | {
41 | path: 'seamless-scroll',
42 | name: 'RtSeamlessScroll',
43 | component: () => import('@/views/components/seamless-scroll/index.vue'),
44 | meta: { title: t('route.pathName.seamlessScroll') },
45 | },
46 | {
47 | path: 'date-time',
48 | // Parent router-view
49 | name: 'DateTime',
50 | redirect: '/components/date-time/date',
51 | meta: { title: t('route.pathName.date') },
52 | children: [
53 | {
54 | path: 'date-select',
55 | name: 'RtDate',
56 | component: () => import('@/views/components/date/index.vue'),
57 | meta: { title: t('route.pathName.dateSelect'), keepAlive: true },
58 | },
59 | {
60 | path: 'calendar',
61 | name: 'RtCalendar',
62 | component: () => import('@/views/components/calendar/index.vue'),
63 | meta: { title: t('route.pathName.calendar') },
64 | },
65 | ],
66 | },
67 | ],
68 | },
69 | ];
70 |
71 | export default component;
72 |
--------------------------------------------------------------------------------
/src/views/index/components/AnalysisChart.vue:
--------------------------------------------------------------------------------
1 |
85 |
86 |
87 |
88 |
89 |
90 |
96 |
--------------------------------------------------------------------------------
/src/views/index/components/WordCloud.vue:
--------------------------------------------------------------------------------
1 |
70 |
71 |
72 |
73 |
74 |
75 |
81 |
--------------------------------------------------------------------------------
/src/hooks/web/useECharts.ts:
--------------------------------------------------------------------------------
1 | import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
2 | import { storeToRefs } from 'pinia';
3 | import { nextTick, ref, unref, watch } from 'vue';
4 | import type { EChartsOption } from 'echarts';
5 | import type { Ref } from 'vue';
6 | import { useEventListener } from '@/hooks/event/useEventListener';
7 | import { useAppStoreHook } from '@/store/modules/app';
8 | import echarts from '@/utils/plugin/echarts';
9 |
10 | export type createEChartsOption = EChartsOption;
11 |
12 | export function useECharts(elRef: Ref
86 |
89 |
90 |
91 |
97 |
--------------------------------------------------------------------------------
/src/views/functions/water-mark/index.vue:
--------------------------------------------------------------------------------
1 |
33 |
34 |
35 | 动态柱状图
87 | 88 |
36 |
70 |
71 |
72 |
87 |
--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { _storage, isUrl } from '@jsxiaosi/utils';
2 | import { createRouter, createWebHistory } from 'vue-router';
3 | import type { App } from 'vue';
4 | import type { RouteRecordRaw } from 'vue-router';
5 | import { getConfig } from '@/config';
6 | import { translateI18n } from '@/hooks/web/useI18n';
7 | import { usePermissionStoreHook } from '@/store/modules/permission';
8 | import { useUserInfoStoreHook } from '@/store/modules/user';
9 | import NProgress from '@/utils/plugin/progress';
10 | import { configRouteList } from './modules';
11 | import { handleAliveRoute, initRoute } from './utils';
12 |
13 | const { whiteRouteModulesList, routeModulesList } = configRouteList();
14 |
15 | // 在导航栏上的路由
16 | export const sidebarRouteList = routeModulesList;
17 |
18 | export const router = createRouter({
19 | history: createWebHistory(''),
20 | routes: whiteRouteModulesList as unknown as RouteRecordRaw[],
21 | });
22 |
23 | export const configMainRouter = async (app: App
37 | 修改水印名称：
38 |
39 |
40 | 确定
41 |
42 |
43 | （全局）
44 | 清除
45 |
46 |
47 |
48 | 修改水印名称：
49 |
50 |
51 | 确定
52 |
53 |
54 | （hooks）
55 | 清除
56 |
57 |
58 |
59 |
60 | 修改水印名称：
61 |
62 |
63 | 确定
64 |
65 |
66 | （指令）
67 |
68 |
69 |
45 | 日期：
46 |
53 |
54 |
57 |
58 |
59 |
60 |
95 |
--------------------------------------------------------------------------------
/src/layouts/page-layouts/components/Sidebar/index.vue:
--------------------------------------------------------------------------------
1 |
64 |
65 |
66 |
8 |
26 |
27 |
28 |
109 |
--------------------------------------------------------------------------------
/src/layouts/page-layouts/components/Seting/pageSettings/index.vue:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
9 |
25 |
10 |
15 |
11 |
14 |
16 |
24 |
17 |
18 |
20 |
18 | Vue Xs Admin
19 |
21 |
22 |
23 |
25 |
29 |
33 |
37 |
41 |
45 |
49 |
66 |
67 |
68 |
69 |
93 |
--------------------------------------------------------------------------------
/src/views/components/seamless-scroll/index.vue:
--------------------------------------------------------------------------------
1 |
46 |
47 |
48 |
51 | 无缝滚动示例
52 |
53 | 向上滚动
54 |
55 |
56 |
61 | 向下滚动
62 |
63 |
64 |
65 | 向左滚动
66 |
67 |
68 | 向右滚动
69 |
70 |
71 |
72 | -
74 |
- 75 | {{ item.title }} 76 | 77 |
71 |
73 | {{ $t('sys.login.forgotPassword') }}
74 |
75 |
76 |
6 |-
7 |
8 | 
9 |
10 | 某某某
11 | 2021-12-31
12 |
13 | 据我观察，你今天吃意大利面遇到不良商家，没有拌42号混凝土，以及使用劣质螺丝钉，严重影响你的扭矩，从而影响UFO的产量，吸收不足引发内蜂蜜失调，导致排放系统紊乱，对整个太平洋以及充电器造成严重的核污染。我个人认为，这个意大利面就应该拌42号混凝土，因为这个螺丝钉的长度，它很容易会直接影响到挖掘机的扭矩你知道吧，你往里砸的时候，一瞬间它就会产生大量的高能蛋白。
14 |
15 |
16 |
17 |
19 |
20 |