feat(all): 前端初始化
This commit is contained in:
RubyLiu
刘瑞斌
parent
e324a79827
commit
6865624fed
|
|
@ -0,0 +1 @@
|
||||||
|
VITE_API_BASE_URL= 'http://localhost:8080'
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
/*.json
|
||||||
|
/src/**/*.json
|
||||||
|
dist
|
||||||
|
postcss.config.js
|
||||||
|
*.md
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
parser: 'vue-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
// Parser that checks the content of the <script> tag
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
sourceType: 'module',
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
'browser': true,
|
||||||
|
'node': true,
|
||||||
|
'vue/setup-compiler-macros': true,
|
||||||
|
},
|
||||||
|
plugins: ['@typescript-eslint'],
|
||||||
|
extends: [
|
||||||
|
// Airbnb JavaScript Style Guide https://github.com/airbnb/javascript
|
||||||
|
'airbnb-base',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:import/recommended',
|
||||||
|
'plugin:import/typescript',
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'plugin:prettier/recommended',
|
||||||
|
],
|
||||||
|
settings: {
|
||||||
|
'import/resolver': {
|
||||||
|
typescript: {
|
||||||
|
project: path.resolve(__dirname, './tsconfig.json'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'prettier/prettier': 1,
|
||||||
|
// Vue: Recommended rules to be closed or modify
|
||||||
|
'vue/require-default-prop': 0,
|
||||||
|
'vue/singleline-html-element-content-newline': 0,
|
||||||
|
'vue/max-attributes-per-line': 0,
|
||||||
|
// Vue: Add extra rules
|
||||||
|
'vue/custom-event-name-casing': [2, 'camelCase'],
|
||||||
|
'vue/no-v-text': 1,
|
||||||
|
'vue/padding-line-between-blocks': 1,
|
||||||
|
'vue/require-direct-export': 1,
|
||||||
|
'vue/multi-word-component-names': 0,
|
||||||
|
// Allow @ts-ignore comment
|
||||||
|
'@typescript-eslint/ban-ts-comment': 0,
|
||||||
|
'@typescript-eslint/no-unused-vars': 1,
|
||||||
|
'@typescript-eslint/no-empty-function': 1,
|
||||||
|
'@typescript-eslint/no-explicit-any': 0,
|
||||||
|
'consistent-return': 'off',
|
||||||
|
'import/extensions': [
|
||||||
|
2,
|
||||||
|
'ignorePackages',
|
||||||
|
{
|
||||||
|
js: 'never',
|
||||||
|
jsx: 'never',
|
||||||
|
ts: 'never',
|
||||||
|
tsx: 'never',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||||
|
'no-param-reassign': 0,
|
||||||
|
'prefer-regex-literals': 0,
|
||||||
|
'import/no-extraneous-dependencies': 0,
|
||||||
|
'import/no-cycle': 'off',
|
||||||
|
'import/order': 'off',
|
||||||
|
'class-methods-use-this': 'off',
|
||||||
|
'global-require': 0,
|
||||||
|
'no-plusplus': 'off',
|
||||||
|
'no-underscore-dangle': 'off',
|
||||||
|
},
|
||||||
|
// 对特定文件进行配置
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['src/enums/**/*.ts'],
|
||||||
|
rules: {
|
||||||
|
'no-shadow': 'off', // eslint会报错提示重复声明，暂未找到问题原因，先关闭
|
||||||
|
// 可以在这里添加更多的规则禁用
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
.history
|
||||||
|
coverage
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
#!/bin/sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
pnpm commitlint --edit $1
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
#!/bin/sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npm run lint-staged
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/dist/*
|
||||||
|
.local
|
||||||
|
.output.js
|
||||||
|
/node_modules/**
|
||||||
|
|
||||||
|
**/*.svg
|
||||||
|
**/*.sh
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [require('prettier-plugin-tailwindcss')],
|
||||||
|
tabWidth: 2,
|
||||||
|
semi: true,
|
||||||
|
singleQuote: true,
|
||||||
|
quoteProps: 'consistent',
|
||||||
|
htmlWhitespaceSensitivity: 'strict',
|
||||||
|
vueIndentScriptAndStyle: true,
|
||||||
|
useTabs: false,
|
||||||
|
trailingComma: 'es5',
|
||||||
|
printWidth: 120,
|
||||||
|
arrowParens: 'always',
|
||||||
|
endOfLine: 'auto',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
module.exports = {
|
||||||
|
extends: [
|
||||||
|
'stylelint-config-standard',
|
||||||
|
'stylelint-config-prettier',
|
||||||
|
'stylelint-config-html/vue',
|
||||||
|
'stylelint-config-recommended-less',
|
||||||
|
],
|
||||||
|
plugins: ['stylelint-less', 'stylelint-order'],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['**/*.vue'],
|
||||||
|
customSyntax: 'postcss-html',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
customSyntax: 'postcss-less',
|
||||||
|
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', 'node_modules/**/*'],
|
||||||
|
rules: {
|
||||||
|
'indentation': 2,
|
||||||
|
'selector-pseudo-element-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignorePseudoElements: ['v-deep', ':deep'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'number-leading-zero': 'always',
|
||||||
|
'no-descending-specificity': null,
|
||||||
|
'function-url-quotes': 'always',
|
||||||
|
'string-quotes': 'single',
|
||||||
|
'unit-case': null,
|
||||||
|
'color-hex-case': 'lower',
|
||||||
|
'color-hex-length': 'long',
|
||||||
|
'rule-empty-line-before': 'never',
|
||||||
|
'font-family-no-missing-generic-family-keyword': null,
|
||||||
|
'selector-type-no-unknown': null,
|
||||||
|
'block-opening-brace-space-before': 'always',
|
||||||
|
'at-rule-no-unknown': null,
|
||||||
|
'no-duplicate-selectors': null,
|
||||||
|
'property-no-unknown': null,
|
||||||
|
'no-empty-source': null,
|
||||||
|
'selector-class-pattern': null,
|
||||||
|
'keyframes-name-pattern': null,
|
||||||
|
'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global', 'deep'] }],
|
||||||
|
'function-no-unknown': null,
|
||||||
|
'order/properties-order': [
|
||||||
|
'position',
|
||||||
|
'top',
|
||||||
|
'right',
|
||||||
|
'bottom',
|
||||||
|
'left',
|
||||||
|
'z-index',
|
||||||
|
'display',
|
||||||
|
'justify-content',
|
||||||
|
'align-items',
|
||||||
|
'float',
|
||||||
|
'clear',
|
||||||
|
'overflow',
|
||||||
|
'overflow-x',
|
||||||
|
'overflow-y',
|
||||||
|
'margin',
|
||||||
|
'margin-top',
|
||||||
|
'margin-right',
|
||||||
|
'margin-bottom',
|
||||||
|
'margin-left',
|
||||||
|
'padding',
|
||||||
|
'padding-top',
|
||||||
|
'padding-right',
|
||||||
|
'padding-bottom',
|
||||||
|
'padding-left',
|
||||||
|
'width',
|
||||||
|
'min-width',
|
||||||
|
'max-width',
|
||||||
|
'height',
|
||||||
|
'min-height',
|
||||||
|
'max-height',
|
||||||
|
'font-size',
|
||||||
|
'font-family',
|
||||||
|
'font-weight',
|
||||||
|
'border',
|
||||||
|
'border-style',
|
||||||
|
'border-width',
|
||||||
|
'border-color',
|
||||||
|
'border-top',
|
||||||
|
'border-top-style',
|
||||||
|
'border-top-width',
|
||||||
|
'border-top-color',
|
||||||
|
'border-right',
|
||||||
|
'border-right-style',
|
||||||
|
'border-right-width',
|
||||||
|
'border-right-color',
|
||||||
|
'border-bottom',
|
||||||
|
'border-bottom-style',
|
||||||
|
'border-bottom-width',
|
||||||
|
'border-bottom-color',
|
||||||
|
'border-left',
|
||||||
|
'border-left-style',
|
||||||
|
'border-left-width',
|
||||||
|
'border-left-color',
|
||||||
|
'border-radius',
|
||||||
|
'text-align',
|
||||||
|
'text-justify',
|
||||||
|
'text-indent',
|
||||||
|
'text-overflow',
|
||||||
|
'text-decoration',
|
||||||
|
'white-space',
|
||||||
|
'color',
|
||||||
|
'background',
|
||||||
|
'background-position',
|
||||||
|
'background-repeat',
|
||||||
|
'background-size',
|
||||||
|
'background-color',
|
||||||
|
'background-clip',
|
||||||
|
'opacity',
|
||||||
|
'filter',
|
||||||
|
'list-style',
|
||||||
|
'outline',
|
||||||
|
'visibility',
|
||||||
|
'box-shadow',
|
||||||
|
'text-shadow',
|
||||||
|
'resize',
|
||||||
|
'transition',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"typescript.tsdk": "node_modules/typescript/lib",
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": true,
|
||||||
|
"source.fixAll.stylelint": true, // 开启stylelint自动修复
|
||||||
|
},
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"eslint.validate": [
|
||||||
|
"javascript",
|
||||||
|
"javascriptreact",
|
||||||
|
"typescript",
|
||||||
|
"typescriptreact",
|
||||||
|
"html",
|
||||||
|
"vue",
|
||||||
|
"markdown",
|
||||||
|
"json",
|
||||||
|
"jsonc"
|
||||||
|
],
|
||||||
|
// 配置stylelint检查的文件类型范围
|
||||||
|
"stylelint.validate": [
|
||||||
|
"css",
|
||||||
|
"less",
|
||||||
|
"postcss",
|
||||||
|
"scss",
|
||||||
|
"sass",
|
||||||
|
"vue"
|
||||||
|
],
|
||||||
|
"stylelint.enable": true,
|
||||||
|
"css.validate": false,
|
||||||
|
"less.validate": false,
|
||||||
|
"scss.validate": false,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,805 @@
|
||||||
|
## 提交规范
|
||||||
|
|
||||||
|
### 1. 提交消息格式
|
||||||
|
|
||||||
|
```bin
|
||||||
|
<Type>[optional Scope]: <Description>
|
||||||
|
[optional body]
|
||||||
|
|
||||||
|
[optional footer]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Type 提交的类型
|
||||||
|
|
||||||
|
> 表示提交的目的或影响的范围
|
||||||
|
|
||||||
|
- feat: 新功能（A new feature）
|
||||||
|
- fix: 修复 bug（A bug fix）
|
||||||
|
- docs: 文档变更（Documentation changes）
|
||||||
|
- style: 代码样式调整（Code style changes）
|
||||||
|
- refactor: 代码重构（Code refactoring）
|
||||||
|
- test: 测试相关的变更（Test-related changes）
|
||||||
|
- chore: 构建过程或工具变动（Build process or tooling changes）
|
||||||
|
- perf: 性能优化（Performance optimization）
|
||||||
|
- ci: CI/CD 相关的变动（Changes to the CI/CD configuration or scripts）
|
||||||
|
- revert: 撤销之前的提交（Revert a previous commit）
|
||||||
|
|
||||||
|
#### Scope 作用域
|
||||||
|
|
||||||
|
提交的作用域，表示本次提交影响的部分代码或模块，可以根据项目的需要选择性地添加。
|
||||||
|
|
||||||
|
#### Description 描述
|
||||||
|
|
||||||
|
简明扼要地描述本次提交的内容
|
||||||
|
|
||||||
|
#### body 正文
|
||||||
|
|
||||||
|
可选的详细描述，可以包含更多的信息和上下文
|
||||||
|
|
||||||
|
#### footer 脚注
|
||||||
|
|
||||||
|
可选的脚注，通常用于引用相关的问题编号或关闭问题。
|
||||||
|
|
||||||
|
## 示例提交消息：
|
||||||
|
|
||||||
|
```
|
||||||
|
feat(user): add login functionality
|
||||||
|
|
||||||
|
- Add login form and authentication logic
|
||||||
|
- Implement user authentication API endpoints
|
||||||
|
|
||||||
|
Closes #123
|
||||||
|
```
|
||||||
|
|
||||||
|
在这个示例中，提交类型为 feat（新功能），作用域为 user，描述了添加登录功能的内容。正文部分提供了更详细的说明，并引用了问题编号。
|
||||||
|
|
||||||
|
## 架构总览
|
||||||
|
|
||||||
|
```
|
||||||
|
├── babel.config.js // babel配置，支持JSX
|
||||||
|
├── commitlint.config.js // commitlint配置，校验commit信息
|
||||||
|
├── components.d.ts // 组件注册TS声明
|
||||||
|
├── config // 项目构建配置
|
||||||
|
│ ├── plugin // 构建插件
|
||||||
|
│ ├── utils // 构建工具方法
|
||||||
|
│ ├── vite.config.base.ts // vite基础配置
|
||||||
|
│ ├── vite.config.dev.ts // vite开发环境配置
|
||||||
|
│ └── vite.config.prod.ts // vite 生产配置
|
||||||
|
├── index.html // 单页面html模板
|
||||||
|
├── src
|
||||||
|
│ ├── App.vue // 应用入口vue
|
||||||
|
│ ├── api // 项目请求api封装
|
||||||
|
│ │ ├── http // axios封装
|
||||||
|
│ │ ├── modules // 各业务模块的请求方法
|
||||||
|
│ │ ├── requrls // 按业务模块划分的接口地址
|
||||||
|
│ ├── assets // 全局静态资源
|
||||||
|
│ │ ├── images
|
||||||
|
- svg
|
||||||
|
│ │ ├── logo.svg
|
||||||
|
│ │ ├── style
|
||||||
|
│ ├── components // 组件
|
||||||
|
│ ├── config // 全局配置，常量类、JSON
|
||||||
|
│ ├── directive // 自定义指令集
|
||||||
|
│ ├── enums // 全局枚举定义
|
||||||
|
│ ├── hooks // 全局hooks集
|
||||||
|
│ ├── layout // 应用布局组件
|
||||||
|
│ ├── locale // 国际化配置
|
||||||
|
│ ├── main.ts // 项目主入口
|
||||||
|
│ ├── mock // mock数据配置
|
||||||
|
│ ├── models // 全局数据模型定义
|
||||||
|
│ ├── router // 路由
|
||||||
|
│ ├── store // pinia状态库
|
||||||
|
│ ├── types // 全局TS声明
|
||||||
|
│ ├── utils // 公共工具方法
|
||||||
|
│ └── views
|
||||||
|
│ ├── modules // 页面模块
|
||||||
|
│ └── base // 公共页面，403、404等
|
||||||
|
│ ├── env.d.ts // 环境信息TS类型声明
|
||||||
|
└── .env.development // 开发环境变量声明
|
||||||
|
└── .env.production // 生产环境变量声明
|
||||||
|
└── .eslintrc.js // eslint配置
|
||||||
|
└── .prettierrc.js // prettier配置
|
||||||
|
└── tsconfig.json // 全局TS配置
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="dd14f832"></a>
|
||||||
|
|
||||||
|
## -状态管理模块设计
|
||||||
|
|
||||||
|
Vue3 状态管理方案采用的是`pinia`，API 风格与`Redux`类的状态管理库类似，也是通过模块化的方式注册`模块store`，每个`store`中包含数据仓库`state`、数据包装过滤`getter`、同步/异步操作`action`。与`Vuex`相比，`pinia`提供了`compasition-API`、完整支持 TS 以及可扩展的`Plugin`功能。<br />整体模块划分为业务模块`modules/*`、注册入口`index`以及插件`plugins/*`。<br />首先，在`store/index.ts`中声明注册`pinia`并引入自定义的插件：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { createPinia } from 'pinia';
|
||||||
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||||
|
import { debouncePlugin } from './plugins';
|
||||||
|
import useXXStore from './modules/xx';
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
// 插件会在实例创建后应用，因此插件不能在pinia实例创建前使用
|
||||||
|
pinia.use(debouncePlugin).use(piniaPluginPersistedstate);
|
||||||
|
export { useXXStore }; // 导出模块store
|
||||||
|
export default pinia;
|
||||||
|
```
|
||||||
|
|
||||||
|
然后，在项目入口`mian.ts`中使用：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import store from '@/store';
|
||||||
|
import app from '@/App.vue';
|
||||||
|
|
||||||
|
createApp(app).use(store).mount('#app');
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="piniaPlugins.ts"></a>
|
||||||
|
|
||||||
|
### plugins
|
||||||
|
|
||||||
|
在此文件内编写`pinia`插件，并在注册的时候引入使用即可：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { debounce, isObject } from 'lodash-es';
|
||||||
|
// 首先得声明插件使用到的额外属性，因为pinia的TS类型声明中，每个store只有三个原生属性state、getters、actions，若没有使用到额外属性则无需声明
|
||||||
|
declare module 'pinia' {
|
||||||
|
export interface DefineStoreOptionsBase<S, Store> {
|
||||||
|
cache?: Partial<CacheType<S, Store>>; // 缓存配置
|
||||||
|
debounce?: Partial<Record<keyof StoreActions<Store>, number>>; // 节流配置
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 基于lodash的防抖函数封装，读取store中cache配置的属性，针对已配置的属性更改操作进行防抖处理
|
||||||
|
export const debouncePlugin = ({ options, store }: PiniaPluginContext) => {
|
||||||
|
if (options.debounce) {
|
||||||
|
return Object.keys(options.debounce).reduce((debounceActions: debounceAction, action) => {
|
||||||
|
debounceActions[action] = debounce(store[action], options.debounce![action]);
|
||||||
|
return debounceActions;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
上述自定义插件，在 store 中如下配置：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const useStore = defineStore('demo', {
|
||||||
|
state: () => ({
|
||||||
|
testDebounce: '',
|
||||||
|
}),
|
||||||
|
getters: {},
|
||||||
|
actions: {},
|
||||||
|
debounce: {
|
||||||
|
// 防抖设置
|
||||||
|
testDebounce: 500, // 值为防抖缓冲时间
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="520bb47a"></a>
|
||||||
|
|
||||||
|
## -网络模块设计
|
||||||
|
|
||||||
|
网络模块包含：请求 url 封装`api/requrls/*`、请求方法封装`api/modules/*`、请求工具封装`api/http/*`。
|
||||||
|
<a name="slaQE"></a>
|
||||||
|
|
||||||
|
### requrls
|
||||||
|
|
||||||
|
将项目接口地址收敛至此文件夹下管理，避免出现一个项目多个重复接口 url、方便接口地址复用且方便统一处理
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export const LoginUrl = '/api/user/login';
|
||||||
|
export const LogoutUrl = '/api/user/logout';
|
||||||
|
export const GetUserInfoUrl = '/api/user/info';
|
||||||
|
export const GetMenuListUrl = '/api/user/menu';
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="y561q"></a>
|
||||||
|
|
||||||
|
### modules
|
||||||
|
|
||||||
|
将项目实际请求方法按业务模块划分，统一管理实际业务请求，将请求方法与接口地址解耦
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import axios from 'axios';
|
||||||
|
import { LoginUrl, LogoutUrl, GetUserInfoUrl, GetMenuListUrl } from '@/api/requrls/user';
|
||||||
|
import type { RouteRecordNormalized } from 'vue-router';
|
||||||
|
import type { UserState } from '@/store/modules/user/types';
|
||||||
|
import type { LoginData, LoginRes } from '@/models/user';
|
||||||
|
|
||||||
|
export function login(data: LoginData) {
|
||||||
|
return axios.post<LoginRes>(LoginUrl, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logout() {
|
||||||
|
return axios.post<LoginRes>(LogoutUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUserInfo() {
|
||||||
|
return axios.post<UserState>(GetUserInfoUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMenuList() {
|
||||||
|
return axios.post<RouteRecordNormalized[]>(GetMenuListUrl);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
最终通过`index.ts`将请求方法暴露出去
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export * from './modules/user';
|
||||||
|
export * from './modules/dashboard';
|
||||||
|
export * from './modules/message';
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="0f0a9627"></a>
|
||||||
|
|
||||||
|
#### 请求工具封装
|
||||||
|
|
||||||
|
基于`axios`封装请求方法，提供`form-data/json/urlencoded`格式的数据处理、自定义头部处理、响应拦截错误处理、分级提示（modal、message、none）、get 请求防缓存。
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// 分级错误信息提示，none为静默模式即不提示、modal为对话框提示、message为tips消息提示
|
||||||
|
// ErrorMessageMode默认为message模式，通过传入请求方法的options.errorMessageMode入参判断
|
||||||
|
export type ErrorMessageMode = 'none' | 'modal' | 'message' | undefined;
|
||||||
|
|
||||||
|
// 三种入参数据格式
|
||||||
|
export enum ContentTypeEnum {
|
||||||
|
// json
|
||||||
|
JSON = 'application/json;charset=UTF-8',
|
||||||
|
// form-data qs序列化处理
|
||||||
|
FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
|
||||||
|
// form-data upload文件流处理
|
||||||
|
FORM_DATA = 'multipart/form-data;charset=UTF-8',
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对上传文件请求入参格式额外定义
|
||||||
|
export interface UploadFileParams {
|
||||||
|
// 除文件流外的参数
|
||||||
|
data?: Recordable;
|
||||||
|
// 文件流字段名
|
||||||
|
name?: string;
|
||||||
|
// 文件内容
|
||||||
|
file: File | Blob;
|
||||||
|
// 文件名
|
||||||
|
filename?: string;
|
||||||
|
// 其他parmas
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 基准返回数据格式
|
||||||
|
export interface Result<T = any> {
|
||||||
|
code: number;
|
||||||
|
type: 'success' | 'error' | 'warning';
|
||||||
|
message: string;
|
||||||
|
result: T;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="c53518d5"></a>
|
||||||
|
|
||||||
|
## -directive 指令集
|
||||||
|
|
||||||
|
指令入口`index.ts`导入并注册定义的全部指令
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { App } from 'vue';
|
||||||
|
import permission from './permission';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install(Vue: App) {
|
||||||
|
Vue.directive('permission', permission);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
权限指令（或其他自定义指令）在同级目录下创建，以指令名称命名文件夹，下面是示例：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { DirectiveBinding } from 'vue';
|
||||||
|
import { useUserStore } from '@/store';
|
||||||
|
|
||||||
|
function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
|
const { value } = binding;
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const { role } = userStore;
|
||||||
|
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
if (value.length > 0) {
|
||||||
|
const permissionValues = value;
|
||||||
|
const hasPermission = permissionValues.includes(role);
|
||||||
|
if (!hasPermission && el.parentNode) {
|
||||||
|
el.parentNode.removeChild(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw new Error(`need roles! Like v-permission="['admin','user']"`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
|
checkPermission(el, binding);
|
||||||
|
},
|
||||||
|
updated(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
|
checkPermission(el, binding);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="Kw0kR"></a>
|
||||||
|
|
||||||
|
## -hooks
|
||||||
|
|
||||||
|
全局抽象钩子集（与 Vue2 的 mixins 类似），这里只写业务逻辑的钩子！！！通过`@vueuse/core`我们已经可以得到非常多实用的钩子函数，没必要重复造轮子，在编写钩子功能前先去[Function List](https://vueuse.org/functions.html)查看是否已经有相同功能的钩子了，没有再自己写。导出钩子`export default function useXxx`，以权限钩子示例：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
|
||||||
|
import { useUserStore } from '@/store';
|
||||||
|
|
||||||
|
export default function usePermission() {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
return {
|
||||||
|
accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
|
||||||
|
// do something
|
||||||
|
},
|
||||||
|
findFirstPermissionRoute(_routers: any, role = 'admin') {
|
||||||
|
// do something
|
||||||
|
},
|
||||||
|
// You can add any rules you want
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="In07K"></a>
|
||||||
|
|
||||||
|
## -layout
|
||||||
|
|
||||||
|
项目布局设计模块，将最上层布局组件放置此文件夹内，统一管理项目各类上层布局（若存在，例如左侧菜单-右侧内容布局、顶层菜单-中间内容-底部页脚布局等等），示例：
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<!-- router-view内为实际路由切换变化的内容，视为路由页面容器 -->
|
||||||
|
<router-view v-slot="{ Component, route }">
|
||||||
|
<!-- transition为页面录音切换时提供进出动画，平滑过渡页面渲染 -->
|
||||||
|
<transition name="fade" mode="out-in" appear>
|
||||||
|
<component :is="Component" v-if="route.meta.ignoreCache" :key="route.fullPath" />
|
||||||
|
<!-- keep-alive提供组件状态缓存，以便快速渲染组件内容 -->
|
||||||
|
<keep-alive v-else :include="cacheList">
|
||||||
|
<component :is="Component" :key="route.fullPath" />
|
||||||
|
</keep-alive>
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useTabBarStore } from '@/store';
|
||||||
|
|
||||||
|
const tabBarStore = useTabBarStore();
|
||||||
|
const cacheList = computed(() => tabBarStore.getCacheList);
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="KZkaZ"></a>
|
||||||
|
|
||||||
|
## -models
|
||||||
|
|
||||||
|
全局数据模型，将涉及请求、组件 props、状态库的公共属性抽象为数据模型，在此文件夹内声明，保证全局数据的类型统一、方便维护。下面是请求模型示例：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export interface HttpResponse<T = unknown> {
|
||||||
|
status: number;
|
||||||
|
msg: string;
|
||||||
|
code: number;
|
||||||
|
data: T;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
也可以是业务相关模型：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export interface LoginData {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoginRes {
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="d3Gdu"></a>
|
||||||
|
|
||||||
|
## -mock
|
||||||
|
|
||||||
|
提供全局接口数据 mock 功能，避免因为调试而修改请求代码导致出现问题，按功能模块划分文件，通过`index.ts`暴露，示例如下：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import Mock from 'mockjs';
|
||||||
|
import './user';
|
||||||
|
import '@/views/dashboard/workplace/mock';
|
||||||
|
|
||||||
|
Mock.setup({
|
||||||
|
timeout: '600-1000',
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import Mock from 'mockjs';
|
||||||
|
import setupMock, { successResponseWrap, failResponseWrap } from '@/utils/setup-mock';
|
||||||
|
import { isLogin } from '@/utils/auth';
|
||||||
|
|
||||||
|
import { MockParams } from '@/types/mock';
|
||||||
|
|
||||||
|
setupMock({
|
||||||
|
setup() {
|
||||||
|
// 用户信息
|
||||||
|
Mock.mock(new RegExp('/api/user/info'), () => {
|
||||||
|
if (isLogin()) {
|
||||||
|
const role = window.localStorage.getItem('userRole') || 'admin';
|
||||||
|
return successResponseWrap({
|
||||||
|
name: '王立群',
|
||||||
|
avatar: '//lf1-xgcdn-tos.pstatp.com/obj/vcloud/vadmin/start.8e0e4855ee346a46ccff8ff3e24db27b.png',
|
||||||
|
email: 'wangliqun@email.com',
|
||||||
|
job: 'frontend',
|
||||||
|
jobName: '前端艺术家',
|
||||||
|
organization: 'Frontend',
|
||||||
|
organizationName: '前端',
|
||||||
|
location: 'beijing',
|
||||||
|
locationName: '北京',
|
||||||
|
introduction: '人潇洒，性温存',
|
||||||
|
personalWebsite: 'https://www.arco.design',
|
||||||
|
phone: '150****0000',
|
||||||
|
registrationDate: '2013-05-10 12:10:00',
|
||||||
|
accountId: '15012312300',
|
||||||
|
certification: 1,
|
||||||
|
role,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return failResponseWrap(null, '未登录', 50008);
|
||||||
|
});
|
||||||
|
// 登出
|
||||||
|
Mock.mock(new RegExp('/api/user/logout'), () => {
|
||||||
|
return successResponseWrap(null);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="QgxDQ"></a>
|
||||||
|
|
||||||
|
## -router
|
||||||
|
|
||||||
|
项目路由管理模块，入口文件`index.ts`注册并暴露全部路由，以模块命名文件夹划分模块路由放置在`routes/*`下；`guard/*`下放置路由导航控制，包含权限、登录重定向等；`app-menus/index.ts`为菜单相关的路由信息；`constants.ts`定义路由常量，包括路由白名单、重定向路由名、默认主页路由信息等
|
||||||
|
<a name="YZWcg"></a>
|
||||||
|
|
||||||
|
## -enums
|
||||||
|
|
||||||
|
全局的枚举类型声明模块，将可枚举的类型统一管理，以`类型+Enum`命名，方便维护。示例如下：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
/**
|
||||||
|
* @description: Request result set
|
||||||
|
*/
|
||||||
|
export enum ResultEnum {
|
||||||
|
SUCCESS = 0,
|
||||||
|
ERROR = 1,
|
||||||
|
TIMEOUT = 401,
|
||||||
|
TYPE = 'success',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: request method
|
||||||
|
*/
|
||||||
|
export enum RequestEnum {
|
||||||
|
GET = 'GET',
|
||||||
|
POST = 'POST',
|
||||||
|
PUT = 'PUT',
|
||||||
|
DELETE = 'DELETE',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: contentTyp
|
||||||
|
*/
|
||||||
|
export enum ContentTypeEnum {
|
||||||
|
// json
|
||||||
|
JSON = 'application/json;charset=UTF-8',
|
||||||
|
// form-data qs
|
||||||
|
FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
|
||||||
|
// form-data upload
|
||||||
|
FORM_DATA = 'multipart/form-data;charset=UTF-8',
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="I0KEf"></a>
|
||||||
|
|
||||||
|
## -locale
|
||||||
|
|
||||||
|
国际化模块，存放项目声明的国际化配置，按语种划分模块。模块入口文件为`index.ts`，负责定义菜单、导航栏等公共的国际化配置，其他的按系统功能声明并导入`index.ts`，还有项目内页面组件的国际化配置也需要导入至`index.ts`，页面组件的国际化配置在页面的目录下声明，如：`views/dashboard/workplace/locale`。
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { createI18n } from 'vue-i18n';
|
||||||
|
import en from './en-US';
|
||||||
|
import cn from './zh-CN';
|
||||||
|
|
||||||
|
export const LOCALE_OPTIONS = [
|
||||||
|
{ label: '中文', value: 'zh-CN' },
|
||||||
|
{ label: 'English', value: 'en-US' },
|
||||||
|
];
|
||||||
|
const defaultLocale = localStorage.getItem('MS-locale') || 'zh-CN';
|
||||||
|
const i18n = createI18n({
|
||||||
|
locale: defaultLocale,
|
||||||
|
fallbackLocale: 'en-US',
|
||||||
|
legacy: false,
|
||||||
|
allowComposition: true,
|
||||||
|
messages: {
|
||||||
|
'en-US': en,
|
||||||
|
'zh-CN': cn,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="fZfbw"></a>
|
||||||
|
|
||||||
|
## -types
|
||||||
|
|
||||||
|
项目级别的类型声明，与业务无关的类型声明，与`models`、`enums`不同的是，这里声明的是项目模块级别的类型，或者工具模块的类型声明，例如：`axios`的配置声明、第三方插件不提供 TS 支持但需要我们自定义的声明等
|
||||||
|
<a name="hvu5O"></a>
|
||||||
|
|
||||||
|
## -utils
|
||||||
|
|
||||||
|
公共方法、工具，按功能类型命名文件，单个文件内工具方法的功能要对应命名
|
||||||
|
<a name="FFTqz"></a>
|
||||||
|
|
||||||
|
## -views
|
||||||
|
|
||||||
|
页面模块，按功能模块划分，公共模块有`login`、`base`，其中`base`模块内包含 404、403 页面等
|
||||||
|
<a name="RwVcu"></a>
|
||||||
|
|
||||||
|
## -theme 主题配置
|
||||||
|
1. 去Desing Lab 创建主题 https://arco.design/themes/home
|
||||||
|
2. 以`ms-theme-` 命名为开头
|
||||||
|
3. 点击页面的配置主题
|
||||||
|
**“CSS 变量” + “Tailwind 配置变量” + “基于 css 变量自行计算混合色覆盖 arco-theme 变量”**
|
||||||
|
|
||||||
|
## -.env.\*环境变量配置
|
||||||
|
|
||||||
|
在`vite`中内置了环境变量配置功能，只需要在项目根目录下创建以`.env.*`开头的文件，在内部写入配置的变量即可，默认`.env`为生产环境、`.env.development`为开发环境、`.env.XXX`为自定义`XXX`环境（注意：自定义环境需要在`package.json`的项目运行命令后加入`--mode XXX`），各类环境变量配置示例如下（ ⚠️ 注意！！环境变量文件内使用注释要用`#`，不能使用`//`）:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# .env.production 为生产环境配置
|
||||||
|
NODE_ENV=production # 代码中通过import.meta.env.NODE_ENV访问
|
||||||
|
VITE_STG=1 # 自定义变量必须用VITE_开头，代码中通过import.meta.env.VITE_XXX访问
|
||||||
|
|
||||||
|
# .env.development 为开发环境配置
|
||||||
|
NODE_ENV=development
|
||||||
|
VITE_APP_ENV = dev
|
||||||
|
VITE_APP_TITLE = 我是标题
|
||||||
|
|
||||||
|
# .env.XXX 为自定义环境配置
|
||||||
|
VITE_MYENV = 1 # 代码中通过import.meta.env.VITE_MYENV访问
|
||||||
|
```
|
||||||
|
|
||||||
|
⚠️ 上述环境变量在代码中正常都可以用`import.meta.env.VITE_XXX`访问，但是在`vite.config.ts`配置文件中无法使用此方法访问，原因是此访问链是 vite 在初始化后通过读取本地`.env.XXX`文件并注入到`import.meta`中的，但是在`vite.config.ts`中 vite 此时还未初始化，所以无法通过上述方法访问，应通过下面方法访问：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { defineConfig, loadEnv } from 'vite'; // 导入loadEnv方法
|
||||||
|
loadEnv(mode, process.cwd()).VITE_XXX; // 在需要访问env里变量的地方使用此方法访问即可
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="c61428f2"></a>
|
||||||
|
|
||||||
|
## -TailwindCSS 配置
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
module.exports = {
|
||||||
|
content: ['./index.html', './src/**/*.{html,js,vue}', './src/*.{html,js,vue}'], // 需要解析的文件路径
|
||||||
|
theme: {
|
||||||
|
// 自定义主题配置
|
||||||
|
backgroundColor: {
|
||||||
|
// 自定义背景色
|
||||||
|
menuHover: '#272D39',
|
||||||
|
headerBg: '#191E29',
|
||||||
|
},
|
||||||
|
textColor: (theme) => ({
|
||||||
|
// 自定义字体颜色
|
||||||
|
...theme('colors'), // 这里必须解构原本有的颜色，不然会导致在页面style中使用@apply应用内部字体颜色类的时候报错找不到内部字体颜色类
|
||||||
|
'40Gray': 'rgba(255,255,255,0.40)',
|
||||||
|
'65Gray': 'rgba(255,255,255,0.65)',
|
||||||
|
}),
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="c7baab5c"></a>
|
||||||
|
|
||||||
|
## -TS 配置-tsconfig.json
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"src/components.d.ts",
|
||||||
|
"auto-imports.d.ts"
|
||||||
|
], // TS解析路径配置
|
||||||
|
"exclude": ["node_modules"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true, // 允许编译器编译JS，JSX文件
|
||||||
|
"noEmit": true,
|
||||||
|
"target": "esnext", // 使用es最新语法
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"allowSyntheticDefaultImports": true, // 允许异步导入模块，配合自动导入插件使用
|
||||||
|
"module": "esnext", // 使用ES模块语法
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"strict": true, // 严格模式
|
||||||
|
"jsx": "preserve",
|
||||||
|
"sourceMap": true, // 代码映射
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"lib": ["esnext", "dom"],
|
||||||
|
"skipLibCheck": true, // 跳过node依赖包语法检查
|
||||||
|
"types": [
|
||||||
|
// "vitest/globals",
|
||||||
|
// "vite-plugin-svg-icons/client"
|
||||||
|
], // 手动导入TS类型声明文件
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
// 路径映射
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"#/*": ["types/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="50a6c7f6"></a>
|
||||||
|
|
||||||
|
## -vite 配置-插件详解
|
||||||
|
|
||||||
|
`vite`构建生产资源使用`rollup`打包，所以可以在`vite`中使用`rollup`支持的所有插件。
|
||||||
|
|
||||||
|
- 组件自动导入，使用`unplugin-auto-import/vite`插件实现自动导入组件、`unplugin-vue-components/vite`插件按需导入自定义组件，具体用法如下：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
import { vitePluginForArco } from '@arco-plugins/vite-vue'
|
||||||
|
|
||||||
|
export default () => defineConfig({
|
||||||
|
plugins: [
|
||||||
|
// 自定义组件自动引入
|
||||||
|
AutoImport({å
|
||||||
|
dts: 'src/auto-import.d.ts', // 输出声明文件地址(在使用typescript时必须配置，不然会导致页面使用未导入的组件时报错)
|
||||||
|
resolvers: [ElementPlusResolver()], // ElementPlus自动导入
|
||||||
|
}),
|
||||||
|
// 自定义组件按需引入
|
||||||
|
Components({
|
||||||
|
dts: 'src/components.d.ts', // 输出声明文件地址(在使用typescript时必须配置，不然会导致页面使用未导入的组件时报错)
|
||||||
|
dirs: ['src/components'], // 按需加载的文件夹
|
||||||
|
resolvers: [
|
||||||
|
ArcoResolver(), // ArcoDesignVue按需加载
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
// 样式自动导入
|
||||||
|
vitePluginForArco({})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- 使用`vite-plugin-svg-icons`插件实现自动加载 svg 图片，并通过封装 svg 组件的方式，一行代码使用 svg，配置如下：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
|
||||||
|
|
||||||
|
export default () =>
|
||||||
|
defineConfig({
|
||||||
|
plugins: [
|
||||||
|
createSvgIconsPlugin({
|
||||||
|
// 指定svg读取的文件夹
|
||||||
|
iconDirs: [resolve(process.cwd(), 'src/assets/icons/svg')],
|
||||||
|
// 指定icon的读取名字，使用svg文件名为icon名字
|
||||||
|
symbolId: 'icon-[dir]-[name]',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
- 使用`vite`自带插件`loadEnv`读取环境信息，可作环境判断，使用`rollup-plugin-visualizer`插件可分析打包后的文件体积，配置如下：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { defineConfig, loadEnv } from 'vite';
|
||||||
|
import { visualizer } from 'rollup-plugin-visualizer';
|
||||||
|
|
||||||
|
// 这里的mode参数为package.json文件配置的环境参数，使用`--mode XXX`，如"report: rimraf dist && vite build --mode analyze"
|
||||||
|
export default ({ mode }) =>
|
||||||
|
defineConfig({
|
||||||
|
plugins: [
|
||||||
|
// 这里通过--mode analyze配置为分析模式，使用visualizer插件分析方法，输出report.html分析报告
|
||||||
|
loadEnv(mode, process.cwd()).VITE_ANALYZE === 'Y'
|
||||||
|
? visualizer({ open: true, brotliSize: true, filename: 'report.html' })
|
||||||
|
: null,
|
||||||
|
],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
<a name="0c0978d0"></a>
|
||||||
|
|
||||||
|
## -vite 配置-build 详解
|
||||||
|
|
||||||
|
上面讲述了插件应用，下面讲解除了插件外，在`vite`中的 build 构建生产资源时，`rollupOptions`的配置：
|
||||||
|
|
||||||
|
- `output`为输出产物配置，我们可以通过`manualChunks`去配置分包策略（与`webpack`分包机制类似），配置如下：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { mergeConfig } from 'vite';
|
||||||
|
import baseConfig from './vite.config.base';
|
||||||
|
import configCompressPlugin from './plugin/compress';
|
||||||
|
import configVisualizerPlugin from './plugin/visualizer';
|
||||||
|
import configArcoResolverPlugin from './plugin/arcoResolver';
|
||||||
|
import configImageminPlugin from './plugin/imagemin';
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
{
|
||||||
|
mode: 'production',
|
||||||
|
plugins: [
|
||||||
|
configCompressPlugin('gzip'),
|
||||||
|
configVisualizerPlugin(),
|
||||||
|
configArcoResolverPlugin(),
|
||||||
|
configImageminPlugin(),
|
||||||
|
],
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
arco: ['@arco-design/web-vue'],
|
||||||
|
chart: ['echarts', 'vue-echarts'],
|
||||||
|
vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chunkSizeWarningLimit: 2000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
baseConfig
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 单元测试
|
||||||
|
|
||||||
|
测试框架：vitest
|
||||||
|
|
||||||
|
单元测试实用工具库： @vue/test-utils
|
||||||
|
|
||||||
|
测试环境: js-dom
|
||||||
|
|
||||||
|
报告: @vitest/coverage-c8
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm add -D vitest @vue/test-utils js-dom @vitest/coverage-c8
|
||||||
|
```
|
||||||
|
|
||||||
|
配置
|
||||||
|
|
||||||
|
根目录新建 vitest.config.ts
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { mergeConfig } from 'vite';
|
||||||
|
import { defineConfig } from 'vitest/config';
|
||||||
|
import viteConfig from './config/vite.config.dev';
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
viteConfig,
|
||||||
|
defineConfig({
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: ['@vue/babel-plugin-jsx'],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
extends: ['@commitlint/config-conventional'],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
import '@vue/runtime-core'
|
||||||
|
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/**
|
||||||
|
* If you use the template method for development, you can use the unplugin-vue-components plugin to enable on-demand loading support.
|
||||||
|
* 按需引入
|
||||||
|
* https://github.com/antfu/unplugin-vue-components
|
||||||
|
* https://arco.design/vue/docs/start
|
||||||
|
* Although the Pro project is full of imported components, this plugin will be used by default.
|
||||||
|
* 虽然Pro项目中是全量引入组件，但此插件会默认使用。
|
||||||
|
*/
|
||||||
|
import Components from 'unplugin-vue-components/vite';
|
||||||
|
import { ArcoResolver } from 'unplugin-vue-components/resolvers';
|
||||||
|
|
||||||
|
export default function configArcoResolverPlugin() {
|
||||||
|
const arcoResolverPlugin = Components({
|
||||||
|
dirs: [], // Avoid parsing src/components. 避免解析到src/components
|
||||||
|
deep: false,
|
||||||
|
resolvers: [ArcoResolver()],
|
||||||
|
});
|
||||||
|
return arcoResolverPlugin;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* Theme import
|
||||||
|
* 样式按需引入
|
||||||
|
* https://github.com/arco-design/arco-plugins/blob/main/packages/plugin-vite-vue/README.md
|
||||||
|
* https://arco.design/vue/docs/start
|
||||||
|
*/
|
||||||
|
import { vitePluginForArco } from '@arco-plugins/vite-vue';
|
||||||
|
|
||||||
|
export default function configArcoStyleImportPlugin() {
|
||||||
|
// 按需加载主题样式
|
||||||
|
const arcoResolverPlugin = vitePluginForArco({
|
||||||
|
theme: '@arco-themes/vue-ms-theme',
|
||||||
|
});
|
||||||
|
// const arcoResolverPlugin = vitePluginForArco({});
|
||||||
|
return arcoResolverPlugin;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
/**
|
||||||
|
* Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
|
||||||
|
* gzip压缩
|
||||||
|
* https://github.com/anncwb/vite-plugin-compression
|
||||||
|
*/
|
||||||
|
import type { Plugin } from 'vite';
|
||||||
|
import compressPlugin from 'vite-plugin-compression';
|
||||||
|
|
||||||
|
export default function configCompressPlugin(compress: 'gzip' | 'brotli', deleteOriginFile = false): Plugin | Plugin[] {
|
||||||
|
const plugins: Plugin[] = [];
|
||||||
|
|
||||||
|
if (compress === 'gzip') {
|
||||||
|
plugins.push(
|
||||||
|
compressPlugin({
|
||||||
|
ext: '.gz',
|
||||||
|
deleteOriginFile,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (compress === 'brotli') {
|
||||||
|
plugins.push(
|
||||||
|
compressPlugin({
|
||||||
|
ext: '.br',
|
||||||
|
algorithm: 'brotliCompress',
|
||||||
|
deleteOriginFile,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return plugins;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
/**
|
||||||
|
* Image resource files used to compress the output of the production environment
|
||||||
|
* 图片压缩
|
||||||
|
* https://github.com/anncwb/vite-plugin-imagemin
|
||||||
|
*/
|
||||||
|
import viteImagemin from 'vite-plugin-imagemin';
|
||||||
|
|
||||||
|
export default function configImageminPlugin() {
|
||||||
|
const imageminPlugin = viteImagemin({
|
||||||
|
gifsicle: {
|
||||||
|
optimizationLevel: 7,
|
||||||
|
interlaced: false,
|
||||||
|
},
|
||||||
|
optipng: {
|
||||||
|
optimizationLevel: 7,
|
||||||
|
},
|
||||||
|
mozjpeg: {
|
||||||
|
quality: 20,
|
||||||
|
},
|
||||||
|
pngquant: {
|
||||||
|
quality: [0.8, 0.9],
|
||||||
|
speed: 4,
|
||||||
|
},
|
||||||
|
svgo: {
|
||||||
|
plugins: [
|
||||||
|
{
|
||||||
|
name: 'removeViewBox',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'removeEmptyAttrs',
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return imageminPlugin;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
/**
|
||||||
|
* Generation packaging analysis
|
||||||
|
* 生成打包分析
|
||||||
|
*/
|
||||||
|
import visualizer from 'rollup-plugin-visualizer';
|
||||||
|
import { isReportMode } from '../utils';
|
||||||
|
|
||||||
|
export default function configVisualizerPlugin() {
|
||||||
|
if (isReportMode()) {
|
||||||
|
return visualizer({
|
||||||
|
filename: './node_modules/.cache/visualizer/stats.html',
|
||||||
|
open: true,
|
||||||
|
gzipSize: true,
|
||||||
|
brotliSize: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/**
|
||||||
|
* Whether to generate package preview
|
||||||
|
* 是否生成打包报告
|
||||||
|
*/
|
||||||
|
export default {};
|
||||||
|
|
||||||
|
export function isReportMode(): boolean {
|
||||||
|
return process.env.REPORT === 'true';
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import { resolve } from 'path';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||||
|
import svgLoader from 'vite-svg-loader';
|
||||||
|
import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
|
||||||
|
import configArcoResolverPlugin from './plugin/arcoResolver';
|
||||||
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueJsx(),
|
||||||
|
svgLoader({ svgoConfig: {} }),
|
||||||
|
configArcoResolverPlugin(),
|
||||||
|
configArcoStyleImportPlugin(),
|
||||||
|
createSvgIconsPlugin({
|
||||||
|
// 指定需要缓存的图标文件夹
|
||||||
|
iconDirs: [resolve(process.cwd(), 'src/assets/svg')], // 与本地储存地址一致
|
||||||
|
// 指定symbolId格式
|
||||||
|
symbolId: 'icon-[name]',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: [
|
||||||
|
{
|
||||||
|
find: '@',
|
||||||
|
replacement: resolve(__dirname, '../src'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: 'assets',
|
||||||
|
replacement: resolve(__dirname, '../src/assets'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: 'vue-i18n',
|
||||||
|
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: 'vue',
|
||||||
|
replacement: 'vue/dist/vue.esm-bundler.js', // compile template
|
||||||
|
},
|
||||||
|
],
|
||||||
|
extensions: ['.ts', '.js'],
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
'process.env': {},
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
less: {
|
||||||
|
modifyVars: {
|
||||||
|
hack: `true; @import (reference) "${resolve('src/assets/style/breakpoint.less')}";`,
|
||||||
|
},
|
||||||
|
javascriptEnabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
/// <reference types="vitest" />
|
||||||
|
import { mergeConfig } from 'vite';
|
||||||
|
import eslint from 'vite-plugin-eslint';
|
||||||
|
import baseConfig from './vite.config.base';
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
{
|
||||||
|
mode: 'development',
|
||||||
|
server: {
|
||||||
|
open: true,
|
||||||
|
fs: {
|
||||||
|
strict: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
eslint({
|
||||||
|
cache: false,
|
||||||
|
include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
|
||||||
|
exclude: ['node_modules'],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
baseConfig
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { mergeConfig } from 'vite';
|
||||||
|
import baseConfig from './vite.config.base';
|
||||||
|
import configCompressPlugin from './plugin/compress';
|
||||||
|
import configVisualizerPlugin from './plugin/visualizer';
|
||||||
|
import configImageminPlugin from './plugin/imagemin';
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
{
|
||||||
|
mode: 'production',
|
||||||
|
plugins: [configCompressPlugin('gzip'), configVisualizerPlugin(), configImageminPlugin()],
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
arco: ['@arco-design/web-vue'],
|
||||||
|
chart: ['echarts', 'vue-echarts'],
|
||||||
|
vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chunkSizeWarningLimit: 2000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
baseConfig
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link
|
||||||
|
rel="shortcut icon"
|
||||||
|
type="image/x-icon"
|
||||||
|
href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico"
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>MeterSphere</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
{
|
||||||
|
"name": "meter-sphere",
|
||||||
|
"description": "MeterSphere FrontEnd",
|
||||||
|
"version": "3.0.0",
|
||||||
|
"private": true,
|
||||||
|
"author": "MeterSphere Team",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --config ./config/vite.config.dev.ts",
|
||||||
|
"build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
|
||||||
|
"report": "cross-env REPORT=true npm run build",
|
||||||
|
"preview": "npm run build && vite preview --host",
|
||||||
|
"type:check": "vue-tsc --noEmit --skipLibCheck",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"lint:styles": "stylelint 'src/**/*.{vue,html,css,scss,less}' --fix",
|
||||||
|
"lint-staged": "npx lint-staged",
|
||||||
|
"prepare": "husky install",
|
||||||
|
"test": "vitest",
|
||||||
|
"coverage": "vitest run --coverage"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,ts,jsx,tsx}": [
|
||||||
|
"prettier --write",
|
||||||
|
"eslint --fix"
|
||||||
|
],
|
||||||
|
"*.vue": [
|
||||||
|
"stylelint --fix",
|
||||||
|
"prettier --write",
|
||||||
|
"eslint --fix"
|
||||||
|
],
|
||||||
|
"*.{less,css,scss,sass}": [
|
||||||
|
"stylelint --fix --custom-syntax postcss-less",
|
||||||
|
"prettier --write"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@7polo/kity": "2.0.8",
|
||||||
|
"@7polo/kityminder-core": "1.4.53",
|
||||||
|
"@arco-design/web-vue": "^2.46.0",
|
||||||
|
"@arco-themes/vue-ms-theme": "^0.0.1",
|
||||||
|
"@form-create/arco-design": "^3.1.21",
|
||||||
|
"@vueuse/core": "^9.13.0",
|
||||||
|
"ace-builds": "^1.21.1",
|
||||||
|
"axios": "^0.24.0",
|
||||||
|
"dayjs": "^1.11.7",
|
||||||
|
"echarts": "^5.4.2",
|
||||||
|
"hotbox-minder": "1.0.15",
|
||||||
|
"jsonpath-picker-vanilla": "^1.2.4",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"mitt": "^3.0.0",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
|
"pinia": "^2.0.36",
|
||||||
|
"pinia-plugin-persistedstate": "^3.1.0",
|
||||||
|
"query-string": "^8.1.0",
|
||||||
|
"sortablejs": "^1.15.0",
|
||||||
|
"vue": "^3.3.2",
|
||||||
|
"vue-echarts": "^6.5.5",
|
||||||
|
"vue-i18n": "^9.2.2",
|
||||||
|
"vue-router": "^4.2.0",
|
||||||
|
"vue3-ace-editor": "^2.2.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@arco-plugins/vite-vue": "^1.4.5",
|
||||||
|
"@commitlint/cli": "^17.6.3",
|
||||||
|
"@commitlint/config-conventional": "^17.6.3",
|
||||||
|
"@types/lodash": "^4.14.194",
|
||||||
|
"@types/lodash-es": "^4.17.7",
|
||||||
|
"@types/mockjs": "^1.0.7",
|
||||||
|
"@types/nprogress": "^0.2.0",
|
||||||
|
"@types/sortablejs": "^1.15.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.59.5",
|
||||||
|
"@typescript-eslint/parser": "^5.59.5",
|
||||||
|
"@vitejs/plugin-vue": "^3.2.0",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^2.1.1",
|
||||||
|
"@vitest/coverage-c8": "^0.31.0",
|
||||||
|
"@vue/babel-plugin-jsx": "^1.1.1",
|
||||||
|
"@vue/test-utils": "^2.3.2",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"consola": "^2.15.3",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"eslint": "^8.40.0",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"eslint-config-prettier": "^8.8.0",
|
||||||
|
"eslint-import-resolver-typescript": "^3.5.5",
|
||||||
|
"eslint-plugin-import": "^2.27.5",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
|
"eslint-plugin-vue": "^9.12.0",
|
||||||
|
"fast-glob": "^3.2.12",
|
||||||
|
"husky": "^8.0.3",
|
||||||
|
"jsdom": "^22.0.0",
|
||||||
|
"less": "^4.1.3",
|
||||||
|
"less-loader": "^11.1.0",
|
||||||
|
"lint-staged": "^13.2.2",
|
||||||
|
"mockjs": "^1.1.0",
|
||||||
|
"postcss": "^8.4.23",
|
||||||
|
"postcss-html": "^1.5.0",
|
||||||
|
"postcss-less": "^6.0.0",
|
||||||
|
"prettier": "^2.8.8",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||||
|
"rollup": "^2.79.1",
|
||||||
|
"rollup-plugin-visualizer": "^5.9.0",
|
||||||
|
"sass": "^1.62.1",
|
||||||
|
"stylelint": "^14.6.0",
|
||||||
|
"stylelint-config-html": "^1.0.0",
|
||||||
|
"stylelint-config-prettier": "^9.0.3",
|
||||||
|
"stylelint-config-rational-order": "^0.1.2",
|
||||||
|
"stylelint-config-recommended": "^7.0.0",
|
||||||
|
"stylelint-config-recommended-less": "^1.0.4",
|
||||||
|
"stylelint-config-recommended-scss": "^7.0.0",
|
||||||
|
"stylelint-config-recommended-vue": "^1.4.0",
|
||||||
|
"stylelint-config-standard": "^25.0.0",
|
||||||
|
"stylelint-config-standard-scss": "^4.0.0",
|
||||||
|
"stylelint-less": "^1.0.5",
|
||||||
|
"stylelint-order": "^5.0.0",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
|
"typescript": "^4.9.5",
|
||||||
|
"unplugin-vue-components": "^0.24.1",
|
||||||
|
"vite": "^3.2.6",
|
||||||
|
"vite-plugin-compression": "^0.5.1",
|
||||||
|
"vite-plugin-eslint": "^1.8.1",
|
||||||
|
"vite-plugin-imagemin": "^0.6.1",
|
||||||
|
"vite-plugin-svg-icons": "^2.0.1",
|
||||||
|
"vite-svg-loader": "^3.6.0",
|
||||||
|
"vitest": "^0.31.0",
|
||||||
|
"vue-tsc": "^1.6.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"bin-wrapper": "npm:bin-wrapper-china",
|
||||||
|
"rollup": "^2.79.1",
|
||||||
|
"gifsicle": "5.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: [require('tailwindcss'), require('autoprefixer')],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<template>
|
||||||
|
<a-config-provider :locale="locale">
|
||||||
|
<router-view />
|
||||||
|
<global-setting />
|
||||||
|
<ThemeBox />
|
||||||
|
</a-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
|
||||||
|
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
|
||||||
|
import GlobalSetting from '@/components/global-setting/index.vue';
|
||||||
|
import useLocale from '@/locale/useLocale';
|
||||||
|
import ThemeBox from '@/components/theme-box/index.vue';
|
||||||
|
|
||||||
|
const { currentLocale } = useLocale();
|
||||||
|
const locale = computed(() => {
|
||||||
|
switch (currentLocale.value) {
|
||||||
|
case 'zh-CN':
|
||||||
|
return zhCN;
|
||||||
|
case 'en-US':
|
||||||
|
return enUS;
|
||||||
|
default:
|
||||||
|
return zhCN;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
import axios from 'axios';
|
||||||
|
import { AxiosCanceler } from './axiosCancel';
|
||||||
|
import { isFunction } from '@/utils/is';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { ContentTypeEnum } from '@/enums/httpEnum';
|
||||||
|
|
||||||
|
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
|
||||||
|
import type { RequestOptions, Result, UploadFileParams } from '#/axios';
|
||||||
|
import type { CreateAxiosOptions } from './axiosTransform';
|
||||||
|
|
||||||
|
export * from './axiosTransform';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 封装axios请求，返回重新封装的数据格式
|
||||||
|
*/
|
||||||
|
export class MSAxios {
|
||||||
|
private axiosInstance: AxiosInstance;
|
||||||
|
|
||||||
|
private readonly options: CreateAxiosOptions;
|
||||||
|
|
||||||
|
constructor(options: CreateAxiosOptions) {
|
||||||
|
this.options = options;
|
||||||
|
this.axiosInstance = axios.create(options);
|
||||||
|
this.setupInterceptors();
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTransform() {
|
||||||
|
const { transform } = this.options;
|
||||||
|
return transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 拦截器配置
|
||||||
|
*/
|
||||||
|
private setupInterceptors() {
|
||||||
|
const transform = this.getTransform();
|
||||||
|
if (!transform) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { requestInterceptors, responseInterceptors, responseInterceptorsCatch } = transform;
|
||||||
|
|
||||||
|
const axiosCanceler = new AxiosCanceler();
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
|
||||||
|
// 如果ignoreCancelToken为true，则不添加到pending中
|
||||||
|
const {
|
||||||
|
// @ts-ignore
|
||||||
|
headers: { ignoreCancelToken },
|
||||||
|
} = config;
|
||||||
|
|
||||||
|
const ignoreCancel =
|
||||||
|
ignoreCancelToken !== undefined ? ignoreCancelToken : this.options.requestOptions?.ignoreCancelToken;
|
||||||
|
|
||||||
|
if (!ignoreCancel) {
|
||||||
|
axiosCanceler.addPending(config);
|
||||||
|
}
|
||||||
|
if (requestInterceptors && isFunction(requestInterceptors)) {
|
||||||
|
config = requestInterceptors(config, this.options);
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
}, undefined);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
|
||||||
|
if (res) {
|
||||||
|
axiosCanceler.removePending(res.config);
|
||||||
|
}
|
||||||
|
if (responseInterceptors && isFunction(responseInterceptors)) {
|
||||||
|
res = responseInterceptors(res);
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}, undefined);
|
||||||
|
|
||||||
|
// 响应错误处理
|
||||||
|
if (responseInterceptorsCatch && isFunction(responseInterceptorsCatch)) {
|
||||||
|
this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 文件上传
|
||||||
|
*/
|
||||||
|
uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
|
||||||
|
const formData = new window.FormData();
|
||||||
|
const customFilename = params.name || 'file';
|
||||||
|
|
||||||
|
if (params.filename) {
|
||||||
|
formData.append(customFilename, params.file, params.filename);
|
||||||
|
} else {
|
||||||
|
formData.append(customFilename, params.file);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.data) {
|
||||||
|
Object.keys(params.data).forEach((key) => {
|
||||||
|
const value = params.data[key];
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
value.forEach((item) => {
|
||||||
|
formData.append(`${key}[]`, item);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
formData.append(key, params.data[key]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.axiosInstance.request<T>({
|
||||||
|
...config,
|
||||||
|
method: 'POST',
|
||||||
|
data: formData,
|
||||||
|
headers: {
|
||||||
|
'Content-type': ContentTypeEnum.FORM_DATA,
|
||||||
|
// @ts-ignore
|
||||||
|
'ignoreCancelToken': true, // 文件上传请求不需要添加到pending中
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||||
|
return this.request({ ...config, method: 'GET' }, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||||
|
return this.request({ ...config, method: 'POST' }, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||||
|
return this.request({ ...config, method: 'PUT' }, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||||
|
return this.request({ ...config, method: 'DELETE' }, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
|
||||||
|
let conf: CreateAxiosOptions = cloneDeep(config);
|
||||||
|
const transform = this.getTransform();
|
||||||
|
|
||||||
|
const { requestOptions } = this.options;
|
||||||
|
|
||||||
|
const opt = { ...requestOptions, ...options };
|
||||||
|
|
||||||
|
const { beforeRequestHook, transformRequestHook } = transform || {};
|
||||||
|
// 请求之前处理config
|
||||||
|
if (beforeRequestHook && isFunction(beforeRequestHook)) {
|
||||||
|
conf = beforeRequestHook(conf, opt);
|
||||||
|
}
|
||||||
|
conf.requestOptions = opt;
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.axiosInstance
|
||||||
|
.request<any, AxiosResponse<Result>>(conf)
|
||||||
|
.then((res: AxiosResponse<Result>) => {
|
||||||
|
// 请求成功后的处理
|
||||||
|
if (transformRequestHook && isFunction(transformRequestHook)) {
|
||||||
|
try {
|
||||||
|
const ret = transformRequestHook(res, opt);
|
||||||
|
resolve(ret);
|
||||||
|
} catch (err) {
|
||||||
|
reject(err || new Error('request error!'));
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
resolve(res as unknown as Promise<T>);
|
||||||
|
})
|
||||||
|
.catch((e: Error | AxiosError) => {
|
||||||
|
if (axios.isAxiosError(e)) {
|
||||||
|
// 在这可重写axios错误消息
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
reject(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import type { AxiosRequestConfig, Canceler } from 'axios';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { isFunction } from '@/utils/is';
|
||||||
|
|
||||||
|
let pendingMap = new Map<string, Canceler>();
|
||||||
|
|
||||||
|
export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
|
||||||
|
|
||||||
|
export class AxiosCanceler {
|
||||||
|
/**
|
||||||
|
* 添加请求
|
||||||
|
* @param {Object} config
|
||||||
|
*/
|
||||||
|
addPending(config: AxiosRequestConfig) {
|
||||||
|
this.removePending(config);
|
||||||
|
const url = getPendingUrl(config);
|
||||||
|
config.cancelToken =
|
||||||
|
config.cancelToken ||
|
||||||
|
new axios.CancelToken((cancel) => {
|
||||||
|
if (!pendingMap.has(url)) {
|
||||||
|
// 非重复请求，存入pending中
|
||||||
|
pendingMap.set(url, cancel);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 清理全部pending中的请求
|
||||||
|
*/
|
||||||
|
removeAllPending() {
|
||||||
|
pendingMap.forEach((cancel) => {
|
||||||
|
if (cancel && isFunction(cancel)) {
|
||||||
|
cancel();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
pendingMap.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消并移除指定请求
|
||||||
|
* @param {Object} config
|
||||||
|
*/
|
||||||
|
removePending(config: AxiosRequestConfig) {
|
||||||
|
const url = getPendingUrl(config);
|
||||||
|
|
||||||
|
if (pendingMap.has(url)) {
|
||||||
|
// 根据标识找到pending中对应的请求并取消
|
||||||
|
const cancel = pendingMap.get(url);
|
||||||
|
if (cancel && isFunction(cancel)) {
|
||||||
|
cancel(url);
|
||||||
|
}
|
||||||
|
pendingMap.delete(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 重置pending列表
|
||||||
|
*/
|
||||||
|
static reset(): void {
|
||||||
|
pendingMap = new Map<string, Canceler>();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
/**
|
||||||
|
* Data processing class, can be configured according to the project
|
||||||
|
*/
|
||||||
|
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||||
|
import type { RequestOptions, Result } from '#/axios';
|
||||||
|
|
||||||
|
export abstract class AxiosTransform {
|
||||||
|
/**
|
||||||
|
* @description: 请求之前处理配置
|
||||||
|
*/
|
||||||
|
beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 处理请求数据。如果数据不是预期格式，可直接抛出错
|
||||||
|
*/
|
||||||
|
transformRequestHook?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 请求之前的拦截器
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
requestInterceptors?: (config: AxiosRequestConfig, options: CreateAxiosOptions) => AxiosRequestConfig;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 请求之后的拦截器
|
||||||
|
*/
|
||||||
|
responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 请求之后的拦截器错误处理
|
||||||
|
*/
|
||||||
|
responseInterceptorsCatch?: (error: Error) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateAxiosOptions extends AxiosRequestConfig {
|
||||||
|
authenticationScheme?: string;
|
||||||
|
transform?: AxiosTransform;
|
||||||
|
requestOptions?: RequestOptions;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { Message, Modal } from '@arco-design/web-vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import useUser from '@/store/modules/user';
|
||||||
|
|
||||||
|
import type { ErrorMessageMode } from '#/axios';
|
||||||
|
|
||||||
|
export default function checkStatus(status: number, msg: string, errorMessageMode: ErrorMessageMode = 'message'): void {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const userStore = useUser();
|
||||||
|
let errMessage = '';
|
||||||
|
|
||||||
|
switch (status) {
|
||||||
|
case 400:
|
||||||
|
errMessage = `${msg}`;
|
||||||
|
break;
|
||||||
|
// 401: Not logged in
|
||||||
|
case 401:
|
||||||
|
errMessage = msg || t('api.errMsg401');
|
||||||
|
userStore.logout();
|
||||||
|
break;
|
||||||
|
case 403:
|
||||||
|
errMessage = t('api.errMsg403');
|
||||||
|
break;
|
||||||
|
// 404请求不存在
|
||||||
|
case 404:
|
||||||
|
errMessage = t('api.errMsg404');
|
||||||
|
break;
|
||||||
|
case 405:
|
||||||
|
errMessage = t('api.errMsg405');
|
||||||
|
break;
|
||||||
|
case 408:
|
||||||
|
errMessage = t('api.errMsg408');
|
||||||
|
break;
|
||||||
|
case 500:
|
||||||
|
errMessage = t('api.errMsg500');
|
||||||
|
break;
|
||||||
|
case 501:
|
||||||
|
errMessage = t('api.errMsg501');
|
||||||
|
break;
|
||||||
|
case 502:
|
||||||
|
errMessage = t('api.errMsg502');
|
||||||
|
break;
|
||||||
|
case 503:
|
||||||
|
errMessage = t('api.errMsg503');
|
||||||
|
break;
|
||||||
|
case 504:
|
||||||
|
errMessage = t('api.errMsg504');
|
||||||
|
break;
|
||||||
|
case 505:
|
||||||
|
errMessage = t('api.errMsg505');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errMessage) {
|
||||||
|
if (errorMessageMode === 'modal') {
|
||||||
|
Modal.error({ title: t('api.errorTip'), content: errMessage });
|
||||||
|
} else if (errorMessageMode === 'message') {
|
||||||
|
Message.error(errMessage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export function joinTimestamp<T extends boolean>(join: boolean, restful: T): T extends true ? string : object;
|
||||||
|
|
||||||
|
export function joinTimestamp(join: boolean, restful = false): string | object {
|
||||||
|
if (!join) {
|
||||||
|
return restful ? '' : {};
|
||||||
|
}
|
||||||
|
const now = new Date().getTime();
|
||||||
|
if (restful) {
|
||||||
|
return `?_t=${now}`;
|
||||||
|
}
|
||||||
|
return { _t: now };
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
import { MSAxios } from './Axios';
|
||||||
|
import checkStatus from './checkStatus';
|
||||||
|
import { Message, Modal } from '@arco-design/web-vue';
|
||||||
|
import { RequestEnum, ContentTypeEnum, ResultEnum } from '@/enums/httpEnum';
|
||||||
|
import { isString } from '@/utils/is';
|
||||||
|
import { getToken } from '@/utils/auth';
|
||||||
|
import { setObjToUrlParams, deepMerge } from '@/utils';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { joinTimestamp } from './helper';
|
||||||
|
|
||||||
|
import type { AxiosResponse } from 'axios';
|
||||||
|
import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
|
||||||
|
import type { Recordable } from '#/global';
|
||||||
|
import type { RequestOptions, Result } from '#/axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 数据处理，方便区分多种处理方式
|
||||||
|
*/
|
||||||
|
const transform: AxiosTransform = {
|
||||||
|
/**
|
||||||
|
* @description 请求之前处理config
|
||||||
|
*/
|
||||||
|
beforeRequestHook: (config, options) => {
|
||||||
|
const { joinParamsToUrl, joinTime = true } = options;
|
||||||
|
|
||||||
|
const params = config.params || {};
|
||||||
|
const data = config.data || false;
|
||||||
|
if (config.method?.toUpperCase() === RequestEnum.GET) {
|
||||||
|
if (!isString(params)) {
|
||||||
|
// 给 get 请求加上时间戳参数，避免从缓存中拿数据。
|
||||||
|
config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
|
||||||
|
} else {
|
||||||
|
// 兼容restful风格
|
||||||
|
config.url = `${config.url}${params}${joinTimestamp(joinTime, true)}`;
|
||||||
|
config.params = undefined;
|
||||||
|
}
|
||||||
|
} else if (isString(params)) {
|
||||||
|
// 兼容restful风格
|
||||||
|
config.url += params;
|
||||||
|
config.params = undefined;
|
||||||
|
} else {
|
||||||
|
if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
|
||||||
|
config.data = data;
|
||||||
|
config.params = params;
|
||||||
|
} else {
|
||||||
|
// 非GET请求如果没有提供data，则将params视为data
|
||||||
|
config.data = { ...params };
|
||||||
|
config.params = undefined;
|
||||||
|
}
|
||||||
|
if (joinParamsToUrl) {
|
||||||
|
config.url = setObjToUrlParams(config.url as string, { ...config.params, ...config.data });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
|
||||||
|
*/
|
||||||
|
transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { isTransformResponse, isReturnNativeResponse } = options;
|
||||||
|
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
||||||
|
if (isReturnNativeResponse) {
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
// 不进行任何处理，直接返回
|
||||||
|
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
|
||||||
|
if (!isTransformResponse) {
|
||||||
|
return res.data;
|
||||||
|
}
|
||||||
|
// 错误的时候返回
|
||||||
|
|
||||||
|
const { data } = res;
|
||||||
|
if (!data) {
|
||||||
|
throw new Error(t('api.apiRequestFailed'));
|
||||||
|
}
|
||||||
|
// 这里 code，result，message为 后台统一的字段
|
||||||
|
const { code, result, message } = data;
|
||||||
|
|
||||||
|
// TODO:定义完成功code后需要重写
|
||||||
|
const hasSuccess = data && Reflect.has(data, 'code') && Number(code) === ResultEnum.SUCCESS;
|
||||||
|
if (hasSuccess) {
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
|
||||||
|
// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
|
||||||
|
let timeoutMsg = '';
|
||||||
|
if (Number(code) === ResultEnum.TIMEOUT) {
|
||||||
|
timeoutMsg = t('api.timeoutMessage');
|
||||||
|
} else if (message) {
|
||||||
|
timeoutMsg = message;
|
||||||
|
}
|
||||||
|
|
||||||
|
// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
|
||||||
|
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
|
||||||
|
if (options.errorMessageMode === 'modal') {
|
||||||
|
Modal.error({ title: t('api.errorTip'), content: timeoutMsg });
|
||||||
|
} else if (options.errorMessageMode === 'message') {
|
||||||
|
Message.error(timeoutMsg);
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error(timeoutMsg || t('api.apiRequestFailed'));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 请求拦截器处理
|
||||||
|
*/
|
||||||
|
requestInterceptors: (config, options) => {
|
||||||
|
// 请求之前处理config
|
||||||
|
const token = getToken();
|
||||||
|
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
|
||||||
|
// jwt token
|
||||||
|
(config as Recordable).headers.Authorization = options.authenticationScheme
|
||||||
|
? `${options.authenticationScheme} ${token}`
|
||||||
|
: token;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 响应拦截器处理
|
||||||
|
*/
|
||||||
|
responseInterceptors: (res: AxiosResponse<any>) => {
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 响应错误处理
|
||||||
|
*/
|
||||||
|
responseInterceptorsCatch: (error: any) => {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { response, code, message, config } = error || {};
|
||||||
|
const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
|
||||||
|
const msg: string = response?.data?.error?.message ?? '';
|
||||||
|
const err: string = error?.toString?.() ?? '';
|
||||||
|
let errMessage = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
|
||||||
|
errMessage = t('api.apiTimeoutMessage');
|
||||||
|
}
|
||||||
|
if (err?.includes('Network Error')) {
|
||||||
|
errMessage = t('api.networkExceptionMsg');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errMessage) {
|
||||||
|
if (errorMessageMode === 'modal') {
|
||||||
|
Modal.error({ title: t('api.errorTip'), content: errMessage });
|
||||||
|
} else if (errorMessageMode === 'message') {
|
||||||
|
Message.error(errMessage);
|
||||||
|
}
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
throw new Error(e as unknown as string);
|
||||||
|
}
|
||||||
|
|
||||||
|
checkStatus(error?.response?.status, msg, errorMessageMode);
|
||||||
|
return Promise.reject(error);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function createAxios(opt?: Partial<CreateAxiosOptions>) {
|
||||||
|
return new MSAxios(
|
||||||
|
deepMerge(
|
||||||
|
{
|
||||||
|
// See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
|
||||||
|
// authentication schemes，e.g: Bearer
|
||||||
|
// authenticationScheme: 'Bearer',
|
||||||
|
authenticationScheme: '',
|
||||||
|
timeout: 30 * 1000,
|
||||||
|
|
||||||
|
headers: { 'Content-Type': ContentTypeEnum.JSON },
|
||||||
|
// 如果是form-data格式
|
||||||
|
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
|
||||||
|
// 数据处理方式
|
||||||
|
transform,
|
||||||
|
// 配置项，下面的选项都可以在独立的接口请求中覆盖
|
||||||
|
requestOptions: {
|
||||||
|
// 默认将prefix 添加到url
|
||||||
|
joinPrefix: true,
|
||||||
|
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
||||||
|
isReturnNativeResponse: false,
|
||||||
|
// 需要对返回数据进行处理
|
||||||
|
isTransformResponse: true,
|
||||||
|
// post请求的时候添加参数到url
|
||||||
|
joinParamsToUrl: false,
|
||||||
|
// 格式化提交参数时间
|
||||||
|
formatDate: true,
|
||||||
|
// 消息提示类型
|
||||||
|
errorMessageMode: 'message',
|
||||||
|
// 是否加入时间戳
|
||||||
|
joinTime: true,
|
||||||
|
// 忽略重复请求
|
||||||
|
ignoreCancelToken: true,
|
||||||
|
// 是否携带token
|
||||||
|
withToken: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
opt || {}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const MSR = createAxios();
|
||||||
|
export default MSR;
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import MSR from '@/api/http/index';
|
||||||
|
import type { TableData } from '@arco-design/web-vue/es/table/interface';
|
||||||
|
|
||||||
|
export interface ContentDataRecord {
|
||||||
|
x: string;
|
||||||
|
y: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryContentData() {
|
||||||
|
return MSR.get<ContentDataRecord[]>({ url: '/api/content-data' });
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PopularRecord {
|
||||||
|
key: number;
|
||||||
|
clickNumber: string;
|
||||||
|
title: string;
|
||||||
|
increases: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryPopularList(params: { type: string }) {
|
||||||
|
return MSR.get<TableData[]>({ url: '/api/popular/list', params });
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import MSR from '@/api/http/index';
|
||||||
|
|
||||||
|
export interface MessageRecord {
|
||||||
|
id: number;
|
||||||
|
type: string;
|
||||||
|
title: string;
|
||||||
|
subTitle: string;
|
||||||
|
avatar?: string;
|
||||||
|
content: string;
|
||||||
|
time: string;
|
||||||
|
status: 0 | 1;
|
||||||
|
messageType?: number;
|
||||||
|
}
|
||||||
|
export type MessageListType = MessageRecord[];
|
||||||
|
|
||||||
|
export function queryMessageList() {
|
||||||
|
return MSR.post<MessageListType>({ url: '/api/message/list' });
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MessageStatus {
|
||||||
|
ids: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setMessageStatus(data: MessageStatus) {
|
||||||
|
return MSR.post<MessageListType>({ url: '/api/message/read', data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChatRecord {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
content: string;
|
||||||
|
time: string;
|
||||||
|
isCollect: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryChatList() {
|
||||||
|
return MSR.post<ChatRecord[]>({ url: '/api/chat/list' });
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import MSR from '@/api/http/index';
|
||||||
|
import { LoginUrl, LogoutUrl, GetUserInfoUrl, GetMenuListUrl } from '@/api/requrls/user';
|
||||||
|
import type { RouteRecordNormalized } from 'vue-router';
|
||||||
|
import type { LoginData, LoginRes } from '@/models/user';
|
||||||
|
import type { UserState } from '@/store/modules/user/types';
|
||||||
|
|
||||||
|
export function login(data: LoginData) {
|
||||||
|
return MSR.post<LoginRes>({ url: LoginUrl, data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logout() {
|
||||||
|
return MSR.post<LoginRes>({ url: LogoutUrl });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUserInfo() {
|
||||||
|
return MSR.post<UserState>({ url: GetUserInfoUrl });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMenuList() {
|
||||||
|
return MSR.post<RouteRecordNormalized[]>({ url: GetMenuListUrl });
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
export const LoginUrl = '/api/user/login';
|
||||||
|
export const LogoutUrl = '/api/user/logout';
|
||||||
|
export const GetUserInfoUrl = '/api/user/info';
|
||||||
|
export const GetMenuListUrl = '/api/user/menu';
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
// Extra small screen / phone
|
||||||
|
@screen-xs: 480px;
|
||||||
|
|
||||||
|
/* Small screen / tablet */
|
||||||
|
@screen-sm: 576px;
|
||||||
|
|
||||||
|
/* Medium screen / desktop */
|
||||||
|
@screen-md: 768px;
|
||||||
|
|
||||||
|
/* Large screen / wide desktop */
|
||||||
|
@screen-lg: 992px;
|
||||||
|
|
||||||
|
/* Extra large screen / full hd */
|
||||||
|
@screen-xl: 1200px;
|
||||||
|
|
||||||
|
/* Extra extra large screen / large desktop */
|
||||||
|
@screen-xxl: 1600px;
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: var(--color-bg-1);
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
.echarts-tooltip-diy {
|
||||||
|
border: none !important;
|
||||||
|
|
||||||
|
/* Note: backdrop-filter has minimal browser support */
|
||||||
|
|
||||||
|
border-radius: 6px !important;
|
||||||
|
background: linear-gradient(304.17deg, rgb(253 254 255 / 60%) -6.04%, rgb(244 247 252 / 60%) 85.2%) !important;
|
||||||
|
backdrop-filter: blur(10px) !important;
|
||||||
|
.content-panel {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
padding: 0 9px;
|
||||||
|
width: 164px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgb(255 255 255 / 80%);
|
||||||
|
box-shadow: 6px 0 20px rgb(34 87 188 / 10%);
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.tooltip-title {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.tooltip-title,
|
||||||
|
.tooltip-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
color: #1d2129;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
|
.tooltip-item-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.general-card {
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
& > .arco-card-header {
|
||||||
|
padding: 20px;
|
||||||
|
height: auto;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
& > .arco-card-body {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.split-line {
|
||||||
|
border-color: rgb(var(--gray-2));
|
||||||
|
}
|
||||||
|
.arco-table-cell {
|
||||||
|
.circle {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgb(var(--blue-6));
|
||||||
|
&.pass {
|
||||||
|
background-color: rgb(var(--green-6));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="947.2 183.1 174 35" style="enable-background:new 947.2 183.1 174 35;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#783887;}
|
||||||
|
.st1{fill:#622870;}
|
||||||
|
.st2{fill:#8B489B;}
|
||||||
|
.st3{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g id="XMLID_803_">
|
||||||
|
<path id="XMLID_829_" class="st0" d="M998.3,209.6l-1.1-11.2l-3.1,11.2h-3.6l-3-11.2l-1.1,11.2l-5,0l2.4-16.5h6.3l2.2,7.8l2.2-7.8
|
||||||
|
h6.2l2.5,16.5H998.3z"/>
|
||||||
|
<path id="XMLID_826_" class="st0" d="M1015.2,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
|
||||||
|
c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
|
||||||
|
c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
|
||||||
|
C1015.1,200.7,1015.2,201.6,1015.2,202.7z M1011.8,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
|
||||||
|
l-0.1,0.6h3.1V202.1z"/>
|
||||||
|
<path id="XMLID_823_" class="st0" d="M1037.3,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
|
||||||
|
c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
|
||||||
|
c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
|
||||||
|
C1037.2,200.7,1037.3,201.6,1037.3,202.7z M1033.9,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
|
||||||
|
l-0.1,0.6h3.1V202.1L1033.9,202.1z"/>
|
||||||
|
<path id="XMLID_820_" class="st0" d="M1098.2,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
|
||||||
|
c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
|
||||||
|
c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
|
||||||
|
C1098.1,200.7,1098.2,201.6,1098.2,202.7z M1094.8,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
|
||||||
|
l-0.1,0.6h3.1V202.1z"/>
|
||||||
|
<path id="XMLID_817_" class="st0" d="M1120.3,202.7v2.1h-6.5l0,0.4c0,0.8,0.3,1.3,0.8,1.4c0.4,0.1,0.8,0.2,1.3,0.2h0.3
|
||||||
|
c1.3,0,3.1-0.3,4.5-0.6h0l-0.5,2.9c0,0-0.6,0.3-1.8,0.5c-0.8,0.1-1.6,0.1-2.6,0.1c-2.6,0-4.2-0.9-4.9-2.6
|
||||||
|
c-0.3-0.7-0.5-1.4-0.5-2.2v-2.8c0-2.1,1-3.4,2.7-4.1c0.8-0.3,1.6-0.4,2.4-0.4c2.4,0,4,0.8,4.7,2.4
|
||||||
|
C1120.2,200.7,1120.3,201.6,1120.3,202.7z M1116.9,202.1c0-0.8-0.2-1.4-0.6-1.5c-0.3-0.2-0.7-0.2-1-0.2c-1,0-1.4,0.5-1.4,1.4
|
||||||
|
l-0.1,0.6h3.1V202.1z"/>
|
||||||
|
<path id="XMLID_815_" class="st0" d="M1025.7,209.6h-2.1c-0.4,0-0.7,0-0.9,0c-0.7-0.1-1.3-0.2-1.7-0.4c-0.5-0.3-1-0.7-1.2-1.2
|
||||||
|
c-0.3-0.6-0.5-1.4-0.5-2.5l0-4.6h-1.7v-3h1.7v-2.3l1.7,0l1.8-0.2v2.6h2.7l-0.4,3h-2.3v4.4c0,0.1,0,0.2,0,0.3c0,0.2,0,0.3,0.1,0.5
|
||||||
|
c0.1,0.3,0.3,0.5,0.7,0.6c0.3,0.1,1.9,0.1,1.9,0.1L1025.7,209.6z"/>
|
||||||
|
<path id="XMLID_813_" class="st0" d="M1047.7,197.9l-0.1,2.8c-0.3,0-1.2,0-2.1,0.2c-0.8,0.2-1.7,0.6-2.1,0.8v8h-3.5v-11.8h3.3
|
||||||
|
c0,0-0.1,0.6,0,0.9l0.8-0.3c0.5-0.2,1-0.3,1.7-0.4C1046.7,197.8,1047.3,197.9,1047.7,197.9z"/>
|
||||||
|
<path id="XMLID_811_" class="st0" d="M1108.9,197.9l-0.1,2.8c-0.3,0-1.2,0-2.1,0.2c-0.8,0.2-1.7,0.6-2.1,0.8v8h-3.5v-11.8h3.3
|
||||||
|
c0,0-0.1,0.6,0,0.9l0.8-0.3c0.5-0.2,1-0.3,1.7-0.4C1107.9,197.8,1108.5,197.9,1108.9,197.9z"/>
|
||||||
|
<path id="XMLID_809_" class="st0" d="M1054.6,210.1c-0.8,0-1.8-0.1-2.7-0.2c-0.4,0-0.8-0.1-1.2-0.2l-1.6-0.2l0-4.1l2.4,0.4
|
||||||
|
c0,0,1,0.1,1.4,0.2c0.5,0.1,1,0.1,1.4,0.1c1.5,0,2.4-0.4,2.7-1.1c0.1-0.3,0.1-0.6,0-0.9c-0.2-0.3-0.5-0.6-0.9-0.8
|
||||||
|
c-0.2-0.1-0.5-0.2-0.8-0.3l-0.9-0.3c-0.4-0.1-0.8-0.2-1.1-0.3c-0.4-0.1-0.8-0.3-1.1-0.4c-0.8-0.4-1.5-0.8-2-1.3
|
||||||
|
c-0.4-0.5-0.7-1.1-0.9-1.8c-0.1-0.5-0.1-1.1,0-1.7c0.2-1.8,1-3.1,2.3-3.8c0.5-0.3,1.1-0.5,1.8-0.6c0.3,0,0.6-0.1,0.9-0.1l0.9-0.1
|
||||||
|
h0.6c0.7,0,1.5,0,2.3,0.1l1,0.1l1.2,0.2l0,3.6c-0.5-0.1-1-0.2-1.7-0.3c-0.9-0.1-1.7-0.2-2.4-0.2c-1.6,0-2.2,0.3-2.5,1.1
|
||||||
|
c-0.1,0.3-0.1,0.6-0.1,0.9c0,0.4,0,0.5,0.7,0.8c0.2,0.1,0.5,0.2,0.8,0.3l2.1,0.6c0.4,0.1,0.8,0.3,1.1,0.4c0.8,0.3,1.4,0.7,1.8,1.1
|
||||||
|
c0.5,0.5,0.8,1.1,0.9,1.8c0.1,0.5,0.1,1.1,0,1.7c-0.2,1.8-1.1,3.4-2.4,4.1c-0.5,0.3-1.1,0.5-1.8,0.6c-0.3,0-0.6,0.1-0.9,0.1
|
||||||
|
l-0.8,0.1L1054.6,210.1L1054.6,210.1z"/>
|
||||||
|
<path id="XMLID_806_" class="st0" d="M1063.6,197.8h3.2l-0.1,0.8c0.3-0.2,0.6-0.3,1-0.4c0.4-0.2,0.8-0.3,1.1-0.3
|
||||||
|
c0.9-0.2,1.8-0.2,2.7,0.1c0.5,0.2,1,0.5,1.4,1c0.2,0.2,0.3,0.4,0.4,0.6l0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0.2,0.4,0.3,0.9,0.4,1.4
|
||||||
|
c0.1,0.6,0.2,1.3,0.2,2.2v0.7c0,1.8-0.1,2.7-0.4,3.4c-0.5,1.1-1.6,1.6-3.7,1.7c-0.3,0-0.7,0-1.2,0l-0.8,0c-0.3,0-0.5,0-0.7,0v5.1
|
||||||
|
l-3.6,0.2V197.8L1063.6,197.8z M1067.2,206.1c0.7,0.1,1.1,0.1,1.7,0.1l0.6-0.1c0.7-0.2,1-0.6,1-1.3v-2.3c0-0.3,0-0.6-0.1-0.7
|
||||||
|
c-0.2-0.7-0.8-1-1.8-0.9l-0.4,0.1l-0.7,0.2l-0.3,0.1L1067.2,206.1L1067.2,206.1z"/>
|
||||||
|
<path id="XMLID_804_" class="st0" d="M1086.5,203.2v6.4h-3.6v-7c0-0.4-0.3-1.1-0.8-1.4c-0.4-0.2-1-0.2-1.2-0.1
|
||||||
|
c-0.5,0.1-1,0.4-1.3,0.6v7.9h-3.6v-17l3.6,0v6c0.4-0.2,0.9-0.3,1.4-0.4c0.4-0.1,0.8-0.1,1.2-0.1c2.1,0,3.2,0.6,3.7,1.7
|
||||||
|
C1086.2,200.2,1086.5,201.4,1086.5,203.2z"/>
|
||||||
|
</g>
|
||||||
|
<g id="XMLID_799_">
|
||||||
|
<path id="XMLID_800_" class="st0" d="M961.7,184.4l13.7,8v16.1l-13.7,8l-13.7-8v-16.1L961.7,184.4 M961.7,183.9l-14.1,8.3v16.5
|
||||||
|
l14.1,8.3l14.1-8.3v-16.5L961.7,183.9L961.7,183.9z"/>
|
||||||
|
</g>
|
||||||
|
<g id="XMLID_796_">
|
||||||
|
<polygon id="XMLID_64_" class="st1" points="961.9,200.6 973.8,193.6 973.8,207.5 961.9,214.5 "/>
|
||||||
|
</g>
|
||||||
|
<polygon id="XMLID_795_" class="st2" points="949.8,193.2 961.7,186.3 973.6,193.2 961.7,200.2 "/>
|
||||||
|
<g id="XMLID_792_">
|
||||||
|
<polygon id="XMLID_65_" class="st0" points="949.6,207.5 949.6,193.6 961.5,200.6 961.5,214.5 "/>
|
||||||
|
</g>
|
||||||
|
<g id="XMLID_789_">
|
||||||
|
<path id="XMLID_790_" class="st3" d="M957.8,209.4v-4.9l-1.8,3.9l-1.5-0.9l-0.8-5.4l-0.9,4.3l-2.1-1.3l1.7-6.2l2.6,1.6l0.6,3.8
|
||||||
|
l1.2-2.7l2.6,1.5l0.4,7.5L957.8,209.4z"/>
|
||||||
|
</g>
|
||||||
|
<g id="XMLID_786_">
|
||||||
|
<path id="XMLID_787_" class="st3" d="M968,209.1c-0.4,0.2-0.9,0.3-1.4,0.5c-0.2,0.1-0.4,0.1-0.6,0.2l-0.8,0.2l0-2l1.2-0.3
|
||||||
|
c0,0,0.5-0.1,0.7-0.2c0.3-0.1,0.5-0.2,0.7-0.3c0.8-0.3,1.2-0.7,1.3-1.1c0.1-0.2,0.1-0.3,0-0.4c-0.1-0.1-0.2-0.2-0.5-0.2
|
||||||
|
c-0.1,0-0.2,0-0.4,0l-0.5,0c-0.2,0-0.4,0.1-0.5,0.1c-0.2,0-0.4,0-0.6,0c-0.4,0-0.8-0.1-1-0.2c-0.2-0.1-0.4-0.4-0.5-0.7
|
||||||
|
c-0.1-0.2-0.1-0.5,0-0.8c0.1-0.9,0.4-1.7,1.1-2.3c0.3-0.2,0.5-0.5,0.9-0.7c0.1-0.1,0.3-0.2,0.5-0.2l0.5-0.2l0.3-0.1
|
||||||
|
c0.4-0.1,0.7-0.3,1.2-0.4l0.5-0.2l0.6-0.2l0.1,1.8c-0.2,0-0.5,0.1-0.9,0.2c-0.4,0.1-0.9,0.3-1.2,0.4c-0.8,0.3-1.1,0.6-1.2,1
|
||||||
|
c0,0.2,0,0.3,0,0.5c0,0.2,0,0.2,0.4,0.3c0.1,0,0.3,0,0.4,0l1.1-0.1c0.2,0,0.4,0,0.5,0c0.4,0,0.7,0.1,0.9,0.2
|
||||||
|
c0.2,0.1,0.4,0.4,0.5,0.7c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.9-0.5,1.9-1.1,2.5c-0.2,0.2-0.5,0.5-0.9,0.7c-0.1,0.1-0.3,0.2-0.5,0.2
|
||||||
|
l-0.4,0.2L968,209.1z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,111 @@
|
||||||
|
<template>
|
||||||
|
<v-ace-editor
|
||||||
|
:value="currentValue"
|
||||||
|
:lang="props.lang"
|
||||||
|
:theme="props.theme"
|
||||||
|
:style="{ height: props.height, width: props.width }"
|
||||||
|
@init="editorInit"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, PropType, ref, onUnmounted, watch } from 'vue';
|
||||||
|
import { VAceEditor } from 'vue3-ace-editor';
|
||||||
|
import ace from 'ace-builds';
|
||||||
|
import workerJavascriptUrl from 'ace-builds/src-min-noconflict/worker-javascript?url';
|
||||||
|
import workerJsonUrl from 'ace-builds/src-min-noconflict/worker-json?url';
|
||||||
|
import workerHtmlUrl from 'ace-builds/src-min-noconflict/worker-html?url';
|
||||||
|
import workerXmlUrl from 'ace-builds/src-min-noconflict/worker-xml?url';
|
||||||
|
import 'ace-builds/src-min-noconflict/ext-language_tools';
|
||||||
|
import 'ace-builds/src-min-noconflict/ext-beautify';
|
||||||
|
import 'ace-builds/src-min-noconflict/theme-github_dark';
|
||||||
|
import 'ace-builds/src-min-noconflict/theme-github';
|
||||||
|
import 'ace-builds/src-min-noconflict/theme-chrome';
|
||||||
|
import 'ace-builds/src-min-noconflict/mode-javascript';
|
||||||
|
import 'ace-builds/src-min-noconflict/mode-html';
|
||||||
|
import 'ace-builds/src-min-noconflict/mode-xml';
|
||||||
|
import 'ace-builds/src-min-noconflict/mode-json';
|
||||||
|
import 'ace-builds/src-min-noconflict/mode-java';
|
||||||
|
|
||||||
|
export type LangType = 'javascript' | 'html' | 'xml' | 'json' | 'java' | 'text';
|
||||||
|
export type ThemeType = 'github_dark' | 'github' | 'chrome';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
init: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
lang: {
|
||||||
|
type: String as PropType<LangType>,
|
||||||
|
default: 'javascript',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
type: String as PropType<ThemeType>,
|
||||||
|
default: 'github_dark',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '500px',
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:content']);
|
||||||
|
const editorInstance = ref<any>(null);
|
||||||
|
|
||||||
|
const currentValue = computed({
|
||||||
|
get() {
|
||||||
|
return props.content;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emit('update:content', val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onLangChange = () => {
|
||||||
|
let useWorker = true;
|
||||||
|
if (props.lang === 'javascript') {
|
||||||
|
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
|
||||||
|
} else if (props.lang === 'json') {
|
||||||
|
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
|
||||||
|
} else if (props.lang === 'xml') {
|
||||||
|
ace.config.setModuleUrl('ace/mode/xml_worker', workerXmlUrl);
|
||||||
|
} else if (props.lang === 'html') {
|
||||||
|
ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl);
|
||||||
|
} else {
|
||||||
|
useWorker = false;
|
||||||
|
}
|
||||||
|
return useWorker;
|
||||||
|
};
|
||||||
|
|
||||||
|
const editorInit = (editor: any) => {
|
||||||
|
if (props.init) props.init(editor);
|
||||||
|
editorInstance.value = editor;
|
||||||
|
const useWorker = onLangChange();
|
||||||
|
editor.setOptions({
|
||||||
|
enableBasicAutocompletion: true,
|
||||||
|
enableSnippets: false,
|
||||||
|
enableLiveAutocompletion: true,
|
||||||
|
wrap: true,
|
||||||
|
useWorker,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.lang,
|
||||||
|
() => {
|
||||||
|
onLangChange();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
editorInstance.value.destroy();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<a-breadcrumb class="container-breadcrumb">
|
||||||
|
<a-breadcrumb-item>
|
||||||
|
<icon-apps />
|
||||||
|
</a-breadcrumb-item>
|
||||||
|
<a-breadcrumb-item v-for="item in items" :key="item">
|
||||||
|
{{ $t(item) }}
|
||||||
|
</a-breadcrumb-item>
|
||||||
|
</a-breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
items: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container-breadcrumb {
|
||||||
|
margin: 16px 0;
|
||||||
|
:deep(.arco-breadcrumb-item) {
|
||||||
|
color: rgb(var(--gray-6));
|
||||||
|
&:last-child {
|
||||||
|
color: rgb(var(--gray-8));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<VCharts v-if="renderChart" :option="options" :autoresize="autoResize" :style="{ width, height }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, nextTick } from 'vue';
|
||||||
|
import VCharts from 'vue-echarts';
|
||||||
|
// import { useAppStore } from '@/store';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
autoResize: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// const appStore = useAppStore();
|
||||||
|
// const theme = computed(() => {
|
||||||
|
// if (appStore.theme === 'dark') return 'dark';
|
||||||
|
// return '';
|
||||||
|
// });
|
||||||
|
const renderChart = ref(false);
|
||||||
|
// wait container expand
|
||||||
|
nextTick(() => {
|
||||||
|
renderChart.value = true;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<form-create v-model="value" v-model:api="fApi" :rule="rule" :option="option"></form-create>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
|
||||||
|
const value = ref({});
|
||||||
|
const fApi = ref({});
|
||||||
|
const rule = reactive([
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
field: 'goods_name',
|
||||||
|
title: '商品名称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
field: 'created_at',
|
||||||
|
title: '创建时间',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const option = {
|
||||||
|
onSubmit(formData: any) {
|
||||||
|
// eslint-disable-next-line no-alert
|
||||||
|
alert(JSON.stringify(formData));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
import { describe, expect, test } from 'vitest';
|
||||||
|
import Footer from './index.vue';
|
||||||
|
|
||||||
|
describe('Footer', () => {
|
||||||
|
test('mount @vue/test-utils', () => {
|
||||||
|
const wrapper = shallowMount(Footer, {
|
||||||
|
slots: {
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.text()).toBe('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<a-layout-footer class="footer">MeterSphere</a-layout-footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup></script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--color-text-2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div class="block">
|
||||||
|
<h5 class="title">{{ title }}</h5>
|
||||||
|
<div v-for="option in options" :key="option.name" class="switch-wrapper">
|
||||||
|
<span>{{ $t(option.name) }}</span>
|
||||||
|
<form-wrapper
|
||||||
|
:type="option.type || 'switch'"
|
||||||
|
:name="option.key"
|
||||||
|
:default-value="option.defaultVal"
|
||||||
|
@input-change="handleChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
import { useAppStore } from '@/store';
|
||||||
|
import FormWrapper from './form-wrapper.vue';
|
||||||
|
|
||||||
|
interface OptionsProps {
|
||||||
|
name: string;
|
||||||
|
key: string;
|
||||||
|
type?: string;
|
||||||
|
defaultVal?: boolean | string | number;
|
||||||
|
}
|
||||||
|
defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array as PropType<OptionsProps[]>,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const handleChange = async ({ key, value }: { key: string; value: unknown }) => {
|
||||||
|
if (key === 'colorWeak') {
|
||||||
|
document.body.style.filter = value ? 'invert(80%)' : 'none';
|
||||||
|
}
|
||||||
|
if (key === 'topMenu') {
|
||||||
|
appStore.updateSettings({
|
||||||
|
menuCollapse: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
appStore.updateSettings({ [key]: value });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.block {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.switch-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<a-input-number
|
||||||
|
v-if="type === 'number'"
|
||||||
|
:style="{ width: '80px' }"
|
||||||
|
size="small"
|
||||||
|
:default-value="(defaultValue as number)"
|
||||||
|
@change="handleChange"
|
||||||
|
/>
|
||||||
|
<a-switch v-else :default-checked="(defaultValue as boolean)" size="small" @change="handleChange" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
defaultValue: {
|
||||||
|
type: [String, Boolean, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['inputChange']);
|
||||||
|
const handleChange = (value: unknown) => {
|
||||||
|
emit('inputChange', {
|
||||||
|
value,
|
||||||
|
key: props.name,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="!appStore.navbar" class="fixed-settings" @click="setVisible">
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<icon-settings />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<a-drawer
|
||||||
|
:width="300"
|
||||||
|
unmount-on-close
|
||||||
|
:visible="visible"
|
||||||
|
:cancel-text="$t('settings.close')"
|
||||||
|
:ok-text="$t('settings.copySettings')"
|
||||||
|
@ok="copySettings"
|
||||||
|
@cancel="cancel"
|
||||||
|
>
|
||||||
|
<template #title> {{ $t('settings.title') }} </template>
|
||||||
|
<Block :options="contentOpts" :title="$t('settings.content')" />
|
||||||
|
<Block :options="othersOpts" :title="$t('settings.otherSettings')" />
|
||||||
|
<a-alert>{{ $t('settings.alertContent') }}</a-alert>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { useClipboard } from '@vueuse/core';
|
||||||
|
import { useAppStore } from '@/store';
|
||||||
|
import Block from './block.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['cancel']);
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const { copy } = useClipboard();
|
||||||
|
const visible = computed(() => appStore.globalSettings);
|
||||||
|
const contentOpts = computed(() => [
|
||||||
|
{ name: 'settings.navbar', key: 'navbar', defaultVal: appStore.navbar },
|
||||||
|
{
|
||||||
|
name: 'settings.menu',
|
||||||
|
key: 'menu',
|
||||||
|
defaultVal: appStore.menu,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'settings.topMenu',
|
||||||
|
key: 'topMenu',
|
||||||
|
defaultVal: appStore.topMenu,
|
||||||
|
},
|
||||||
|
{ name: 'settings.footer', key: 'footer', defaultVal: appStore.footer },
|
||||||
|
{ name: 'settings.tabBar', key: 'tabBar', defaultVal: appStore.tabBar },
|
||||||
|
{
|
||||||
|
name: 'settings.menuWidth',
|
||||||
|
key: 'menuWidth',
|
||||||
|
defaultVal: appStore.menuWidth,
|
||||||
|
type: 'number',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
const othersOpts = computed(() => [
|
||||||
|
{
|
||||||
|
name: 'settings.colorWeak',
|
||||||
|
key: 'colorWeak',
|
||||||
|
defaultVal: appStore.colorWeak,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const cancel = () => {
|
||||||
|
appStore.updateSettings({ globalSettings: false });
|
||||||
|
emit('cancel');
|
||||||
|
};
|
||||||
|
const copySettings = async () => {
|
||||||
|
const text = JSON.stringify(appStore.$state, null, 2);
|
||||||
|
await copy(text);
|
||||||
|
Message.success(t('settings.copySettings.message'));
|
||||||
|
};
|
||||||
|
const setVisible = () => {
|
||||||
|
appStore.updateSettings({ globalSettings: true });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.fixed-settings {
|
||||||
|
position: fixed;
|
||||||
|
top: 280px;
|
||||||
|
right: 0;
|
||||||
|
svg {
|
||||||
|
font-size: 18px;
|
||||||
|
vertical-align: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { App } from 'vue';
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
DataZoomComponent,
|
||||||
|
GraphicComponent,
|
||||||
|
} from 'echarts/components';
|
||||||
|
import Chart from './chart/index.vue';
|
||||||
|
import Breadcrumb from './breadcrumb/index.vue';
|
||||||
|
|
||||||
|
// Manually introduce ECharts modules to reduce packing size
|
||||||
|
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
LineChart,
|
||||||
|
PieChart,
|
||||||
|
RadarChart,
|
||||||
|
GridComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
DataZoomComponent,
|
||||||
|
GraphicComponent,
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install(Vue: App) {
|
||||||
|
Vue.component('Chart', Chart);
|
||||||
|
Vue.component('Breadcrumb', Breadcrumb);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<pre ref="jr" :class="props.class" @click="pickPath"></pre>
|
||||||
|
<input ref="ip" :value="jsonPath" class="path" type="hidden" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref, onUnmounted, Ref } from 'vue';
|
||||||
|
import JPPicker from 'jsonpath-picker-vanilla';
|
||||||
|
import { Recordable } from '#/global';
|
||||||
|
|
||||||
|
const jr: Ref<HTMLElement | null> = ref(null);
|
||||||
|
const ip: Ref<HTMLInputElement | null> = ref(null);
|
||||||
|
const jsonPath = ref('');
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
data: object;
|
||||||
|
opt?: Recordable<any>;
|
||||||
|
class?: string;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
data: () => ({
|
||||||
|
name1: 'val1',
|
||||||
|
name2: {
|
||||||
|
name3: 'val2',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
opt: () => ({}),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'pick', path: string): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
JPPicker.jsonPathPicker(jr.value, props.data, [ip.value], props.opt);
|
||||||
|
});
|
||||||
|
|
||||||
|
function pickPath(ev: any) {
|
||||||
|
if (ev.target && ev.target.classList.contains('pick-path')) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (ip.value) {
|
||||||
|
jsonPath.value = ip.value.value;
|
||||||
|
emit('pick', jsonPath.value);
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
JPPicker.clearJsonPathPicker(jr.value);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="css">
|
||||||
|
@import url('jsonpath-picker-vanilla/lib/jsonpath-picker.css');
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
<script lang="tsx">
|
||||||
|
import { defineComponent, ref, h, compile, computed } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { useRoute, useRouter, RouteRecordRaw } from 'vue-router';
|
||||||
|
import type { RouteMeta } from 'vue-router';
|
||||||
|
import { useAppStore } from '@/store';
|
||||||
|
import { listenerRouteChange } from '@/utils/route-listener';
|
||||||
|
import { openWindow, regexUrl } from '@/utils';
|
||||||
|
import useMenuTree from './use-menu-tree';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
emit: ['collapse'],
|
||||||
|
setup() {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const { menuTree } = useMenuTree();
|
||||||
|
const collapsed = computed({
|
||||||
|
get() {
|
||||||
|
if (appStore.device === 'desktop') return appStore.menuCollapse;
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
set(value: boolean) {
|
||||||
|
appStore.updateSettings({ menuCollapse: value });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const topMenu = computed(() => appStore.topMenu);
|
||||||
|
const openKeys = ref<string[]>([]);
|
||||||
|
const selectedKey = ref<string[]>([]);
|
||||||
|
|
||||||
|
const goto = (item: RouteRecordRaw) => {
|
||||||
|
// Open external link
|
||||||
|
if (regexUrl.test(item.path)) {
|
||||||
|
openWindow(item.path);
|
||||||
|
selectedKey.value = [item.name as string];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Eliminate external link side effects
|
||||||
|
const { hideInMenu, activeMenu } = item.meta as RouteMeta;
|
||||||
|
if (route.name === item.name && !hideInMenu && !activeMenu) {
|
||||||
|
selectedKey.value = [item.name as string];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Trigger router change
|
||||||
|
router.push({
|
||||||
|
name: item.name,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const findMenuOpenKeys = (target: string) => {
|
||||||
|
const result: string[] = [];
|
||||||
|
let isFind = false;
|
||||||
|
const backtrack = (item: RouteRecordRaw, keys: string[]) => {
|
||||||
|
if (item.name === target) {
|
||||||
|
isFind = true;
|
||||||
|
result.push(...keys);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (item.children?.length) {
|
||||||
|
item.children.forEach((el) => {
|
||||||
|
backtrack(el, [...keys, el.name as string]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
menuTree.value.forEach((el: RouteRecordRaw) => {
|
||||||
|
if (isFind) return; // Performance optimization
|
||||||
|
backtrack(el, [el.name as string]);
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
listenerRouteChange((newRoute) => {
|
||||||
|
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
|
||||||
|
if (requiresAuth !== false && (!hideInMenu || activeMenu)) {
|
||||||
|
const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
|
||||||
|
|
||||||
|
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
|
||||||
|
openKeys.value = [...keySet];
|
||||||
|
|
||||||
|
selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]];
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
const setCollapse = (val: boolean) => {
|
||||||
|
if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val });
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderSubMenu = () => {
|
||||||
|
function travel(_route: RouteRecordRaw[], nodes = []) {
|
||||||
|
if (_route) {
|
||||||
|
_route.forEach((element) => {
|
||||||
|
// This is demo, modify nodes as needed
|
||||||
|
const icon = element?.meta?.icon ? () => h(compile(`<${element?.meta?.icon}/>`)) : null;
|
||||||
|
const node =
|
||||||
|
element?.children && element?.children.length !== 0 ? (
|
||||||
|
<a-sub-menu
|
||||||
|
key={element?.name}
|
||||||
|
v-slots={{
|
||||||
|
icon,
|
||||||
|
title: () => h(compile(t(element?.meta?.locale || ''))),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{travel(element?.children)}
|
||||||
|
</a-sub-menu>
|
||||||
|
) : (
|
||||||
|
<a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
|
||||||
|
{t(element?.meta?.locale || '')}
|
||||||
|
</a-menu-item>
|
||||||
|
);
|
||||||
|
nodes.push(node as never);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return nodes;
|
||||||
|
}
|
||||||
|
return travel(menuTree.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<a-menu
|
||||||
|
mode={topMenu.value ? 'horizontal' : 'vertical'}
|
||||||
|
v-model:collapsed={collapsed.value}
|
||||||
|
v-model:open-keys={openKeys.value}
|
||||||
|
show-collapse-button={appStore.device !== 'mobile'}
|
||||||
|
auto-open={false}
|
||||||
|
selected-keys={selectedKey.value}
|
||||||
|
auto-open-selected={true}
|
||||||
|
level-indent={34}
|
||||||
|
style="height: 100%;width:100%;"
|
||||||
|
onCollapse={setCollapse}
|
||||||
|
>
|
||||||
|
{renderSubMenu()}
|
||||||
|
</a-menu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
:deep(.arco-menu-inner) {
|
||||||
|
.arco-menu-inline-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.arco-icon {
|
||||||
|
&:not(.arco-icon-down) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
|
||||||
|
import usePermission from '@/hooks/usePermission';
|
||||||
|
import appClientMenus from '@/router/app-menus';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
export default function useMenuTree() {
|
||||||
|
const permission = usePermission();
|
||||||
|
const menuTree = computed(() => {
|
||||||
|
const copyRouter = cloneDeep(appClientMenus) as RouteRecordNormalized[];
|
||||||
|
copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
|
||||||
|
return (a.meta.order || 0) - (b.meta.order || 0);
|
||||||
|
});
|
||||||
|
function travel(_routes: RouteRecordRaw[], layer: number) {
|
||||||
|
if (!_routes) return null;
|
||||||
|
|
||||||
|
const collector: any = _routes.map((element) => {
|
||||||
|
// 权限校验不通过
|
||||||
|
if (!permission.accessRouter(element)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 叶子菜单
|
||||||
|
if (element.meta?.hideChildrenInMenu || !element.children) {
|
||||||
|
element.children = [];
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤隐藏的菜单
|
||||||
|
element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
|
||||||
|
|
||||||
|
// 解析子菜单
|
||||||
|
const subItem = travel(element.children, layer + 1);
|
||||||
|
|
||||||
|
if (subItem.length) {
|
||||||
|
element.children = subItem;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
// the else logic
|
||||||
|
if (layer > 1) {
|
||||||
|
element.children = subItem;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.meta?.hideInMenu === false) {
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
return collector.filter(Boolean);
|
||||||
|
}
|
||||||
|
return travel(copyRouter, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
menuTree,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<template>
|
||||||
|
<a-spin style="display: block" :loading="loading">
|
||||||
|
<a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
|
||||||
|
<a-tab-pane v-for="item in tabList" :key="item.key">
|
||||||
|
<template #title>
|
||||||
|
<span> {{ item.title }}{{ formatUnreadLength(item.key) }} </span>
|
||||||
|
</template>
|
||||||
|
<a-result v-if="!renderList.length" status="404">
|
||||||
|
<template #subtitle> {{ $t('messageBox.noContent') }} </template>
|
||||||
|
</a-result>
|
||||||
|
<List :render-list="renderList" :unread-count="unreadCount" @item-click="handleItemClick" />
|
||||||
|
</a-tab-pane>
|
||||||
|
<template #extra>
|
||||||
|
<a-button type="text" @click="emptyList">
|
||||||
|
{{ $t('messageBox.tab.button') }}
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</a-tabs>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, toRefs, computed } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { queryMessageList, setMessageStatus, MessageRecord, MessageListType } from '@/api/modules/message';
|
||||||
|
import useLoading from '@/hooks/useLoading';
|
||||||
|
import List from './list.vue';
|
||||||
|
|
||||||
|
interface TabItem {
|
||||||
|
key: string;
|
||||||
|
title: string;
|
||||||
|
avatar?: string;
|
||||||
|
}
|
||||||
|
const { loading, setLoading } = useLoading(true);
|
||||||
|
const messageType = ref('message');
|
||||||
|
const { t } = useI18n();
|
||||||
|
const messageData = reactive<{
|
||||||
|
renderList: MessageRecord[];
|
||||||
|
messageList: MessageRecord[];
|
||||||
|
}>({
|
||||||
|
renderList: [],
|
||||||
|
messageList: [],
|
||||||
|
});
|
||||||
|
toRefs(messageData);
|
||||||
|
const tabList: TabItem[] = [
|
||||||
|
{
|
||||||
|
key: 'message',
|
||||||
|
title: t('messageBox.tab.title.message'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'notice',
|
||||||
|
title: t('messageBox.tab.title.notice'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'todo',
|
||||||
|
title: t('messageBox.tab.title.todo'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
async function fetchSourceData() {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await queryMessageList();
|
||||||
|
messageData.messageList = data;
|
||||||
|
} catch (err) {
|
||||||
|
// you can report use errorHandler or other
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function readMessage(data: MessageListType) {
|
||||||
|
const ids = data.map((item) => item.id);
|
||||||
|
await setMessageStatus({ ids });
|
||||||
|
fetchSourceData();
|
||||||
|
}
|
||||||
|
const renderList = computed(() => {
|
||||||
|
return messageData.messageList.filter((item) => messageType.value === item.type);
|
||||||
|
});
|
||||||
|
const unreadCount = computed(() => {
|
||||||
|
return renderList.value.filter((item) => !item.status).length;
|
||||||
|
});
|
||||||
|
const getUnreadList = (type: string) => {
|
||||||
|
const list = messageData.messageList.filter((item) => item.type === type && !item.status);
|
||||||
|
return list;
|
||||||
|
};
|
||||||
|
const formatUnreadLength = (type: string) => {
|
||||||
|
const list = getUnreadList(type);
|
||||||
|
return list.length ? `(${list.length})` : ``;
|
||||||
|
};
|
||||||
|
const handleItemClick = (items: MessageListType) => {
|
||||||
|
if (renderList.value.length) readMessage([...items]);
|
||||||
|
};
|
||||||
|
const emptyList = () => {
|
||||||
|
messageData.messageList = [];
|
||||||
|
};
|
||||||
|
fetchSourceData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
:deep(.arco-popover-popup-content) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
:deep(.arco-list-item-meta) {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
:deep(.arco-tabs-nav) {
|
||||||
|
padding: 14px 0 12px 16px;
|
||||||
|
border-bottom: 1px solid var(--color-neutral-3);
|
||||||
|
}
|
||||||
|
:deep(.arco-tabs-content) {
|
||||||
|
padding-top: 0;
|
||||||
|
.arco-result-subtitle {
|
||||||
|
color: rgb(var(--gray-6));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
<template>
|
||||||
|
<a-list :bordered="false">
|
||||||
|
<a-list-item
|
||||||
|
v-for="item in renderList"
|
||||||
|
:key="item.id"
|
||||||
|
action-layout="vertical"
|
||||||
|
:style="{
|
||||||
|
opacity: item.status ? 0.5 : 1,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<a-tag v-if="item.messageType === 0" color="gray">未开始</a-tag>
|
||||||
|
<a-tag v-else-if="item.messageType === 1" color="green">已开通</a-tag>
|
||||||
|
<a-tag v-else-if="item.messageType === 2" color="blue">进行中</a-tag>
|
||||||
|
<a-tag v-else-if="item.messageType === 3" color="red">即将到期</a-tag>
|
||||||
|
</template>
|
||||||
|
<div class="item-wrap" @click="onItemClick(item)">
|
||||||
|
<a-list-item-meta>
|
||||||
|
<template v-if="item.avatar" #avatar>
|
||||||
|
<a-avatar shape="circle">
|
||||||
|
<img v-if="item.avatar" :src="item.avatar" alt="avatar" />
|
||||||
|
<icon-desktop v-else />
|
||||||
|
</a-avatar>
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
<a-space :size="4">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
<a-typography-text type="secondary">
|
||||||
|
{{ item.subTitle }}
|
||||||
|
</a-typography-text>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
<template #description>
|
||||||
|
<div>
|
||||||
|
<a-typography-paragraph
|
||||||
|
:ellipsis="{
|
||||||
|
rows: 1,
|
||||||
|
}"
|
||||||
|
>{{ item.content }}</a-typography-paragraph
|
||||||
|
>
|
||||||
|
<a-typography-text v-if="item.type === 'message'" class="time-text">
|
||||||
|
{{ item.time }}
|
||||||
|
</a-typography-text>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</div>
|
||||||
|
</a-list-item>
|
||||||
|
<template #footer>
|
||||||
|
<a-space fill :size="0" :class="{ 'add-border-top': renderList.length < showMax }">
|
||||||
|
<div class="footer-wrap">
|
||||||
|
<a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
|
||||||
|
</div>
|
||||||
|
<div class="footer-wrap">
|
||||||
|
<a-link>{{ $t('messageBox.viewMore') }}</a-link>
|
||||||
|
</div>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
v-if="renderList.length && renderList.length < 3"
|
||||||
|
:style="{ height: (showMax - renderList.length) * 86 + 'px' }"
|
||||||
|
></div>
|
||||||
|
</a-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
import { MessageRecord, MessageListType } from '@/api/modules/message';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
renderList: {
|
||||||
|
type: Array as PropType<MessageListType>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
unreadCount: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['itemClick']);
|
||||||
|
const allRead = () => {
|
||||||
|
emit('itemClick', [...props.renderList]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onItemClick = (item: MessageRecord) => {
|
||||||
|
if (!item.status) {
|
||||||
|
emit('itemClick', [item]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const showMax = 3;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
:deep(.arco-list) {
|
||||||
|
.arco-list-item {
|
||||||
|
min-height: 86px;
|
||||||
|
border-bottom: 1px solid rgb(var(--gray-3));
|
||||||
|
}
|
||||||
|
.arco-list-item-extra {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
.arco-list-item-meta-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.item-wrap {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.time-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgb(var(--gray-6));
|
||||||
|
}
|
||||||
|
.arco-empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.arco-list-footer {
|
||||||
|
padding: 0;
|
||||||
|
height: 50px;
|
||||||
|
border-top: none;
|
||||||
|
line-height: 50px;
|
||||||
|
.arco-space-item {
|
||||||
|
width: 100%;
|
||||||
|
border-right: 1px solid rgb(var(--gray-3));
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.add-border-top {
|
||||||
|
border-top: 1px solid rgb(var(--gray-3));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-wrap {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.arco-typography {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.add-border {
|
||||||
|
border-top: 1px solid rgb(var(--gray-3));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
export default {
|
||||||
|
'messageBox.tab.title.message': 'Message',
|
||||||
|
'messageBox.tab.title.notice': 'Notice',
|
||||||
|
'messageBox.tab.title.todo': 'Todo',
|
||||||
|
'messageBox.tab.button': 'empty',
|
||||||
|
'messageBox.allRead': 'All Read',
|
||||||
|
'messageBox.viewMore': 'View More',
|
||||||
|
'messageBox.noContent': 'No Content',
|
||||||
|
'messageBox.switchRoles': 'Switch Roles',
|
||||||
|
'messageBox.userCenter': 'User Center',
|
||||||
|
'messageBox.userSettings': 'User Settings',
|
||||||
|
'messageBox.logout': 'Logout',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
export default {
|
||||||
|
'messageBox.tab.title.message': '消息',
|
||||||
|
'messageBox.tab.title.notice': '通知',
|
||||||
|
'messageBox.tab.title.todo': '待办',
|
||||||
|
'messageBox.tab.button': '清空',
|
||||||
|
'messageBox.allRead': '全部已读',
|
||||||
|
'messageBox.viewMore': '查看更多',
|
||||||
|
'messageBox.noContent': '暂无内容',
|
||||||
|
'messageBox.switchRoles': '切换角色',
|
||||||
|
'messageBox.userCenter': '用户中心',
|
||||||
|
'messageBox.userSettings': '用户设置',
|
||||||
|
'messageBox.logout': '登出登录',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
export default {
|
||||||
|
minder: {
|
||||||
|
commons: {
|
||||||
|
confirm: 'Confirm',
|
||||||
|
clear: 'Clear',
|
||||||
|
export: 'Export',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
edit: 'Edit',
|
||||||
|
delete: 'Delete',
|
||||||
|
remove: 'Remove',
|
||||||
|
return: 'Return',
|
||||||
|
},
|
||||||
|
menu: {
|
||||||
|
expand: {
|
||||||
|
expand: 'Expand',
|
||||||
|
folding: 'Folding',
|
||||||
|
expand_one: 'Expand one level',
|
||||||
|
expand_tow: 'Expand tow level',
|
||||||
|
expand_three: 'Expand three level',
|
||||||
|
expand_four: 'Expand four level',
|
||||||
|
expand_five: 'Expand five level',
|
||||||
|
expand_six: 'Expand six level',
|
||||||
|
},
|
||||||
|
insert: {
|
||||||
|
down: 'Subordinate',
|
||||||
|
up: 'Superior',
|
||||||
|
same: 'Same',
|
||||||
|
_same: 'Same level',
|
||||||
|
_down: 'Subordinate level',
|
||||||
|
_up: 'Superior level',
|
||||||
|
},
|
||||||
|
move: {
|
||||||
|
up: 'Up',
|
||||||
|
down: 'Down',
|
||||||
|
forward: 'Forward',
|
||||||
|
backward: 'Backward',
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
progress: 'Progress',
|
||||||
|
remove_progress: 'Remove progress',
|
||||||
|
prepare: 'Prepare',
|
||||||
|
complete_all: 'Complete all',
|
||||||
|
complete: 'Complete',
|
||||||
|
},
|
||||||
|
selection: {
|
||||||
|
all: 'Select all',
|
||||||
|
invert: 'Select invert',
|
||||||
|
sibling: 'Select sibling node',
|
||||||
|
same: 'Select same node',
|
||||||
|
path: 'Select path',
|
||||||
|
subtree: 'Select subtree',
|
||||||
|
},
|
||||||
|
arrange: {
|
||||||
|
arrange_layout: 'Arrange layout',
|
||||||
|
},
|
||||||
|
font: {
|
||||||
|
font: 'Font',
|
||||||
|
size: 'Font size',
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
clear: 'Clear style',
|
||||||
|
copy: 'Copy style',
|
||||||
|
paste: 'Paste style',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
main: {
|
||||||
|
header: {
|
||||||
|
minder: 'Minder',
|
||||||
|
style: 'Appearance style',
|
||||||
|
},
|
||||||
|
main: {
|
||||||
|
save: 'Save',
|
||||||
|
},
|
||||||
|
navigator: {
|
||||||
|
amplification: 'Amplification',
|
||||||
|
narrow: 'Narrow',
|
||||||
|
drag: 'Drag',
|
||||||
|
locating_root: 'Locating root node',
|
||||||
|
navigator: 'Navigator',
|
||||||
|
},
|
||||||
|
history: {
|
||||||
|
undo: 'Undo',
|
||||||
|
redo: 'Redo',
|
||||||
|
},
|
||||||
|
subject: {
|
||||||
|
central: 'Central subject',
|
||||||
|
branch: 'Subject',
|
||||||
|
},
|
||||||
|
priority: 'Priority',
|
||||||
|
tag: 'Tag',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
export default {
|
||||||
|
minder: {
|
||||||
|
commons: {
|
||||||
|
confirm: '确定',
|
||||||
|
clear: '清空',
|
||||||
|
export: '导出',
|
||||||
|
cancel: '取消',
|
||||||
|
edit: '编辑',
|
||||||
|
delete: '删除',
|
||||||
|
remove: '移除',
|
||||||
|
return: '返回',
|
||||||
|
},
|
||||||
|
menu: {
|
||||||
|
expand: {
|
||||||
|
expand: '展开',
|
||||||
|
folding: '收起',
|
||||||
|
expand_one: '展开到一级节点',
|
||||||
|
expand_tow: '展开到二级节点',
|
||||||
|
expand_three: '展开到三级节点',
|
||||||
|
expand_four: '展开到四级节点',
|
||||||
|
expand_five: '展开到五级节点',
|
||||||
|
expand_six: '展开到六级节点',
|
||||||
|
},
|
||||||
|
insert: {
|
||||||
|
down: '插入下级主题',
|
||||||
|
up: '插入上级主题',
|
||||||
|
same: '插入同级主题',
|
||||||
|
_same: '同级',
|
||||||
|
_down: '下级',
|
||||||
|
_up: '上级',
|
||||||
|
},
|
||||||
|
move: {
|
||||||
|
up: '上移',
|
||||||
|
down: '下移',
|
||||||
|
forward: '前移',
|
||||||
|
backward: '后移',
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
progress: '进度',
|
||||||
|
remove_progress: '移除进度',
|
||||||
|
prepare: '未开始',
|
||||||
|
complete_all: '全部完成',
|
||||||
|
complete: '完成',
|
||||||
|
},
|
||||||
|
selection: {
|
||||||
|
all: '全选',
|
||||||
|
invert: '反选',
|
||||||
|
sibling: '选择兄弟节点',
|
||||||
|
same: '选择同级节点',
|
||||||
|
path: '选择路径',
|
||||||
|
subtree: '选择子树',
|
||||||
|
},
|
||||||
|
arrange: {
|
||||||
|
arrange_layout: '整理布局',
|
||||||
|
},
|
||||||
|
font: {
|
||||||
|
font: '字体',
|
||||||
|
size: '字号',
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
clear: '清除样式',
|
||||||
|
copy: '复制样式',
|
||||||
|
paste: '粘贴样式',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
main: {
|
||||||
|
header: {
|
||||||
|
minder: '思维导图',
|
||||||
|
style: '外观样式',
|
||||||
|
},
|
||||||
|
main: {
|
||||||
|
save: '保存',
|
||||||
|
},
|
||||||
|
navigator: {
|
||||||
|
amplification: '放大',
|
||||||
|
narrow: '缩小',
|
||||||
|
drag: '拖拽',
|
||||||
|
locating_root: '定位根节点',
|
||||||
|
navigator: '导航器',
|
||||||
|
},
|
||||||
|
history: {
|
||||||
|
undo: '撤销',
|
||||||
|
redo: '重做',
|
||||||
|
},
|
||||||
|
subject: {
|
||||||
|
central: '中心主题',
|
||||||
|
branch: '分支主题',
|
||||||
|
},
|
||||||
|
priority: '优先级',
|
||||||
|
tag: '标签',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<a-tabs v-model="activeName" class="mind_tab-content">
|
||||||
|
<a-tab-pane key="editMenu" :title="t('minder.main.header.minder')">
|
||||||
|
<div class="mind-tab-panel">
|
||||||
|
<edit-menu
|
||||||
|
:minder="minder"
|
||||||
|
:move-enable="props.moveEnable"
|
||||||
|
:sequence-enable="props.sequenceEnable"
|
||||||
|
:tag-enable="props.tagEnable"
|
||||||
|
:progress-enable="props.progressEnable"
|
||||||
|
:priority-count="props.priorityCount"
|
||||||
|
:priority-prefix="props.priorityPrefix"
|
||||||
|
:tag-edit-check="props.tagEditCheck"
|
||||||
|
:tag-disable-check="props.tagDisableCheck"
|
||||||
|
:priority-disable-check="props.priorityDisableCheck"
|
||||||
|
:priority-start-with-zero="props.priorityStartWithZero"
|
||||||
|
:tags="props.tags"
|
||||||
|
:distinct-tags="props.distinctTags"
|
||||||
|
:del-confirm="props.delConfirm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="viewMenu" :title="t('minder.main.header.style')">
|
||||||
|
<div class="mind-tab-panel">
|
||||||
|
<view-menu :minder="minder" :default-mold="props.defaultMold" @mold-change="handleMoldChange" />
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="headerVue" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import editMenu from '../menu/edit/editMenu.vue';
|
||||||
|
import viewMenu from '../menu/view/viewMenu.vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { editMenuProps, moleProps, priorityProps, tagProps, delProps } from '../props';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
...editMenuProps,
|
||||||
|
...moleProps,
|
||||||
|
...priorityProps,
|
||||||
|
...tagProps,
|
||||||
|
...delProps,
|
||||||
|
minder: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'moldChange', data: number): void;
|
||||||
|
}>();
|
||||||
|
const activeName = ref('editMenu');
|
||||||
|
|
||||||
|
function handleMoldChange(data: number) {
|
||||||
|
emit('moldChange', data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../style/header';
|
||||||
|
.mind_tab-content {
|
||||||
|
.tab-icons {
|
||||||
|
background-image: url('@/assets/images/minder/icons.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
header {
|
||||||
|
font-size: 12px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
& > ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #e1e1e1;
|
||||||
|
li {
|
||||||
|
line-height: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 80px;
|
||||||
|
height: 100%;
|
||||||
|
list-style: none;
|
||||||
|
a {
|
||||||
|
width: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #337ab7;
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
color: #23527c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.selected {
|
||||||
|
background: #ffffff;
|
||||||
|
a {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arco-tabs-content {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div ref="mec" class="minder-container" :style="{ height: `${props.height}px` }">
|
||||||
|
<a-button type="primary" :disabled="props.disabled" class="save-btn" @click="save">{{
|
||||||
|
t('minder.main.main.save')
|
||||||
|
}}</a-button>
|
||||||
|
<navigator />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="minderContainer" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import type { Ref } from 'vue';
|
||||||
|
import Navigator from './navigator.vue';
|
||||||
|
import { markChangeNode, markDeleteNode } from '../script/tool/utils';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { editMenuProps, mainEditorProps, priorityProps, tagProps } from '../props';
|
||||||
|
import Editor from '../script/editor';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const props = defineProps({ ...editMenuProps, ...mainEditorProps, ...tagProps, ...priorityProps });
|
||||||
|
|
||||||
|
const emit = defineEmits({
|
||||||
|
afterMount: () => ({}),
|
||||||
|
save: (json) => json,
|
||||||
|
});
|
||||||
|
|
||||||
|
const mec: Ref<HTMLDivElement | null> = ref(null);
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
emit('save', window.minder.exportJson());
|
||||||
|
}
|
||||||
|
function handlePriorityButton() {
|
||||||
|
const { priorityPrefix } = props;
|
||||||
|
const { priorityStartWithZero } = props;
|
||||||
|
let start = priorityStartWithZero ? 0 : 1;
|
||||||
|
let res = '';
|
||||||
|
for (let i = 0; i < props.priorityCount; i++) {
|
||||||
|
res += start++;
|
||||||
|
}
|
||||||
|
const priority = window.minder.hotbox.state('priority');
|
||||||
|
res.replace(/./g, (p) => {
|
||||||
|
priority.button({
|
||||||
|
position: 'ring',
|
||||||
|
label: priorityPrefix + p,
|
||||||
|
key: p,
|
||||||
|
action() {
|
||||||
|
const pVal = parseInt(p, 10);
|
||||||
|
window.minder.execCommand('Priority', priorityStartWithZero ? pVal + 1 : pVal);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 需要返回字符串
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function handleTagButton() {
|
||||||
|
const tag = window.minder.hotbox.state('tag');
|
||||||
|
props.tags?.forEach((item) => {
|
||||||
|
tag.button({
|
||||||
|
position: 'ring',
|
||||||
|
label: item,
|
||||||
|
key: item,
|
||||||
|
action() {
|
||||||
|
window.minder.execCommand('resource', item);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
window.editor = new Editor(mec.value, {
|
||||||
|
sequenceEnable: props.sequenceEnable,
|
||||||
|
tagEnable: props.tagEnable,
|
||||||
|
progressEnable: props.progressEnable,
|
||||||
|
moveEnable: props.moveEnable,
|
||||||
|
});
|
||||||
|
const { editor } = window;
|
||||||
|
if (Object.keys(props.importJson || {}).length > 0) {
|
||||||
|
editor.minder.importJson(props.importJson);
|
||||||
|
}
|
||||||
|
window.km = editor.minder;
|
||||||
|
window.minder = window.km;
|
||||||
|
window.minderEditor = editor;
|
||||||
|
window.minder.moveEnable = props.moveEnable;
|
||||||
|
|
||||||
|
window.minder.forceRemoveNode = () => {
|
||||||
|
markDeleteNode(window.minder);
|
||||||
|
window.minder.execCommand('RemoveNode');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.minder.on('preExecCommand', (env: any) => {
|
||||||
|
const selectNodes = env.minder.getSelectedNodes();
|
||||||
|
const notChangeCommands = new Set([
|
||||||
|
'camera',
|
||||||
|
'copy',
|
||||||
|
'expand',
|
||||||
|
'expandToLevel',
|
||||||
|
'hand',
|
||||||
|
'layout',
|
||||||
|
'template',
|
||||||
|
'theme',
|
||||||
|
'zoom',
|
||||||
|
'zoomIn',
|
||||||
|
'zoomOut',
|
||||||
|
'append',
|
||||||
|
'appendchildnode',
|
||||||
|
'appendsiblingnode',
|
||||||
|
]);
|
||||||
|
if (selectNodes && !notChangeCommands.has(env.commandName.toLocaleLowerCase())) {
|
||||||
|
selectNodes.forEach((node: any) => {
|
||||||
|
markChangeNode(node);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (env.commandName === 'movetoparent') {
|
||||||
|
setTimeout(() => {
|
||||||
|
const targetNode = window.minder.getSelectedNode();
|
||||||
|
targetNode.parent.renderTree();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
handlePriorityButton();
|
||||||
|
handleTagButton();
|
||||||
|
emit('afterMount');
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../style/editor.less';
|
||||||
|
.save-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
bottom: 30px;
|
||||||
|
}
|
||||||
|
.minder-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,316 @@
|
||||||
|
<template>
|
||||||
|
<div class="navigator">
|
||||||
|
<div class="nav-bar">
|
||||||
|
<div
|
||||||
|
class="nav-btn zoom-in"
|
||||||
|
:title="t('minder.main.navigator.amplification')"
|
||||||
|
:class="{ active: zoomRadioIn }"
|
||||||
|
@click="zoomIn"
|
||||||
|
>
|
||||||
|
<div class="icon" />
|
||||||
|
</div>
|
||||||
|
<div ref="zoomPan" class="zoom-pan">
|
||||||
|
<div class="origin" :style="{ transform: 'translate(0, ' + getHeight(100) + 'px)' }" @click="RestoreSize" />
|
||||||
|
<div
|
||||||
|
class="indicator"
|
||||||
|
:style="{
|
||||||
|
transform: 'translate(0, ' + getHeight(zoom) + 'px)',
|
||||||
|
transition: 'transform 200ms',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="nav-btn zoom-out"
|
||||||
|
:title="t('minder.main.navigator.narrow')"
|
||||||
|
:class="{ active: zoomRadioOut }"
|
||||||
|
@click="zoomOut"
|
||||||
|
>
|
||||||
|
<div class="icon" />
|
||||||
|
</div>
|
||||||
|
<div class="nav-btn hand" :title="t('minder.main.navigator.drag')" :class="{ active: enableHand }" @click="hand">
|
||||||
|
<div class="icon" />
|
||||||
|
</div>
|
||||||
|
<div class="nav-btn camera" :title="t('minder.main.navigator.locating_root')" @click="locateToOrigin">
|
||||||
|
<div class="icon" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="nav-btn nav-trigger"
|
||||||
|
:class="{ active: isNavOpen }"
|
||||||
|
:title="t('minder.main.navigator.navigator')"
|
||||||
|
@click="toggleNavOpen"
|
||||||
|
>
|
||||||
|
<div class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="isNavOpen" ref="navPreviewer" class="nav-previewer" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="navigator" setup>
|
||||||
|
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
||||||
|
import type { Ref } from 'vue';
|
||||||
|
import { getLocalStorage, setLocalStorage } from '../script/store';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const zoomPan: Ref<HTMLDivElement | null> = ref(null);
|
||||||
|
const navPreviewer: Ref<HTMLDivElement | null> = ref(null);
|
||||||
|
|
||||||
|
const zoom = ref(100);
|
||||||
|
const isNavOpen = ref(true);
|
||||||
|
const previewNavigator: Ref<HTMLDivElement | null> = ref(null);
|
||||||
|
const contentView = ref('');
|
||||||
|
|
||||||
|
let visibleView = reactive<any>({});
|
||||||
|
let visibleRect = reactive<any>({});
|
||||||
|
let nodeThumb = reactive<any>({});
|
||||||
|
let connectionThumb = reactive<any>({});
|
||||||
|
let paper = reactive<any>({});
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
// 右侧面板最小宽度
|
||||||
|
ctrlPanelMin: 250,
|
||||||
|
// 右侧面板宽度
|
||||||
|
ctrlPanelWidth: parseInt(window.localStorage.getItem('__dev_minder_ctrlPanelWidth') || '', 10) || 250,
|
||||||
|
// 分割线宽度
|
||||||
|
dividerWidth: 3,
|
||||||
|
// 默认语言
|
||||||
|
defaultLang: 'zh-cn',
|
||||||
|
// 放大缩小比例
|
||||||
|
zoom: [10, 20, 30, 50, 80, 100, 120, 150, 200],
|
||||||
|
});
|
||||||
|
|
||||||
|
const enableHand = ref(minder && minder.queryCommandState && minder.queryCommandState('hand') === 1);
|
||||||
|
// 避免缓存
|
||||||
|
function getNavOpenState() {
|
||||||
|
return getLocalStorage('navigator-hidden');
|
||||||
|
}
|
||||||
|
function zoomIn() {
|
||||||
|
if (minder && minder.execCommand) {
|
||||||
|
minder.execCommand('zoomIn');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function RestoreSize() {
|
||||||
|
if (minder && minder.execCommand) {
|
||||||
|
minder.execCommand('zoom', 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function zoomOut() {
|
||||||
|
if (minder && minder.execCommand) {
|
||||||
|
minder.execCommand('zoomOut');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function hand() {
|
||||||
|
if (minder && minder.execCommand) {
|
||||||
|
minder.execCommand('hand');
|
||||||
|
enableHand.value = minder.queryCommandState && minder.queryCommandState('hand') === 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getZoomRadio(value: number) {
|
||||||
|
try {
|
||||||
|
if (!minder) return 2;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return 2;
|
||||||
|
}
|
||||||
|
const zoomStack = minder && minder.getOption && minder.getOption('zoom');
|
||||||
|
if (!zoomStack) {
|
||||||
|
return 2;
|
||||||
|
}
|
||||||
|
const minValue = zoomStack[0];
|
||||||
|
const maxValue = zoomStack[zoomStack.length - 1];
|
||||||
|
const valueRange = maxValue - minValue;
|
||||||
|
|
||||||
|
return 1 - (value - minValue) / valueRange;
|
||||||
|
}
|
||||||
|
const zoomRadioIn = computed(() => getZoomRadio(zoom.value) === 0);
|
||||||
|
const zoomRadioOut = computed(() => getZoomRadio(zoom.value) === 1);
|
||||||
|
|
||||||
|
function getHeight(value: number) {
|
||||||
|
const totalHeight = Number(zoomPan.value?.style.height);
|
||||||
|
return getZoomRadio(value) * totalHeight;
|
||||||
|
}
|
||||||
|
function locateToOrigin() {
|
||||||
|
if (minder && minder.execCommand && minder.getRoot) {
|
||||||
|
minder.execCommand('camera', minder.getRoot(), 600);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPathHandler(theme?: string) {
|
||||||
|
switch (theme) {
|
||||||
|
case 'tianpan':
|
||||||
|
case 'tianpan-compact':
|
||||||
|
return (nodePathData: any[], x: number, y: number, width: number) => {
|
||||||
|
// eslint-disable-next-line no-bitwise
|
||||||
|
const r = width >> 1;
|
||||||
|
nodePathData.push('M', x, y + r, 'a', r, r, 0, 1, 1, 0, 0.01, 'z');
|
||||||
|
};
|
||||||
|
default: {
|
||||||
|
return (nodePathData: any[], x: number, y: number, width: number, height: number) => {
|
||||||
|
nodePathData.push('M', x, y, 'h', width, 'v', height, 'h', -width, 'z');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let pathHandler = getPathHandler(minder.getTheme ? minder.getTheme() : '');
|
||||||
|
|
||||||
|
function updateVisibleView() {
|
||||||
|
if (minder.getViewDragger && visibleRect.setBox) {
|
||||||
|
visibleView = minder.getViewDragger().getView();
|
||||||
|
visibleRect.setBox(visibleView.intersect && visibleView.intersect(contentView.value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateContentView() {
|
||||||
|
if (!minder.getRenderContainer || !paper.setViewBox || !minder.getRoot) return;
|
||||||
|
const view = minder.getRenderContainer().getBoundaryBox();
|
||||||
|
contentView.value = view;
|
||||||
|
const padding = 30;
|
||||||
|
paper.setViewBox(
|
||||||
|
view.x - padding - 0.5,
|
||||||
|
view.y - padding - 0.5,
|
||||||
|
view.width + padding * 2 + 1,
|
||||||
|
view.height + padding * 2 + 1
|
||||||
|
);
|
||||||
|
const nodePathData: any[] = [];
|
||||||
|
const connectionThumbData: any[] = [];
|
||||||
|
minder.getRoot().traverse((node: any) => {
|
||||||
|
const box = node.getLayoutBox();
|
||||||
|
pathHandler(nodePathData, box.x, box.y, box.width, box.height);
|
||||||
|
if (node.getConnection() && node.parent && node.parent.isExpanded()) {
|
||||||
|
connectionThumbData.push(node.getConnection().getPathData());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!paper.setStyle || !minder.getStyle || !nodeThumb.fill || !nodeThumb.setPathData) return;
|
||||||
|
paper.setStyle('background', minder.getStyle('background'));
|
||||||
|
if (nodePathData.length) {
|
||||||
|
nodeThumb.fill(minder.getStyle('root-background')).setPathData(nodePathData);
|
||||||
|
} else {
|
||||||
|
nodeThumb.setPathData(null);
|
||||||
|
}
|
||||||
|
if (connectionThumbData.length && connectionThumb.stroke) {
|
||||||
|
connectionThumb.stroke(minder.getStyle('connect-color'), '0.5%').setPathData(connectionThumbData);
|
||||||
|
} else if (connectionThumb.setPathData) {
|
||||||
|
connectionThumb.setPathData(null);
|
||||||
|
}
|
||||||
|
updateVisibleView();
|
||||||
|
}
|
||||||
|
|
||||||
|
function bind() {
|
||||||
|
if (minder && minder.on) {
|
||||||
|
minder.on('layout layoutallfinish', updateContentView);
|
||||||
|
minder.on('viewchange', updateVisibleView);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unbind() {
|
||||||
|
if (minder && minder.off) {
|
||||||
|
minder.off('layout layoutallfinish', updateContentView);
|
||||||
|
minder.off('viewchange', updateVisibleView);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleNavOpen() {
|
||||||
|
let isNavOpenState = false;
|
||||||
|
isNavOpenState = !JSON.parse(getNavOpenState());
|
||||||
|
isNavOpen.value = isNavOpenState;
|
||||||
|
setLocalStorage('navigator-hidden', isNavOpen.value);
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
if (isNavOpenState) {
|
||||||
|
bind();
|
||||||
|
updateContentView();
|
||||||
|
updateVisibleView();
|
||||||
|
} else {
|
||||||
|
unbind();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function navigate() {
|
||||||
|
function moveView(center: Record<string, any>, duration?: number) {
|
||||||
|
if (!minder.getPaper || !visibleView.width || !visibleView.height) return;
|
||||||
|
let box = visibleView;
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
center.x = -center.x;
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
center.y = -center.y;
|
||||||
|
const viewMatrix = minder.getPaper().getViewPortMatrix();
|
||||||
|
box = viewMatrix.transformBox(box);
|
||||||
|
if (!box.width || !box.height) return;
|
||||||
|
const targetPosition = center.offset(box.width / 2, box.height / 2);
|
||||||
|
if (minder.getViewDragger) minder.getViewDragger().moveTo(targetPosition, duration);
|
||||||
|
}
|
||||||
|
if (!paper.on) return;
|
||||||
|
let dragging = false;
|
||||||
|
paper.on('mousedown', (e: any) => {
|
||||||
|
dragging = true;
|
||||||
|
moveView(e.getPosition('top'), 200);
|
||||||
|
previewNavigator.value?.classList.add('grab');
|
||||||
|
});
|
||||||
|
paper.on('mousemove', (e: any) => {
|
||||||
|
if (dragging) {
|
||||||
|
moveView(e.getPosition('top'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
paper.on('mouseup', () => {
|
||||||
|
dragging = false;
|
||||||
|
previewNavigator.value?.classList.remove('grab');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
const { kity } = window;
|
||||||
|
// 以下部分是缩略图导航器
|
||||||
|
previewNavigator.value = navPreviewer.value;
|
||||||
|
|
||||||
|
// 画布，渲染缩略图
|
||||||
|
paper = new kity.Paper(previewNavigator.value);
|
||||||
|
|
||||||
|
// 用两个路径来绘制节点和连线的缩略图
|
||||||
|
if (!paper.put || !minder || !minder.on) return;
|
||||||
|
nodeThumb = paper.put(new kity.Path());
|
||||||
|
connectionThumb = paper.put(new kity.Path());
|
||||||
|
// 表示可视区域的矩形
|
||||||
|
visibleRect = paper.put(new kity.Rect(100, 100).stroke('red', '1%'));
|
||||||
|
|
||||||
|
contentView.value = new kity.Box();
|
||||||
|
visibleView = new kity.Box();
|
||||||
|
|
||||||
|
pathHandler = getPathHandler(minder.getTheme ? minder.getTheme() : '');
|
||||||
|
if (minder.setDefaultOptions) {
|
||||||
|
minder.setDefaultOptions({
|
||||||
|
zoom: config.zoom,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
minder.on('zoom', (e: any) => {
|
||||||
|
zoom.value = e.zoom;
|
||||||
|
});
|
||||||
|
if (isNavOpen.value) {
|
||||||
|
bind();
|
||||||
|
updateContentView();
|
||||||
|
updateVisibleView();
|
||||||
|
} else {
|
||||||
|
unbind();
|
||||||
|
}
|
||||||
|
// 主题切换事件
|
||||||
|
minder.on('themechange', (e: any) => {
|
||||||
|
pathHandler = getPathHandler(e.theme);
|
||||||
|
});
|
||||||
|
|
||||||
|
navigate();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nav-btn .icon {
|
||||||
|
background: url('@/assets/images/minder/icons.png');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
<template>
|
||||||
|
<div class="edit-del-group">
|
||||||
|
<div class="edit menu-btn" :disabled="textDisabled" @click="edit">
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>
|
||||||
|
{{ t('minder.commons.edit') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="del menu-btn" :disabled="removeNodeDisabled" @click="del">
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>
|
||||||
|
{{ t('minder.commons.delete') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="edit_del" setup>
|
||||||
|
import { onMounted, reactive, nextTick, ref } from 'vue';
|
||||||
|
import { isDeleteDisableNode, isDisableNode } from '../../script/tool/utils';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
import { delProps } from '../../props';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const props = defineProps(delProps);
|
||||||
|
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
const textDisabled = ref(true);
|
||||||
|
const removeNodeDisabled = ref(true);
|
||||||
|
|
||||||
|
function checkDisabled() {
|
||||||
|
try {
|
||||||
|
if (!minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const node = minder.getSelectedNode();
|
||||||
|
removeNodeDisabled.value = !node || !!isDeleteDisableNode(minder) || node.parent === null;
|
||||||
|
textDisabled.value = !node || !!isDisableNode(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
minder.on('selectionchange', () => {
|
||||||
|
checkDisabled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function editNode() {
|
||||||
|
if (!minder.queryCommandValue) return;
|
||||||
|
const editor = window.minderEditor;
|
||||||
|
const receiverElement = editor.receiver.element;
|
||||||
|
const { fsm } = editor;
|
||||||
|
const { receiver } = editor;
|
||||||
|
|
||||||
|
receiverElement.innerText = minder.queryCommandValue('text');
|
||||||
|
fsm.jump('input', 'input-request');
|
||||||
|
receiver.selectAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function edit() {
|
||||||
|
if (textDisabled.value || !minder.queryCommandState) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (minder.queryCommandState('text') !== -1) {
|
||||||
|
editNode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function del() {
|
||||||
|
if (removeNodeDisabled.value || !minder.queryCommandState || !minder.execCommand) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (props.delConfirm) {
|
||||||
|
props.delConfirm();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
minder.forceRemoveNode();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div class="menu-container">
|
||||||
|
<expand />
|
||||||
|
<selection />
|
||||||
|
<insert-box />
|
||||||
|
<move-box :move-enable="props.moveEnable" />
|
||||||
|
<edit-del :del-confirm="props.delConfirm" />
|
||||||
|
<sequence-box
|
||||||
|
v-if="props.sequenceEnable"
|
||||||
|
:priority-prefix="props.priorityPrefix"
|
||||||
|
:priority-count="props.priorityCount"
|
||||||
|
:priority-disable-check="props.priorityDisableCheck"
|
||||||
|
:priority-start-with-zero="props.priorityStartWithZero"
|
||||||
|
/>
|
||||||
|
<progress-box v-if="props.progressEnable" />
|
||||||
|
<tag-box
|
||||||
|
v-if="props.tagEnable"
|
||||||
|
:tags="props.tags"
|
||||||
|
:tag-disable-check="props.tagDisableCheck"
|
||||||
|
:tag-edit-check="props.tagEditCheck"
|
||||||
|
:distinct-tags="props.distinctTags"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="editMenu" setup>
|
||||||
|
import insertBox from './insertBox.vue';
|
||||||
|
import moveBox from './moveBox.vue';
|
||||||
|
import editDel from './editDel.vue';
|
||||||
|
import sequenceBox from './sequenceBox.vue';
|
||||||
|
import progressBox from './progressBox.vue';
|
||||||
|
import expand from './expand.vue';
|
||||||
|
import selection from './selection.vue';
|
||||||
|
import TagBox from './tagBox.vue';
|
||||||
|
import { editMenuProps, priorityProps, tagProps, delProps } from '../../props';
|
||||||
|
|
||||||
|
const props = defineProps({ ...editMenuProps, ...priorityProps, ...tagProps, ...delProps });
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<div class="expand-group">
|
||||||
|
<a-button class="tab-icons expand" type="text" @click="expandAll" />
|
||||||
|
<a-dropdown :popup-max-height="false" @select="handleCommand">
|
||||||
|
<span class="dropdown-link">
|
||||||
|
{{ t('minder.menu.expand.expand') }}
|
||||||
|
<icon-caret-down />
|
||||||
|
</span>
|
||||||
|
<template #content>
|
||||||
|
<a-doption value="1">{{ t('minder.menu.expand.expand_one') }}</a-doption>
|
||||||
|
<a-doption value="2">{{ t('minder.menu.expand.expand_tow') }}</a-doption>
|
||||||
|
<a-doption value="3">{{ t('minder.menu.expand.expand_three') }}</a-doption>
|
||||||
|
<a-doption value="4">{{ t('minder.menu.expand.expand_four') }}</a-doption>
|
||||||
|
<a-doption value="5">{{ t('minder.menu.expand.expand_five') }}</a-doption>
|
||||||
|
<a-doption value="6">{{ t('minder.menu.expand.expand_six') }}</a-doption>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="expand" setup>
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
function handleCommand(command: string | number | Record<string, any> | undefined) {
|
||||||
|
window.minder?.execCommand('ExpandToLevel', command);
|
||||||
|
}
|
||||||
|
|
||||||
|
function expandAll() {
|
||||||
|
window.minder?.execCommand('ExpandToLevel', 9999);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dropdown-link {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<template>
|
||||||
|
<div class="insert-group">
|
||||||
|
<div class="insert-child-box menu-btn" :disabled="appendChildNodeDisabled" @click="execCommand('AppendChildNode')">
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>{{ t('minder.menu.insert.down') }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="insert-parent-box menu-btn"
|
||||||
|
:disabled="appendParentNodeDisabled"
|
||||||
|
@click="execCommand('AppendParentNode')"
|
||||||
|
>
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>{{ t('minder.menu.insert.up') }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="insert-sibling-box menu-btn"
|
||||||
|
:disabled="appendSiblingNodeDisabled"
|
||||||
|
@click="execCommand('AppendSiblingNode')"
|
||||||
|
>
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>{{ t('minder.menu.insert.same') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="insertBox" setup>
|
||||||
|
import { nextTick, onMounted, ref } from 'vue';
|
||||||
|
import { isDisableNode } from '../../script/tool/utils';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const minder = ref<any>({});
|
||||||
|
const appendChildNodeDisabled = ref(false);
|
||||||
|
const appendParentNodeDisabled = ref(false);
|
||||||
|
const appendSiblingNodeDisabled = ref(false);
|
||||||
|
|
||||||
|
function checkDisabled() {
|
||||||
|
try {
|
||||||
|
if (Object.keys(minder.value).length === 0) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
appendChildNodeDisabled.value = minder.value.queryCommandState('AppendChildNode') === -1;
|
||||||
|
const node = minder.value.getSelectedNode();
|
||||||
|
appendSiblingNodeDisabled.value = !node || !!isDisableNode(minder.value) || node.parent === null;
|
||||||
|
appendParentNodeDisabled.value = !node || node.parent === null;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder.value = window.minder;
|
||||||
|
minder.value.on('selectionchange', () => {
|
||||||
|
checkDisabled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function execCommand(command: string) {
|
||||||
|
if (minder.value.queryCommandState(command) !== -1) {
|
||||||
|
minder.value.execCommand(command);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div class="move-group">
|
||||||
|
<div class="move-up menu-btn" :disabled="arrangeUpDisabled" @click="execCommand('ArrangeUp')">
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>{{ t('minder.menu.move.up') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="move-down menu-btn" :disabled="arrangeDownDisabled" @click="execCommand('ArrangeDown')">
|
||||||
|
<i class="tab-icons" />
|
||||||
|
<span>{{ t('minder.menu.move.down') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="moveBox" setup>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { isDisableNode } from '../../script/tool/utils';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
moveEnable: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
const arrangeUpDisabled = ref(true);
|
||||||
|
const arrangeDownDisabled = ref(true);
|
||||||
|
|
||||||
|
function checkDisabled() {
|
||||||
|
try {
|
||||||
|
if (Object.keys(minder).length === 0) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const node = minder.getSelectedNode();
|
||||||
|
if (!props.moveEnable || !node || node.parent === null || isDisableNode(minder)) {
|
||||||
|
arrangeUpDisabled.value = true;
|
||||||
|
arrangeDownDisabled.value = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (window.minder.queryCommandState) {
|
||||||
|
arrangeUpDisabled.value = window.minder.queryCommandState('ArrangeUp') === -1;
|
||||||
|
arrangeDownDisabled.value = window.minder.queryCommandState('ArrangeDown') === -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
minder.on('selectionchange', () => {
|
||||||
|
checkDisabled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function execCommand(command: string) {
|
||||||
|
if (window.minder.queryCommandState(command) !== -1) window.minder.execCommand(command);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<div class="progress-group">
|
||||||
|
<ul>
|
||||||
|
<ul :disabled="commandDisabled">
|
||||||
|
<li
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="item.text"
|
||||||
|
class="menu-btn"
|
||||||
|
:class="classArray(index)"
|
||||||
|
:title="title(index)"
|
||||||
|
@click="execCommand(index)"
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="progressBox" setup>
|
||||||
|
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { isDisableNode } from '../../script/tool/utils';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
const commandValue = ref('');
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{ text: '0' },
|
||||||
|
{ text: '1' },
|
||||||
|
{ text: '2' },
|
||||||
|
{ text: '3' },
|
||||||
|
{ text: '4' },
|
||||||
|
{ text: '5' },
|
||||||
|
{ text: '6' },
|
||||||
|
{ text: '7' },
|
||||||
|
{ text: '8' },
|
||||||
|
{ text: '9' },
|
||||||
|
];
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const commandDisabled = computed(() => {
|
||||||
|
if (Object.keys(minder).length === 0 || !minder.on) return true;
|
||||||
|
minder.on('interactchange', () => {
|
||||||
|
commandValue.value = minder.queryCommandValue && minder.queryCommandValue('progress');
|
||||||
|
});
|
||||||
|
if (isDisableNode(minder)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return minder.queryCommandState && minder.queryCommandState('progress') === -1;
|
||||||
|
});
|
||||||
|
|
||||||
|
function execCommand(index: number) {
|
||||||
|
if (!commandDisabled.value && minder.execCommand) {
|
||||||
|
minder.execCommand('progress', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function classArray(index: number) {
|
||||||
|
const isActive = minder.queryCommandValue && minder.queryCommandValue('progress') === index;
|
||||||
|
const sequence = `progress-${index}`;
|
||||||
|
|
||||||
|
// 用数组返回多个class
|
||||||
|
const arr = [
|
||||||
|
{
|
||||||
|
active: isActive,
|
||||||
|
},
|
||||||
|
sequence,
|
||||||
|
];
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
function title(index: number) {
|
||||||
|
switch (index) {
|
||||||
|
case 0:
|
||||||
|
return t('minder.menu.progress.remove_progress');
|
||||||
|
case 1:
|
||||||
|
return t('minder.menu.progress.prepare');
|
||||||
|
case 9:
|
||||||
|
return t('minder.menu.progress.complete_all');
|
||||||
|
default:
|
||||||
|
return `${t('minder.menu.progress.complete') + (index - 1)}/8`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.progress-group li {
|
||||||
|
background-image: url('@/assets/images/minder/iconprogress.png');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<template>
|
||||||
|
<div class="selection-group">
|
||||||
|
<a-button type="text" class="tab-icons selection" @click="selectAll" />
|
||||||
|
<a-dropdown :popup-max-height="false" @select="handleCommand">
|
||||||
|
<span class="dropdown-link">
|
||||||
|
{{ t('minder.menu.selection.all') }}
|
||||||
|
<icon-caret-down />
|
||||||
|
</span>
|
||||||
|
<template #content>
|
||||||
|
<a-doption value="1">{{ t('minder.menu.selection.invert') }}</a-doption>
|
||||||
|
<a-doption value="2">{{ t('minder.menu.selection.sibling') }}</a-doption>
|
||||||
|
<a-doption value="3">{{ t('minder.menu.selection.same') }}</a-doption>
|
||||||
|
<a-doption value="4">{{ t('minder.menu.selection.path') }}</a-doption>
|
||||||
|
<a-doption value="5">{{ t('minder.menu.selection.subtree') }}</a-doption>
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="selection" setup>
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
function selectAll() {
|
||||||
|
const selection: any[] = [];
|
||||||
|
window.minder.getRoot().traverse((node: any) => {
|
||||||
|
selection.push(node);
|
||||||
|
});
|
||||||
|
window.minder.select(selection, true);
|
||||||
|
window.minder.fire('receiverfocus');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectRevert() {
|
||||||
|
const selected = window.minder.getSelectedNodes();
|
||||||
|
const selection: any[] = [];
|
||||||
|
window.minder.getRoot().traverse((node: any) => {
|
||||||
|
if (selected.indexOf(node) === -1) {
|
||||||
|
selection.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.minder.select(selection, true);
|
||||||
|
window.minder.fire('receiverfocus');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectSiblings() {
|
||||||
|
const selected = window.minder.getSelectedNodes();
|
||||||
|
const selection: any[] = [];
|
||||||
|
selected.forEach((node: any) => {
|
||||||
|
if (!node.parent) return;
|
||||||
|
node.parent.children.forEach((sibling: string) => {
|
||||||
|
if (selection.indexOf(sibling) === -1) selection.push(sibling);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
window.minder.select(selection, true);
|
||||||
|
window.minder.fire('receiverfocus');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectLevel() {
|
||||||
|
const selectedLevel = window.minder.getSelectedNodes().map((node: any) => node.getLevel());
|
||||||
|
const selection: any[] = [];
|
||||||
|
window.minder.getRoot().traverse((node: any) => {
|
||||||
|
if (selectedLevel.indexOf(node.getLevel()) !== -1) {
|
||||||
|
selection.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.minder.select(selection, true);
|
||||||
|
window.minder.fire('receiverfocus');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectPath() {
|
||||||
|
const selected = window.minder.getSelectedNodes();
|
||||||
|
const selection: any[] = [];
|
||||||
|
selected.forEach((node: any) => {
|
||||||
|
let tempNode = node;
|
||||||
|
while (tempNode && selection.indexOf(tempNode) === -1) {
|
||||||
|
selection.push(tempNode);
|
||||||
|
tempNode = node.parent;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.minder.select(selection, true);
|
||||||
|
window.minder.fire('receiverfocus');
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectTree() {
|
||||||
|
const selected = window.minder.getSelectedNodes();
|
||||||
|
const selection: any[] = [];
|
||||||
|
selected.forEach((parent: any) => {
|
||||||
|
parent.traverse((node: any) => {
|
||||||
|
if (selection.indexOf(node) === -1) selection.push(node);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
window.minder.select(selection, true);
|
||||||
|
window.minder.fire('receiverfocus');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCommand(value: string | number | Record<string, any> | undefined) {
|
||||||
|
switch (value) {
|
||||||
|
case 1:
|
||||||
|
selectRevert();
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
selectSiblings();
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
selectLevel();
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
selectPath();
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
selectTree();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dropdown-link {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<div :disabled="commandDisabled">
|
||||||
|
<a-button class="delete-btn" shape="circle" @click="execCommand()">
|
||||||
|
<template #icon>
|
||||||
|
<icon-delete />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<template v-for="(item, pIndex) in priorityCount + 1">
|
||||||
|
<a-button
|
||||||
|
v-if="pIndex != 0"
|
||||||
|
:key="item"
|
||||||
|
class="priority-btn"
|
||||||
|
:class="'priority-btn_' + pIndex"
|
||||||
|
size="small"
|
||||||
|
@click="execCommand(pIndex)"
|
||||||
|
>
|
||||||
|
{{ priorityPrefix }}{{ priorityStartWithZero ? pIndex - 1 : pIndex }}
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="sequenceBox" setup>
|
||||||
|
import { onMounted, reactive, nextTick, ref } from 'vue';
|
||||||
|
import { isDisableNode, setPriorityView } from '../../script/tool/utils';
|
||||||
|
import { priorityProps } from '../../props';
|
||||||
|
|
||||||
|
const props = defineProps(priorityProps);
|
||||||
|
|
||||||
|
const commandValue = ref('');
|
||||||
|
const commandDisabled = ref(true);
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
|
||||||
|
const isDisable = (): boolean => {
|
||||||
|
if (Object.keys(minder).length === 0) return true;
|
||||||
|
nextTick(() => {
|
||||||
|
setPriorityView(props.priorityStartWithZero, props.priorityPrefix);
|
||||||
|
});
|
||||||
|
if (minder.on) {
|
||||||
|
minder.on('interactchange', () => {
|
||||||
|
commandValue.value = minder.queryCommandValue && minder.queryCommandValue('priority');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const node = minder.getSelectedNode();
|
||||||
|
if (isDisableNode(minder) || !node || node.parent === null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (props.priorityDisableCheck) {
|
||||||
|
return props.priorityDisableCheck();
|
||||||
|
}
|
||||||
|
return !!minder.queryCommandState && minder.queryCommandState('priority') === -1;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
const freshFuc = setPriorityView;
|
||||||
|
if (minder.on) {
|
||||||
|
minder.on('contentchange', () => {
|
||||||
|
// 异步执行，否则执行完，还会被重置
|
||||||
|
setTimeout(() => {
|
||||||
|
freshFuc(props.priorityStartWithZero, props.priorityPrefix);
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
minder.on('selectionchange', () => {
|
||||||
|
commandDisabled.value = isDisable();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function execCommand(index?: number) {
|
||||||
|
if (index && minder.execCommand) {
|
||||||
|
if (!commandDisabled.value) {
|
||||||
|
minder.execCommand('priority', index);
|
||||||
|
}
|
||||||
|
setPriorityView(props.priorityStartWithZero, props.priorityPrefix);
|
||||||
|
} else if (minder.execCommand && !commandDisabled.value) {
|
||||||
|
minder.execCommand('priority');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.delete-btn {
|
||||||
|
margin: 0 4px;
|
||||||
|
padding: 2px !important;
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
i {
|
||||||
|
width: 1em !important;
|
||||||
|
height: 1em !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.priority-btn {
|
||||||
|
margin-right: 4px;
|
||||||
|
padding: 0;
|
||||||
|
padding-right: 5px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.priority-btn_1 {
|
||||||
|
border-bottom: 3px solid #840023;
|
||||||
|
background-color: #ff1200;
|
||||||
|
}
|
||||||
|
.priority-btn_1:hover {
|
||||||
|
border-bottom: 3px solid #840023;
|
||||||
|
color: white;
|
||||||
|
background-color: #ff1200;
|
||||||
|
}
|
||||||
|
.priority-btn_2 {
|
||||||
|
border-bottom: 3px solid #01467f;
|
||||||
|
background-color: #0074ff;
|
||||||
|
}
|
||||||
|
.priority-btn_2:hover {
|
||||||
|
border-bottom: 3px solid #01467f;
|
||||||
|
color: white;
|
||||||
|
background-color: #0074ff;
|
||||||
|
}
|
||||||
|
.priority-btn_3 {
|
||||||
|
border-bottom: 3px solid #006300;
|
||||||
|
background-color: #00af00;
|
||||||
|
}
|
||||||
|
.priority-btn_3:hover {
|
||||||
|
border-bottom: 3px solid #006300;
|
||||||
|
color: white;
|
||||||
|
background-color: #00af00;
|
||||||
|
}
|
||||||
|
.priority-btn_4 {
|
||||||
|
border-bottom: 3px solid #b25000;
|
||||||
|
background-color: #ff962e;
|
||||||
|
}
|
||||||
|
.priority-btn_4:hover {
|
||||||
|
border-bottom: 3px solid #b25000;
|
||||||
|
color: white;
|
||||||
|
background-color: #ff962e;
|
||||||
|
}
|
||||||
|
.priority-btn_5 {
|
||||||
|
border-bottom: 3px solid #4720c4;
|
||||||
|
background-color: #a464ff;
|
||||||
|
}
|
||||||
|
.priority-btn_5:hover {
|
||||||
|
border-bottom: 3px solid #4720c4;
|
||||||
|
color: white;
|
||||||
|
background-color: #a464ff;
|
||||||
|
}
|
||||||
|
.priority-btn_6 {
|
||||||
|
border-bottom: 3px solid #515151;
|
||||||
|
background-color: #a3a3a3;
|
||||||
|
}
|
||||||
|
.priority-btn_6:hover {
|
||||||
|
border-bottom: 3px solid #515151;
|
||||||
|
color: white;
|
||||||
|
background-color: #a3a3a3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<template>
|
||||||
|
<div :disabled="commandDisabled">
|
||||||
|
<a-tag
|
||||||
|
v-for="item in props.tags"
|
||||||
|
:key="item"
|
||||||
|
size="small"
|
||||||
|
:color="getResourceColor(item)"
|
||||||
|
@click="editResource(item)"
|
||||||
|
>{{ item }}</a-tag
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="TagBox" setup>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { isDisableNode, isTagEnable } from '../../script/tool/utils';
|
||||||
|
import { tagProps } from '../../props';
|
||||||
|
|
||||||
|
const props = defineProps(tagProps);
|
||||||
|
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
const commandDisabled = ref(true);
|
||||||
|
|
||||||
|
const isDisable = (): boolean => {
|
||||||
|
if (Object.keys(minder).length === 0 || !minder.on) return true;
|
||||||
|
if (isDisableNode(minder) && !isTagEnable(minder)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (props.tagDisableCheck) {
|
||||||
|
return props.tagDisableCheck();
|
||||||
|
}
|
||||||
|
return !!minder.queryCommandState && minder.queryCommandState('resource') === -1;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
minder.on('selectionchange', () => {
|
||||||
|
commandDisabled.value = isDisable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function getResourceColor(resource: string) {
|
||||||
|
if (minder.getResourceColor) {
|
||||||
|
return minder.getResourceColor(resource).toHEX();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function editResource(resourceName: string) {
|
||||||
|
if (commandDisabled.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (props.tagEditCheck) {
|
||||||
|
if (!props.tagEditCheck(resourceName)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!resourceName || !/\S/.test(resourceName)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const origin = window.minder.queryCommandValue('resource');
|
||||||
|
const index = origin.indexOf(resourceName);
|
||||||
|
// 先删除排他的标签
|
||||||
|
if (props.distinctTags.indexOf(resourceName) > -1) {
|
||||||
|
for (let i = 0; i < origin.length; i++) {
|
||||||
|
if (props.distinctTags.indexOf(origin[i]) > -1) {
|
||||||
|
origin.splice(i, 1);
|
||||||
|
i--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (index !== -1) {
|
||||||
|
origin.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
origin.push(resourceName);
|
||||||
|
}
|
||||||
|
window.minder.execCommand('resource', origin);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.arco-tag {
|
||||||
|
margin-right: 4px;
|
||||||
|
border: 0;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.arco-tag:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.arco-tag:first-child {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
.add-btn {
|
||||||
|
padding: 0 !important;
|
||||||
|
width: 36px;
|
||||||
|
height: 24px;
|
||||||
|
border-style: dashed !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="arrange-group">
|
||||||
|
<div class="arrange menu-btn" :disabled="disabled" @click="resetlayout">
|
||||||
|
<span class="tab-icons" />
|
||||||
|
<span class="label">
|
||||||
|
{{ t('minder.menu.arrange.arrange_layout') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="Arrange" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const disabled = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return window.minder.queryCommandState && window.minder.queryCommandState('resetlayout') === -1;
|
||||||
|
});
|
||||||
|
|
||||||
|
function resetlayout() {
|
||||||
|
if (window.minder.queryCommandState('resetlayout') !== -1) {
|
||||||
|
window.minder.execCommand('resetlayout');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
<template>
|
||||||
|
<div class="font-group">
|
||||||
|
<a-select
|
||||||
|
v-model="fontFamilyDefaultValue"
|
||||||
|
:placeholder="t('minder.menu.font.font')"
|
||||||
|
class="font-family-select"
|
||||||
|
:disabled="disabledFont"
|
||||||
|
size="mini"
|
||||||
|
@change="execCommandFontFamily"
|
||||||
|
>
|
||||||
|
<a-option
|
||||||
|
v-for="item in fontFamilys"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.value"
|
||||||
|
:style="{ 'font-family': item.value }"
|
||||||
|
/>
|
||||||
|
</a-select>
|
||||||
|
<a-select
|
||||||
|
v-model="fontSizeDefaultValue"
|
||||||
|
:placeholder="t('minder.menu.font.size')"
|
||||||
|
class="font-size-select"
|
||||||
|
:disabled="disabledFontSize"
|
||||||
|
size="mini"
|
||||||
|
@change="execCommandFontSize"
|
||||||
|
>
|
||||||
|
<a-option
|
||||||
|
v-for="item in fontSizes"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.label.toString()"
|
||||||
|
:value="item.value"
|
||||||
|
:style="{
|
||||||
|
'font-size': item.value + 'px',
|
||||||
|
'height': 2 * item.value + 'px',
|
||||||
|
'line-height': 2 * item.value + 'px',
|
||||||
|
'padding': 0,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</a-select>
|
||||||
|
<span class="font-btn">
|
||||||
|
<span
|
||||||
|
class="menu-btn tab-icons font-bold"
|
||||||
|
:class="{ selected: boldSelected }"
|
||||||
|
:disabled="disabledBold"
|
||||||
|
@click="execCommandFontStyle('bold')"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="font-italic menu-btn tab-icons"
|
||||||
|
:class="{ selected: italicSelected }"
|
||||||
|
:disabled="disabledItalic"
|
||||||
|
@click="execCommandFontStyle('italic')"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="StyleOpreation" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const fontFamilys = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
value: '宋体,SimSun',
|
||||||
|
name: '宋体',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
value: '微软雅黑,Microsoft YaHei',
|
||||||
|
name: '微软雅黑',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
value: '楷体,楷体_GB2312,SimKai',
|
||||||
|
name: '楷体',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
value: '黑体, SimHei',
|
||||||
|
name: '黑体',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
value: '隶书, SimLi',
|
||||||
|
name: '隶书',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
value: 'andale mono',
|
||||||
|
name: 'Andale Mono',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
value: 'arial,helvetica,sans-serif',
|
||||||
|
name: 'Arial',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
value: 'arial black,avant garde',
|
||||||
|
name: 'arialBlack',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
value: 'comic sans ms',
|
||||||
|
name: 'comic Sans Ms',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
value: 'impact,chicago',
|
||||||
|
name: 'Impact',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
value: 'times new roman',
|
||||||
|
name: 'times New Roman',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
value: 'sans-serif',
|
||||||
|
name: 'Sans-Serif',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const fontSizes = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
value: 10,
|
||||||
|
label: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
value: 12,
|
||||||
|
label: 12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
value: 16,
|
||||||
|
label: 16,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
value: 18,
|
||||||
|
label: 18,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
value: 24,
|
||||||
|
label: 24,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
value: 32,
|
||||||
|
label: 32,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
value: 48,
|
||||||
|
label: 48,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const fontFamilyDefaultValue = ref('');
|
||||||
|
const fontSizeDefaultValue = ref('');
|
||||||
|
|
||||||
|
const disabledFont = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentFontFamily = window.minder.queryCommandValue('fontfamily');
|
||||||
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||||
|
fontFamilyDefaultValue.value = currentFontFamily || t('minder.menu.font.font');
|
||||||
|
return window.minder.queryCommandState('fontfamily') === -1;
|
||||||
|
});
|
||||||
|
const disabledFontSize = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||||
|
fontSizeDefaultValue.value = window.minder.queryCommandValue('fontsize') || t('minder.menu.font.size');
|
||||||
|
return window.minder.queryCommandState('fontsize') === -1;
|
||||||
|
});
|
||||||
|
const disabledBold = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return window.minder.queryCommandState('bold') === -1;
|
||||||
|
});
|
||||||
|
const disabledItalic = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return window.minder.queryCommandState('italic') === -1;
|
||||||
|
});
|
||||||
|
const boldSelected = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return window.minder.queryCommandState('bold') === -1;
|
||||||
|
});
|
||||||
|
const italicSelected = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return window.minder.queryCommandState('italic') === -1;
|
||||||
|
});
|
||||||
|
|
||||||
|
function execCommandFontFamily(
|
||||||
|
value: string | number | Record<string, any> | (string | number | Record<string, any>)[]
|
||||||
|
) {
|
||||||
|
if (value === t('minder.menu.font.font')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.minder.execCommand('fontfamily', value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function execCommandFontSize(
|
||||||
|
value: string | number | Record<string, any> | (string | number | Record<string, any>)[]
|
||||||
|
) {
|
||||||
|
if (typeof value !== 'number') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.minder.execCommand('fontsize', value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function execCommandFontStyle(style: string) {
|
||||||
|
switch (style) {
|
||||||
|
case 'bold':
|
||||||
|
if (window.minder.queryCommandState('bold') !== -1) {
|
||||||
|
window.minder.execCommand('bold');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'italic':
|
||||||
|
if (window.minder.queryCommandState('italic') !== -1) {
|
||||||
|
window.minder.execCommand('italic');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.font-group {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.font-btn {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<template>
|
||||||
|
<div class="mold-group" :disabled="disabled">
|
||||||
|
<a-dropdown class="toggle" @select="handleCommand">
|
||||||
|
<div>
|
||||||
|
<span class="dropdown-toggle mold-icons menu-btn" :class="'mold-' + (moldIndex + 1)" />
|
||||||
|
<span class="dropdown-link">
|
||||||
|
<icon-caret-down />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<template #content>
|
||||||
|
<a-doption class="dropdown-item mold-icons mold-1" :value="1" />
|
||||||
|
<a-doption class="dropdown-item mold-icons mold-2" :value="2" />
|
||||||
|
<a-doption class="dropdown-item mold-icons mold-3" :value="3" />
|
||||||
|
<a-doption class="dropdown-item mold-icons mold-4" :value="4" />
|
||||||
|
<a-doption class="dropdown-item mold-icons mold-5" :value="5" />
|
||||||
|
<a-doption class="dropdown-item mold-icons mold-6" :value="6" />
|
||||||
|
</template>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="Mold" setup>
|
||||||
|
import { computed, nextTick, onMounted, ref } from 'vue';
|
||||||
|
import { moleProps } from '../../props';
|
||||||
|
|
||||||
|
const props = defineProps(moleProps);
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'moldChange', data: number): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const moldIndex = ref(0);
|
||||||
|
|
||||||
|
const disabled = computed(() => {
|
||||||
|
try {
|
||||||
|
if (!window.minder) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return window.minder.queryCommandState('template') === -1;
|
||||||
|
});
|
||||||
|
|
||||||
|
const templateList = computed(() => window.kityminder.Minder.getTemplateList());
|
||||||
|
|
||||||
|
function handleCommand(value: string | number | Record<string, any> | undefined) {
|
||||||
|
moldIndex.value = value as number;
|
||||||
|
window.minder.execCommand('template', Object.keys(templateList.value)[value as number]);
|
||||||
|
emit('moldChange', value as number);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => handleCommand(props.defaultMold));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.toggle {
|
||||||
|
.arco-dropdown-list {
|
||||||
|
display: grid;
|
||||||
|
padding: 5px;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dropdown-toggle .mold-icons,
|
||||||
|
.mold-icons {
|
||||||
|
background-image: url('@/assets/images/minder/mold.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.mold-group {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 80px;
|
||||||
|
.dropdown-toggle {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dropdown-link {
|
||||||
|
position: absolute;
|
||||||
|
right: 3px;
|
||||||
|
bottom: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.mold-loop(@i) when (@i > 0) {
|
||||||
|
.mold-@{i} {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-position: (1 - @i) * 50px 0;
|
||||||
|
}
|
||||||
|
.mold-loop(@i - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mold-loop(6);
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<div class="style-group">
|
||||||
|
<div class="clear-style-btn menu-btn" :disabled="disabled" @click="clearstyle">
|
||||||
|
<span class="tab-icons" />
|
||||||
|
<span class="label">
|
||||||
|
{{ t('minder.menu.style.clear') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="copy-paste-panel" @click="copystyle">
|
||||||
|
<div class="copy-style menu-btn" :disabled="disabled">
|
||||||
|
<span class="tab-icons" />
|
||||||
|
<span class="label">
|
||||||
|
{{ t('minder.menu.style.copy') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="paste-style menu-btn" :disabled="disabled" @click="pastestyle">
|
||||||
|
<span class="tab-icons" />
|
||||||
|
<span class="label">
|
||||||
|
{{ t('minder.menu.style.paste') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="StyleOpreation" setup>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from '@/hooks/useI18n';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
let minder = reactive<any>({});
|
||||||
|
const disabled = ref(true);
|
||||||
|
|
||||||
|
function checkDisabled() {
|
||||||
|
try {
|
||||||
|
if (Object.keys(minder).length === 0) return false;
|
||||||
|
} catch (e) {
|
||||||
|
// 如果window的还没挂载minder，先捕捉undefined异常
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const nodes = minder.getSelectedNodes && minder.getSelectedNodes();
|
||||||
|
disabled.value = nodes === null || nodes.length === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
minder = window.minder;
|
||||||
|
minder.on('selectionchange', () => {
|
||||||
|
checkDisabled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function clearstyle() {
|
||||||
|
if (minder.queryCommandState && minder.execCommand && minder.queryCommandState('clearstyle') !== -1) {
|
||||||
|
minder.execCommand('clearstyle');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function copystyle() {
|
||||||
|
if (minder.queryCommandState && minder.execCommand && minder.queryCommandState('copystyle') !== -1) {
|
||||||
|
minder.execCommand('copystyle');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function pastestyle() {
|
||||||
|
if (minder.queryCommandState && minder.execCommand && minder.queryCommandState('pastestyle') !== -1) {
|
||||||
|
minder.execCommand('pastestyle');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.mold-dropdown-list .mold-icons,
|
||||||
|
.mold-icons {
|
||||||
|
background-image: url('@/assets/images/minder/mold.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div class="menu-container">
|
||||||
|
<mold :default-mold="props.defaultMold" @mold-change="handleMoldChange" />
|
||||||
|
<arrange />
|
||||||
|
<style-operation />
|
||||||
|
<font-operation />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="viewMenu" setup>
|
||||||
|
import mold from './mold.vue';
|
||||||
|
import arrange from './arrange.vue';
|
||||||
|
import styleOperation from './styleOperation.vue';
|
||||||
|
import fontOperation from './fontOperation.vue';
|
||||||
|
import { moleProps } from '../../props';
|
||||||
|
|
||||||
|
const props = defineProps(moleProps);
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'moldChange', data: number): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
function handleMoldChange(data: number) {
|
||||||
|
emit('moldChange', data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.menu-container {
|
||||||
|
height: 60px;
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div class="main-container">
|
||||||
|
<header-menu
|
||||||
|
:sequence-enable="props.sequenceEnable"
|
||||||
|
:tag-enable="props.tagEnable"
|
||||||
|
:progress-enable="props.progressEnable"
|
||||||
|
:priority-count="props.priorityCount"
|
||||||
|
:priority-prefix="props.priorityPrefix"
|
||||||
|
:priority-start-with-zero="props.priorityStartWithZero"
|
||||||
|
:tags="props.tags"
|
||||||
|
:move-enable="props.moveEnable"
|
||||||
|
:tag-edit-check="props.tagEditCheck"
|
||||||
|
:tag-disable-check="props.tagDisableCheck"
|
||||||
|
:priority-disable-check="props.priorityDisableCheck"
|
||||||
|
:distinct-tags="props.distinctTags"
|
||||||
|
:default-mold="props.defaultMold"
|
||||||
|
:del-confirm="props.delConfirm"
|
||||||
|
@mold-change="handleMoldChange"
|
||||||
|
/>
|
||||||
|
<main-editor
|
||||||
|
:disabled="props.disabled"
|
||||||
|
:sequence-enable="props.sequenceEnable"
|
||||||
|
:tag-enable="props.tagEnable"
|
||||||
|
:move-enable="props.moveEnable"
|
||||||
|
:progress-enable="props.progressEnable"
|
||||||
|
:import-json="props.importJson"
|
||||||
|
:height="props.height"
|
||||||
|
:tags="props.tags"
|
||||||
|
:distinct-tags="props.distinctTags"
|
||||||
|
:tag-edit-check="props.tagEditCheck"
|
||||||
|
:tag-disable-check="props.tagDisableCheck"
|
||||||
|
:priority-count="props.priorityCount"
|
||||||
|
:priority-prefix="props.priorityPrefix"
|
||||||
|
:priority-start-with-zero="props.priorityStartWithZero"
|
||||||
|
@after-mount="emit('afterMount')"
|
||||||
|
@save="save"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="minderEditor" setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import headerMenu from './main/header.vue';
|
||||||
|
import mainEditor from './main/mainEditor.vue';
|
||||||
|
import { editMenuProps, mainEditorProps, moleProps, priorityProps, tagProps, delProps } from './props';
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'moldChange', data: number): void;
|
||||||
|
(e: 'save', data: Record<string, any>): void;
|
||||||
|
(e: 'afterMount'): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
...editMenuProps,
|
||||||
|
...mainEditorProps,
|
||||||
|
...moleProps,
|
||||||
|
...priorityProps,
|
||||||
|
...tagProps,
|
||||||
|
...delProps,
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
window.minderProps = props;
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleMoldChange(data: number) {
|
||||||
|
emit('moldChange', data);
|
||||||
|
}
|
||||||
|
function save(data: Record<string, any>) {
|
||||||
|
emit('save', data);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
/**
|
||||||
|
* Api 列表
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const mainEditorProps = {
|
||||||
|
importJson: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
root: {
|
||||||
|
data: {
|
||||||
|
text: 'test111',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
text: '地图',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
text: '百科',
|
||||||
|
expandState: 'collapse',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
template: 'default',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 500,
|
||||||
|
},
|
||||||
|
disabled: Boolean,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const priorityProps = {
|
||||||
|
priorityCount: {
|
||||||
|
type: Number,
|
||||||
|
default: 4,
|
||||||
|
validator: (value: number) => {
|
||||||
|
// 优先级最多支持 9 个级别
|
||||||
|
return value <= 9;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
priorityStartWithZero: {
|
||||||
|
// 优先级是否从0开始
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
priorityPrefix: {
|
||||||
|
// 优先级显示的前缀
|
||||||
|
type: String,
|
||||||
|
default: 'P',
|
||||||
|
},
|
||||||
|
priorityDisableCheck: Function,
|
||||||
|
operators: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const tagProps = {
|
||||||
|
tags: {
|
||||||
|
// 自定义标签
|
||||||
|
type: Array<string>,
|
||||||
|
default() {
|
||||||
|
return [] as string[];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
distinctTags: {
|
||||||
|
// 个别标签二选一
|
||||||
|
type: Array<string>,
|
||||||
|
default() {
|
||||||
|
return [] as string[];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagDisableCheck: Function,
|
||||||
|
tagEditCheck: Function,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const editMenuProps = {
|
||||||
|
sequenceEnable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
tagEnable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
progressEnable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
moveEnable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const moleProps = {
|
||||||
|
// 默认样式
|
||||||
|
defaultMold: {
|
||||||
|
type: Number,
|
||||||
|
default: 3,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const delProps = {
|
||||||
|
delConfirm: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import '@7polo/kity/dist/kity';
|
||||||
|
import 'hotbox-minder/hotbox';
|
||||||
|
import '@7polo/kityminder-core';
|
||||||
|
import container from './runtime/container';
|
||||||
|
import fsm from './runtime/fsm';
|
||||||
|
import minder from './runtime/minder';
|
||||||
|
import receiver from './runtime/receiver';
|
||||||
|
import hotbox from './runtime/hotbox';
|
||||||
|
import input from './runtime/input';
|
||||||
|
import clipboardMimetype from './runtime/clipboard-mimetype';
|
||||||
|
import clipboard from './runtime/clipboard';
|
||||||
|
import drag from './runtime/drag';
|
||||||
|
import node from './runtime/node';
|
||||||
|
import history from './runtime/history';
|
||||||
|
import jumping from './runtime/jumping';
|
||||||
|
import priority from './runtime/priority';
|
||||||
|
import progress from './runtime/progress';
|
||||||
|
import exportsRuntime from './runtime/exports';
|
||||||
|
import tag from './runtime/tag';
|
||||||
|
|
||||||
|
type EditMenuProps = {
|
||||||
|
sequenceEnable: boolean;
|
||||||
|
tagEnable: boolean;
|
||||||
|
progressEnable: boolean;
|
||||||
|
moveEnable: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Runtime = {
|
||||||
|
name: string;
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
call: (thisArg: KMEditor, editor: KMEditor) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const runtimes: Runtime[] = [];
|
||||||
|
|
||||||
|
function assemble(runtime: Runtime) {
|
||||||
|
runtimes.push(runtime);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEnable(editMenuProps: EditMenuProps, runtime: Runtime) {
|
||||||
|
switch (runtime.name) {
|
||||||
|
case 'PriorityRuntime':
|
||||||
|
return editMenuProps.sequenceEnable === true;
|
||||||
|
case 'TagRuntime':
|
||||||
|
return editMenuProps.tagEnable === true;
|
||||||
|
case 'ProgressRuntime':
|
||||||
|
return editMenuProps.progressEnable === true;
|
||||||
|
default:
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class KMEditor {
|
||||||
|
public selector: HTMLDivElement | null | string;
|
||||||
|
|
||||||
|
public editMenuProps: EditMenuProps;
|
||||||
|
|
||||||
|
constructor(selector: HTMLDivElement | null | string, editMenuPropsC: EditMenuProps) {
|
||||||
|
this.selector = selector;
|
||||||
|
this.editMenuProps = editMenuPropsC;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
public init() {
|
||||||
|
for (let i = 0; i < runtimes.length; i++) {
|
||||||
|
if (typeof runtimes[i].call === 'function' && isEnable(this.editMenuProps, runtimes[i])) {
|
||||||
|
runtimes[i].call(this, this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assemble(container);
|
||||||
|
assemble(fsm);
|
||||||
|
assemble(minder);
|
||||||
|
assemble(receiver);
|
||||||
|
assemble(hotbox);
|
||||||
|
assemble(input);
|
||||||
|
assemble(clipboardMimetype);
|
||||||
|
assemble(clipboard);
|
||||||
|
assemble(drag);
|
||||||
|
assemble(node);
|
||||||
|
assemble(history);
|
||||||
|
assemble(jumping);
|
||||||
|
assemble(priority);
|
||||||
|
assemble(progress);
|
||||||
|
assemble(exportsRuntime);
|
||||||
|
assemble(tag);
|
||||||
|
|
||||||
|
window.kityminder.Editor = KMEditor;
|
||||||
|
|
||||||
|
export default KMEditor;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Editor from './editor';
|
||||||
|
|
||||||
|
export default window.kityminder.Editor = Editor;
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
const priorities = [
|
||||||
|
{ jp: 1, mp: 'full-1' },
|
||||||
|
{ jp: 2, mp: 'full-2' },
|
||||||
|
{ jp: 3, mp: 'full-3' },
|
||||||
|
{ jp: 4, mp: 'full-4' },
|
||||||
|
{ jp: 5, mp: 'full-5' },
|
||||||
|
{ jp: 6, mp: 'full-6' },
|
||||||
|
{ jp: 7, mp: 'full-7' },
|
||||||
|
{ jp: 8, mp: 'full-8' },
|
||||||
|
];
|
||||||
|
const mmVersion = '<map version="1.0.1">\n';
|
||||||
|
const iconTextPrefix = '<icon BUILTIN="';
|
||||||
|
const iconTextSuffix = '"/>\n';
|
||||||
|
const nodeCreated = '<node CREATED="';
|
||||||
|
const nodeId = '" ID="';
|
||||||
|
const nodeText = '" TEXT="';
|
||||||
|
const nodeSuffix = '">\n';
|
||||||
|
const entityNode = '</node>\n';
|
||||||
|
const entityMap = '</map>';
|
||||||
|
|
||||||
|
function concatNodes(node: any) {
|
||||||
|
let result = '';
|
||||||
|
const datas = node.data;
|
||||||
|
result += nodeCreated + datas.created + nodeId + datas.id + nodeText + datas.text + nodeSuffix;
|
||||||
|
if (datas.priority) {
|
||||||
|
const mapped = priorities.find((d) => {
|
||||||
|
return d.jp === datas.priority;
|
||||||
|
});
|
||||||
|
if (mapped) {
|
||||||
|
result += iconTextPrefix + mapped.mp + iconTextSuffix;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
function traverseJson(node: any) {
|
||||||
|
let result = '';
|
||||||
|
if (!node) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
result += concatNodes(node);
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (const element of node.children) {
|
||||||
|
result += traverseJson(element);
|
||||||
|
result += entityNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportFreeMind(minder: any) {
|
||||||
|
const minds = minder.exportJson();
|
||||||
|
const mmContent = mmVersion + traverseJson(minds.root) + entityNode + entityMap;
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
const blob = new Blob([`\ufeff${mmContent}`], {
|
||||||
|
type: 'text/xml',
|
||||||
|
});
|
||||||
|
link.href = window.URL.createObjectURL(blob);
|
||||||
|
link.download = `${minds.root.data.text}.mm`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-alert, no-console
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { exportFreeMind };
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
function exportJson(minder: any) {
|
||||||
|
const minds = minder.exportJson();
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
const blob = new Blob([`\ufeff${JSON.stringify(minds)}`], {
|
||||||
|
type: 'text/json',
|
||||||
|
});
|
||||||
|
link.href = window.URL.createObjectURL(blob);
|
||||||
|
link.download = `${minds.root.data.text}.json`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { exportJson };
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
/* eslint-disable no-underscore-dangle */
|
||||||
|
const EMPTY_LINE = '';
|
||||||
|
const NOTE_MARK_START = '<!--Note-->';
|
||||||
|
const NOTE_MARK_CLOSE = '<!--/Note-->';
|
||||||
|
|
||||||
|
function _generateHeaderSharp(level: number) {
|
||||||
|
let sharps = '';
|
||||||
|
while (level--) sharps += '#';
|
||||||
|
return sharps;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _build(node: any, level: number) {
|
||||||
|
let lines: string[] = [];
|
||||||
|
|
||||||
|
level = level || 1;
|
||||||
|
|
||||||
|
const sharps = _generateHeaderSharp(level);
|
||||||
|
lines.push(`${sharps} ${node.data.text}`);
|
||||||
|
lines.push(EMPTY_LINE);
|
||||||
|
|
||||||
|
let { note } = node.data;
|
||||||
|
if (note) {
|
||||||
|
const hasSharp = /^#/.test(note);
|
||||||
|
if (hasSharp) {
|
||||||
|
lines.push(NOTE_MARK_START);
|
||||||
|
note = note.replace(/^#+/gm, ($0: string) => {
|
||||||
|
return sharps + $0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
lines.push(note);
|
||||||
|
if (hasSharp) {
|
||||||
|
lines.push(NOTE_MARK_CLOSE);
|
||||||
|
}
|
||||||
|
lines.push(EMPTY_LINE);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.children)
|
||||||
|
node.children.forEach((child: any) => {
|
||||||
|
lines = lines.concat(_build(child, level + 1));
|
||||||
|
});
|
||||||
|
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
|
||||||
|
function encode(json: any) {
|
||||||
|
return _build(json, 1).join('\n');
|
||||||
|
}
|
||||||
|
function exportMarkdown(minder: any) {
|
||||||
|
const minds = minder.exportJson();
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
const blob = new Blob([`\ufeff${encode(minds.root)}`], {
|
||||||
|
type: 'markdown',
|
||||||
|
});
|
||||||
|
link.href = window.URL.createObjectURL(blob);
|
||||||
|
link.download = `${minds.root.data.text}.md`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-alert
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { exportMarkdown };
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
const LINE_ENDING = '\r';
|
||||||
|
const TAB_CHAR = '\t';
|
||||||
|
|
||||||
|
function repeat(s: string, n: number) {
|
||||||
|
let result = '';
|
||||||
|
while (n--) result += s;
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function encode(json: any, level: number) {
|
||||||
|
let local = '';
|
||||||
|
level = level || 0;
|
||||||
|
local += repeat(TAB_CHAR, level);
|
||||||
|
local += json.data.text + LINE_ENDING;
|
||||||
|
if (json.children) {
|
||||||
|
json.children.forEach((child: any) => {
|
||||||
|
local += encode(child, level + 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return local;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportTextTree(minder: any) {
|
||||||
|
const minds = minder.exportJson();
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
const blob = new Blob([`\ufeff${encode(minds.root, 0)}`], {
|
||||||
|
type: 'text/plain',
|
||||||
|
});
|
||||||
|
link.href = window.URL.createObjectURL(blob);
|
||||||
|
link.download = `${minds.root.data.text}.txt`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { exportTextTree };
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
/* eslint-disable prefer-const */
|
||||||
|
const DOMURL = window.URL || window.webkitURL || window;
|
||||||
|
|
||||||
|
function downloadImage(fileURI: string, fileName: string) {
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = fileURI;
|
||||||
|
link.download = `${fileName}.png`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadImage(url: string) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const image = document.createElement('img');
|
||||||
|
image.onload = function () {
|
||||||
|
resolve(this);
|
||||||
|
};
|
||||||
|
image.onerror = (err) => {
|
||||||
|
reject(err);
|
||||||
|
};
|
||||||
|
image.crossOrigin = '';
|
||||||
|
image.src = url;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSVGInfo(minder: any) {
|
||||||
|
const paper = minder.getPaper();
|
||||||
|
let svgXml;
|
||||||
|
let $svg;
|
||||||
|
const renderContainer = minder.getRenderContainer();
|
||||||
|
const renderBox = renderContainer.getRenderBox();
|
||||||
|
const width = renderBox.width + 1;
|
||||||
|
const height = renderBox.height + 1;
|
||||||
|
let blob;
|
||||||
|
let svgUrl;
|
||||||
|
// 保存原始变换，并且移动到合适的位置
|
||||||
|
const paperTransform = paper.shapeNode.getAttribute('transform');
|
||||||
|
paper.shapeNode.setAttribute('transform', 'translate(0.5, 0.5)');
|
||||||
|
renderContainer.translate(-renderBox.x, -renderBox.y);
|
||||||
|
|
||||||
|
// 获取当前的 XML 代码
|
||||||
|
svgXml = paper.container.innerHTML;
|
||||||
|
|
||||||
|
// 回复原始变换及位置
|
||||||
|
renderContainer.translate(renderBox.x, renderBox.y);
|
||||||
|
paper.shapeNode.setAttribute('transform', paperTransform);
|
||||||
|
|
||||||
|
// 过滤内容
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.innerHTML = svgXml;
|
||||||
|
$svg = el.getElementsByTagName('svg');
|
||||||
|
|
||||||
|
const index = $svg.length - 1;
|
||||||
|
|
||||||
|
$svg[index].setAttribute('width', renderBox.width + 1);
|
||||||
|
$svg[index].setAttribute('height', renderBox.height + 1);
|
||||||
|
$svg[index].setAttribute('style', 'font-family: Arial, "Microsoft Yahei","Heiti SC";');
|
||||||
|
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.appendChild($svg[index]);
|
||||||
|
svgXml = div.innerHTML;
|
||||||
|
|
||||||
|
// Dummy IE
|
||||||
|
svgXml = svgXml.replace(
|
||||||
|
' xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:ns1:xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:NS2="" NS2:xmlns:ns1=""',
|
||||||
|
''
|
||||||
|
);
|
||||||
|
|
||||||
|
// svg 含有 符号导出报错 Entity 'nbsp' not defined
|
||||||
|
svgXml = svgXml.replace(/ /g, ' ');
|
||||||
|
|
||||||
|
blob = new Blob([svgXml], {
|
||||||
|
type: 'image/svg+xml',
|
||||||
|
});
|
||||||
|
|
||||||
|
svgUrl = DOMURL.createObjectURL(blob);
|
||||||
|
|
||||||
|
return {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
dataUrl: svgUrl,
|
||||||
|
xml: svgXml,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function fillBackground(ctx: any, style: CanvasPattern | null | undefined, canvas: any) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.fillStyle = style;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawImage(ctx: any, image: any, x: number, y: number) {
|
||||||
|
ctx.drawImage(image, x, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateDataUrl(canvas: any) {
|
||||||
|
try {
|
||||||
|
const url = canvas.toDataURL('png');
|
||||||
|
return url;
|
||||||
|
} catch (e) {
|
||||||
|
throw new Error('当前浏览器版本不支持导出 PNG 功能，请尝试升级到最新版本！');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportPNGImage(minder: any) {
|
||||||
|
/* 绘制 PNG 的画布及上下文 */
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
/* 尝试获取背景图片 URL 或背景颜色 */
|
||||||
|
const bgDeclare = minder.getStyle('background').toString();
|
||||||
|
const bgUrl = /url\((.+)\)/.exec(bgDeclare);
|
||||||
|
const bgColor = window.kity.Color.parse(bgDeclare);
|
||||||
|
|
||||||
|
/* 获取 SVG 文件内容 */
|
||||||
|
const svgInfo = getSVGInfo(minder);
|
||||||
|
const { width } = svgInfo;
|
||||||
|
const { height } = svgInfo;
|
||||||
|
const svgDataUrl = svgInfo.dataUrl;
|
||||||
|
|
||||||
|
/* 画布的填充大小 */
|
||||||
|
const padding = 20;
|
||||||
|
|
||||||
|
canvas.width = width + padding * 2;
|
||||||
|
canvas.height = height + padding * 2;
|
||||||
|
|
||||||
|
function drawSVG() {
|
||||||
|
const mind = window.editor.minder.exportJson();
|
||||||
|
if (typeof window.canvg !== 'undefined') {
|
||||||
|
return window.canvg(canvas, svgInfo.xml, {
|
||||||
|
ignoreMouse: true,
|
||||||
|
ignoreAnimation: true,
|
||||||
|
ignoreDimensions: true,
|
||||||
|
ignoreClear: true,
|
||||||
|
offsetX: padding,
|
||||||
|
offsetY: padding,
|
||||||
|
renderCallback() {
|
||||||
|
downloadImage(generateDataUrl(canvas), mind.root.data.text);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return loadImage(svgDataUrl).then((svgImage) => {
|
||||||
|
drawImage(ctx, svgImage, padding, padding);
|
||||||
|
DOMURL.revokeObjectURL(svgDataUrl);
|
||||||
|
downloadImage(generateDataUrl(canvas), mind.root.data.text);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bgUrl) {
|
||||||
|
loadImage(bgUrl[1]).then((image) => {
|
||||||
|
fillBackground(ctx, ctx?.createPattern(image as CanvasImageSource, 'repeat'), canvas);
|
||||||
|
drawSVG();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
fillBackground(ctx, bgColor.toString(), canvas);
|
||||||
|
drawSVG();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { exportPNGImage };
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/* eslint-disable no-bitwise */
|
||||||
|
/* eslint-disable prefer-const */
|
||||||
|
|
||||||
|
function downloadSVG(fileURI: string, fileName: string) {
|
||||||
|
try {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = fileURI;
|
||||||
|
link.download = `${fileName}.svg`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportSVG(minder: any) {
|
||||||
|
const paper = minder.getPaper();
|
||||||
|
const paperTransform = paper.shapeNode.getAttribute('transform');
|
||||||
|
let svgXml;
|
||||||
|
let $svg;
|
||||||
|
|
||||||
|
const renderContainer = minder.getRenderContainer();
|
||||||
|
const renderBox = renderContainer.getRenderBox();
|
||||||
|
const { width, height } = renderBox;
|
||||||
|
const padding = 20;
|
||||||
|
|
||||||
|
paper.shapeNode.setAttribute('transform', 'translate(0.5, 0.5)');
|
||||||
|
svgXml = paper.container.innerHTML;
|
||||||
|
paper.shapeNode.setAttribute('transform', paperTransform);
|
||||||
|
|
||||||
|
const { document } = window;
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.innerHTML = svgXml;
|
||||||
|
$svg = el.getElementsByTagName('svg');
|
||||||
|
|
||||||
|
const index = $svg.length - 1;
|
||||||
|
|
||||||
|
$svg[index].setAttribute('width', width + padding * 2 || 0);
|
||||||
|
$svg[index].setAttribute('height', height + padding * 2 || 0);
|
||||||
|
$svg[index].setAttribute(
|
||||||
|
'style',
|
||||||
|
`font-family: Arial, "Microsoft Yahei", "Heiti SC"; background: ${minder.getStyle('background')}`
|
||||||
|
);
|
||||||
|
|
||||||
|
$svg[index].setAttribute(
|
||||||
|
'viewBox',
|
||||||
|
[
|
||||||
|
(renderBox.x - padding) | 0,
|
||||||
|
(renderBox.y - padding) | 0,
|
||||||
|
(width + padding * 2) | 0,
|
||||||
|
(height + padding * 2) | 0,
|
||||||
|
].join(' ')
|
||||||
|
);
|
||||||
|
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.appendChild($svg[index]);
|
||||||
|
svgXml = div.innerHTML;
|
||||||
|
svgXml = svgXml.replace(/ /g, ' ');
|
||||||
|
|
||||||
|
const blob = new Blob([svgXml], {
|
||||||
|
type: 'image/svg+xml',
|
||||||
|
});
|
||||||
|
|
||||||
|
const DOMURL = window.URL || window.webkitURL || window;
|
||||||
|
const svgUrl = DOMURL.createObjectURL(blob);
|
||||||
|
|
||||||
|
const mind = window.editor.minder.exportJson();
|
||||||
|
downloadSVG(svgUrl, mind.root.data.text);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { exportSVG };
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
interface MimeTypes {
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Signatures {
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MimeType = () => {
|
||||||
|
const SPLITOR = '\uFEFF';
|
||||||
|
const MIMETYPE: MimeTypes = {
|
||||||
|
'application/km': '\uFFFF',
|
||||||
|
};
|
||||||
|
const SIGN: Signatures = {
|
||||||
|
'\uFEFF': 'SPLITOR',
|
||||||
|
'\uFFFF': 'application/km',
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSpitor(): string {
|
||||||
|
return SPLITOR;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPureText(text: string): boolean {
|
||||||
|
// eslint-disable-next-line no-bitwise
|
||||||
|
return !~text.indexOf(getSpitor());
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPureText(text: string): string {
|
||||||
|
if (isPureText(text)) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
return text.split(getSpitor())[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMimeType(sign?: string): MimeTypes | string | null {
|
||||||
|
if (sign !== undefined) {
|
||||||
|
return SIGN[sign] || null;
|
||||||
|
}
|
||||||
|
return MIMETYPE;
|
||||||
|
}
|
||||||
|
|
||||||
|
function whichMimeType(text: string): MimeTypes | string | null {
|
||||||
|
if (isPureText(text)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return getMimeType(text.split(getSpitor())[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function process(mimetype: string | false, text: string): string {
|
||||||
|
if (!isPureText(text)) {
|
||||||
|
const _mimetype = whichMimeType(text);
|
||||||
|
if (!_mimetype) {
|
||||||
|
throw new Error('unknown mimetype!');
|
||||||
|
}
|
||||||
|
text = getPureText(text);
|
||||||
|
}
|
||||||
|
if (mimetype === false) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
return mimetype + SPLITOR + text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function registMimeTypeProtocol(type: string, sign: string): void {
|
||||||
|
if (sign && SIGN[sign]) {
|
||||||
|
throw new Error('sign has registered!');
|
||||||
|
}
|
||||||
|
if (type && !!MIMETYPE[type]) {
|
||||||
|
throw new Error('mimetype has registered!');
|
||||||
|
}
|
||||||
|
SIGN[sign] = type;
|
||||||
|
MIMETYPE[type] = sign;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMimeTypeProtocol(type: string, text?: string): any {
|
||||||
|
const mimetype = MIMETYPE[type] || false;
|
||||||
|
|
||||||
|
if (text === undefined) {
|
||||||
|
return process.bind(null, mimetype);
|
||||||
|
}
|
||||||
|
|
||||||
|
return process(mimetype, text);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
registMimeTypeProtocol,
|
||||||
|
getMimeTypeProtocol,
|
||||||
|
getSpitor,
|
||||||
|
getMimeType,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const MimeTypeRuntime = function r(this: any) {
|
||||||
|
if (this.minder.supportClipboardEvent && !window.kity.Browser.gecko) {
|
||||||
|
this.MimeType = MimeType();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MimeTypeRuntime;
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
import { markDeleteNode, resetNodes } from '../tool/utils';
|
||||||
|
|
||||||
|
interface INode {
|
||||||
|
getLevel(): number;
|
||||||
|
isAncestorOf(node: INode): boolean;
|
||||||
|
appendChild(node: INode): INode;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IData {
|
||||||
|
getRegisterProtocol(protocol: string): {
|
||||||
|
encode: (nodes: Array<INode>) => Array<INode>;
|
||||||
|
decode: (nodes: Array<INode>) => Array<INode>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICliboardEvent extends ClipboardEvent {
|
||||||
|
clipboardData: DataTransfer;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ClipboardRuntime(this: any) {
|
||||||
|
const { minder } = this;
|
||||||
|
const { receiver } = this;
|
||||||
|
const Data: IData = window.kityminder.data;
|
||||||
|
|
||||||
|
if (!minder.supportClipboardEvent || window.kity.Browser.gecko) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const kmencode = this.MimeType.getMimeTypeProtocol('application/km');
|
||||||
|
const { decode } = Data.getRegisterProtocol('json');
|
||||||
|
let _selectedNodes: Array<INode> = [];
|
||||||
|
|
||||||
|
function encode(nodes: Array<INode>): string {
|
||||||
|
const _nodes = [];
|
||||||
|
for (let i = 0, l = nodes.length; i < l; i++) {
|
||||||
|
_nodes.push(minder.exportNode(nodes[i]));
|
||||||
|
}
|
||||||
|
return kmencode(Data.getRegisterProtocol('json').encode(_nodes));
|
||||||
|
}
|
||||||
|
|
||||||
|
const beforeCopy = (e: ICliboardEvent) => {
|
||||||
|
if (document.activeElement === receiver.element) {
|
||||||
|
const clipBoardEvent = e;
|
||||||
|
const state = this.fsm.state();
|
||||||
|
|
||||||
|
switch (state) {
|
||||||
|
case 'input': {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'normal': {
|
||||||
|
const nodes = [...minder.getSelectedNodes()];
|
||||||
|
if (nodes.length) {
|
||||||
|
if (nodes.length > 1) {
|
||||||
|
let targetLevel;
|
||||||
|
nodes.sort((a: any, b: any) => {
|
||||||
|
return a.getLevel() - b.getLevel();
|
||||||
|
});
|
||||||
|
// eslint-disable-next-line prefer-const
|
||||||
|
targetLevel = nodes[0].getLevel();
|
||||||
|
if (targetLevel !== nodes[nodes.length - 1].getLevel()) {
|
||||||
|
let pnode;
|
||||||
|
let idx = 0;
|
||||||
|
const l = nodes.length;
|
||||||
|
let pidx = l - 1;
|
||||||
|
|
||||||
|
pnode = nodes[pidx];
|
||||||
|
|
||||||
|
while (pnode.getLevel() !== targetLevel) {
|
||||||
|
idx = 0;
|
||||||
|
while (idx < l && nodes[idx].getLevel() === targetLevel) {
|
||||||
|
if (nodes[idx].isAncestorOf(pnode)) {
|
||||||
|
nodes.splice(pidx, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
idx++;
|
||||||
|
}
|
||||||
|
pidx--;
|
||||||
|
pnode = nodes[pidx];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const str = encode(nodes);
|
||||||
|
clipBoardEvent.clipboardData.setData('text/plain', str);
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const beforeCut = (e: ClipboardEvent) => {
|
||||||
|
const { activeElement } = document;
|
||||||
|
if (activeElement === receiver.element) {
|
||||||
|
if (minder.getStatus() !== 'normal') {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const clipBoardEvent = e;
|
||||||
|
const state = this.fsm.state();
|
||||||
|
|
||||||
|
switch (state) {
|
||||||
|
case 'input': {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'normal': {
|
||||||
|
markDeleteNode(minder);
|
||||||
|
const nodes = minder.getSelectedNodes();
|
||||||
|
if (nodes.length) {
|
||||||
|
clipBoardEvent.clipboardData?.setData('text/plain', encode(nodes));
|
||||||
|
minder.execCommand('removenode');
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const beforePaste = (e: ClipboardEvent) => {
|
||||||
|
if (document.activeElement === receiver.element) {
|
||||||
|
if (minder.getStatus() !== 'normal') {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const clipBoardEvent = e;
|
||||||
|
const state = this.fsm.state();
|
||||||
|
const textData = clipBoardEvent.clipboardData?.getData('text/plain');
|
||||||
|
|
||||||
|
switch (state) {
|
||||||
|
case 'input': {
|
||||||
|
// input状态下如果格式为application/km则不进行paste操作
|
||||||
|
if (!this.MimeType.isPureText(textData)) {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'normal': {
|
||||||
|
/*
|
||||||
|
* 针对normal状态下通过对选中节点粘贴导入子节点文本进行单独处理
|
||||||
|
*/
|
||||||
|
const sNodes = minder.getSelectedNodes();
|
||||||
|
|
||||||
|
if (this.MimeType.whichMimeType(textData) === 'application/km') {
|
||||||
|
const nodes = decode(this.MimeType.getPureText(textData));
|
||||||
|
resetNodes(nodes);
|
||||||
|
let _node;
|
||||||
|
sNodes.forEach((node: INode) => {
|
||||||
|
// 由于粘贴逻辑中为了排除子节点重新排序导致逆序，因此复制的时候倒过来
|
||||||
|
for (let i = nodes.length - 1; i >= 0; i--) {
|
||||||
|
_node = minder.createNode(null, node);
|
||||||
|
minder.importNode(_node, nodes[i]);
|
||||||
|
_selectedNodes.push(_node);
|
||||||
|
node.appendChild(_node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
minder.select(_selectedNodes, true);
|
||||||
|
_selectedNodes = [];
|
||||||
|
|
||||||
|
minder.refresh();
|
||||||
|
} else if (clipBoardEvent.clipboardData && clipBoardEvent.clipboardData.items[0].type.indexOf('image') > -1) {
|
||||||
|
const imageFile = clipBoardEvent.clipboardData.items[0].getAsFile();
|
||||||
|
const serverService = window.angular.element(document.body).injector().get('server');
|
||||||
|
|
||||||
|
return serverService.uploadImage(imageFile).then((json: Record<string, any>) => {
|
||||||
|
const resp = json.data;
|
||||||
|
if (resp.errno === 0) {
|
||||||
|
minder.execCommand('image', resp.data.url);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
sNodes.forEach((node: INode) => {
|
||||||
|
minder.Text2Children(node, textData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
// 触发命令监听
|
||||||
|
minder.execCommand('paste');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 由editor的receiver统一处理全部事件，包括clipboard事件
|
||||||
|
* @Editor: Naixor
|
||||||
|
* @Date: 2015.9.24
|
||||||
|
*/
|
||||||
|
document.addEventListener('copy', () => beforeCopy);
|
||||||
|
document.addEventListener('cut', () => beforeCut);
|
||||||
|
document.addEventListener('paste', () => beforePaste);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
function ContainerRuntime(this: { selector: string; container?: HTMLElement }) {
|
||||||
|
let container: HTMLElement | null;
|
||||||
|
|
||||||
|
if (typeof this.selector === 'string') {
|
||||||
|
container = document.querySelector(this.selector);
|
||||||
|
} else {
|
||||||
|
container = this.selector;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!container) throw new Error(`Invalid selector: ${this.selector}`);
|
||||||
|
|
||||||
|
// 这个类名用于给编辑器添加样式
|
||||||
|
container.classList.add('km-editor');
|
||||||
|
|
||||||
|
// 暴露容器给其他运行时使用
|
||||||
|
this.container = container;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContainerRuntime;
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
/* eslint-disable no-underscore-dangle */
|
||||||
|
/**
|
||||||
|
* @fileOverview
|
||||||
|
*
|
||||||
|
* 用于拖拽节点时屏蔽键盘事件
|
||||||
|
*
|
||||||
|
* @author: techird
|
||||||
|
* @copyright: Baidu FEX, 2014
|
||||||
|
*/
|
||||||
|
interface DragRuntimeOptions {
|
||||||
|
fsm: any;
|
||||||
|
minder: any;
|
||||||
|
hotbox: any;
|
||||||
|
receiver: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDragRuntime(this: DragRuntimeOptions) {
|
||||||
|
const { fsm, minder, hotbox } = this;
|
||||||
|
|
||||||
|
// listen the fsm changes, make action.
|
||||||
|
function setupFsm() {
|
||||||
|
// when jumped to drag mode, enter
|
||||||
|
fsm.when('* -> drag', () => {
|
||||||
|
// now is drag mode
|
||||||
|
});
|
||||||
|
|
||||||
|
fsm.when('drag -> *', (exit: any, enter: any, reason: string) => {
|
||||||
|
if (reason === 'drag-finish') {
|
||||||
|
// now exit drag mode
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// setup everything to go
|
||||||
|
setupFsm();
|
||||||
|
|
||||||
|
let downX: number;
|
||||||
|
let downY: number;
|
||||||
|
const MOUSE_HAS_DOWN = 0;
|
||||||
|
const MOUSE_HAS_UP = 1;
|
||||||
|
const BOUND_CHECK = 20;
|
||||||
|
let flag = MOUSE_HAS_UP;
|
||||||
|
let maxX: number;
|
||||||
|
let maxY: number;
|
||||||
|
let containerY: number;
|
||||||
|
let freeHorizen = false;
|
||||||
|
let freeVirtical = false;
|
||||||
|
let frame: number | null = null;
|
||||||
|
|
||||||
|
function move(direction: 'left' | 'top' | 'right' | 'bottom' | false, speed?: number) {
|
||||||
|
if (!direction) {
|
||||||
|
freeHorizen = false;
|
||||||
|
freeVirtical = false;
|
||||||
|
if (frame) {
|
||||||
|
cancelAnimationFrame(frame);
|
||||||
|
}
|
||||||
|
frame = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!frame) {
|
||||||
|
frame = requestAnimationFrame(
|
||||||
|
((directionF: 'left' | 'top' | 'right' | 'bottom', minderF: any, speedF = 0): any => {
|
||||||
|
return () => {
|
||||||
|
switch (directionF) {
|
||||||
|
case 'left':
|
||||||
|
minderF._viewDragger.move(
|
||||||
|
{
|
||||||
|
x: -speedF,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
0
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case 'top':
|
||||||
|
minderF._viewDragger.move(
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: -speedF,
|
||||||
|
},
|
||||||
|
0
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case 'right':
|
||||||
|
minderF._viewDragger.move(
|
||||||
|
{
|
||||||
|
x: speedF,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
0
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case 'bottom':
|
||||||
|
minderF._viewDragger.move(
|
||||||
|
{
|
||||||
|
x: 0,
|
||||||
|
y: speedF,
|
||||||
|
},
|
||||||
|
0
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (frame) {
|
||||||
|
cancelAnimationFrame(frame);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})(direction, minder, speed)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
minder.on('mousedown', (e: any) => {
|
||||||
|
flag = MOUSE_HAS_DOWN;
|
||||||
|
const rect = minder.getPaper().container.getBoundingClientRect();
|
||||||
|
downX = e.originEvent.clientX;
|
||||||
|
downY = e.originEvent.clientY;
|
||||||
|
containerY = rect.top;
|
||||||
|
maxX = rect.width;
|
||||||
|
maxY = rect.height;
|
||||||
|
});
|
||||||
|
|
||||||
|
minder.on('mousemove', (e: any) => {
|
||||||
|
if (
|
||||||
|
fsm.state() === 'drag' &&
|
||||||
|
flag === MOUSE_HAS_DOWN &&
|
||||||
|
minder.getSelectedNode() &&
|
||||||
|
(Math.abs(downX - e.originEvent.clientX) > BOUND_CHECK || Math.abs(downY - e.originEvent.clientY) > BOUND_CHECK)
|
||||||
|
) {
|
||||||
|
const osx = e.originEvent.clientX;
|
||||||
|
const osy = e.originEvent.clientY - containerY;
|
||||||
|
|
||||||
|
if (osx < BOUND_CHECK) {
|
||||||
|
move('right', BOUND_CHECK - osx);
|
||||||
|
} else if (osx > maxX - BOUND_CHECK) {
|
||||||
|
move('left', BOUND_CHECK + osx - maxX);
|
||||||
|
} else {
|
||||||
|
freeHorizen = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (osy < BOUND_CHECK) {
|
||||||
|
move('bottom', osy);
|
||||||
|
} else if (osy > maxY - BOUND_CHECK) {
|
||||||
|
move('top', BOUND_CHECK + osy - maxY);
|
||||||
|
} else {
|
||||||
|
freeVirtical = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (freeHorizen && freeVirtical) {
|
||||||
|
move(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
fsm.state() !== 'drag' &&
|
||||||
|
flag === MOUSE_HAS_DOWN &&
|
||||||
|
minder.getSelectedNode() &&
|
||||||
|
(Math.abs(downX - e.originEvent.clientX) > BOUND_CHECK || Math.abs(downY - e.originEvent.clientY) > BOUND_CHECK)
|
||||||
|
) {
|
||||||
|
if (fsm.state() === 'hotbox') {
|
||||||
|
hotbox.active(window.HotBox.STATE_IDLE);
|
||||||
|
}
|
||||||
|
|
||||||
|
fsm.jump('drag', 'user-drag');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener(
|
||||||
|
'mouseup',
|
||||||
|
() => {
|
||||||
|
flag = MOUSE_HAS_UP;
|
||||||
|
if (fsm.state() === 'drag') {
|
||||||
|
move(false);
|
||||||
|
fsm.jump('normal', 'drag-finish');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default createDragRuntime;
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import png from '../protocol/png';
|
||||||
|
import svg from '../protocol/svg';
|
||||||
|
import json from '../protocol/json';
|
||||||
|
import plain from '../protocol/plain';
|
||||||
|
import md from '../protocol/markdown';
|
||||||
|
import mm from '../protocol/freemind';
|
||||||
|
import useLocaleNotVue from '../tool/useLocaleNotVue';
|
||||||
|
|
||||||
|
const tran = useLocaleNotVue;
|
||||||
|
|
||||||
|
export default function ExportRuntime(this: any) {
|
||||||
|
const { minder, hotbox } = this;
|
||||||
|
|
||||||
|
function canExp() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportJson() {
|
||||||
|
json.exportJson(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportImage() {
|
||||||
|
png.exportPNGImage(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportSVG() {
|
||||||
|
svg.exportSVG(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportTextTree() {
|
||||||
|
plain.exportTextTree(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportMarkdown() {
|
||||||
|
md.exportMarkdown(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exportFreeMind() {
|
||||||
|
mm.exportFreeMind(minder);
|
||||||
|
}
|
||||||
|
|
||||||
|
const exps = [
|
||||||
|
{ label: '.json', key: 'j', cmd: exportJson },
|
||||||
|
{ label: '.png', key: 'p', cmd: exportImage },
|
||||||
|
{ label: '.svg', key: 's', cmd: exportSVG },
|
||||||
|
{ label: '.txt', key: 't', cmd: exportTextTree },
|
||||||
|
{ label: '.md', key: 'm', cmd: exportMarkdown },
|
||||||
|
{ label: '.mm', key: 'f', cmd: exportFreeMind },
|
||||||
|
];
|
||||||
|
|
||||||
|
const main = hotbox.state('main');
|
||||||
|
main.button({
|
||||||
|
position: 'top',
|
||||||
|
label: tran('minder.commons.export'),
|
||||||
|
key: 'E',
|
||||||
|
enable: canExp,
|
||||||
|
beforeShow() {
|
||||||
|
this.$button.children[0].innerHTML = tran('minder.commons.export');
|
||||||
|
},
|
||||||
|
next: 'exp',
|
||||||
|
});
|
||||||
|
|
||||||
|
const exp = hotbox.state('exp');
|
||||||
|
exps.forEach((item) => {
|
||||||
|
exp.button({
|
||||||
|
position: 'ring',
|
||||||
|
label: item.label,
|
||||||
|
key: null,
|
||||||
|
action: item.cmd,
|
||||||
|
beforeShow() {
|
||||||
|
this.$button.children[0].innerHTML = tran(item.label);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
exp.button({
|
||||||
|
position: 'center',
|
||||||
|
label: tran('minder.commons.cancel'),
|
||||||
|
key: 'esc',
|
||||||
|
beforeShow() {
|
||||||
|
this.$button.children[0].innerHTML = tran('minder.commons.cancel');
|
||||||
|
},
|
||||||
|
next: 'back',
|
||||||
|
});
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue