Compare commits

..

1 Commits

Author SHA1 Message Date
ibuler
a69398ea3f perf: package json 2024-09-12 10:35:56 +08:00
745 changed files with 13655 additions and 35738 deletions

View File

@@ -14,97 +14,64 @@ module.exports = {
window: true, window: true,
_: true _: true
}, },
plugins: ['vue', 'spellcheck'],
// add your custom rules here // add your custom rules here
// it is base on https://github.com/vuejs/eslint-config-vue // it is base on https://github.com/vuejs/eslint-config-vue
rules: { rules: {
'vue/max-attributes-per-line': [ 'vue/max-attributes-per-line': [2, {
2, 'singleline': 10,
{ 'multiline': {
singleline: 10, 'max': 1,
multiline: { 'allowFirstLine': false
max: 1,
allowFirstLine: false
}
} }
], }],
'vue/singleline-html-element-content-newline': 'off', 'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off', 'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'], 'vue/name-property-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off', 'vue/no-v-html': 'off',
'accessor-pairs': 2, 'accessor-pairs': 2,
'arrow-spacing': [ 'arrow-spacing': [2, {
2, 'before': true,
{ 'after': true
before: true, }],
after: true
}
],
'block-spacing': [2, 'always'], 'block-spacing': [2, 'always'],
'brace-style': [ 'brace-style': [2, '1tbs', {
2, 'allowSingleLine': true
'1tbs', }],
{ 'camelcase': [0, {
allowSingleLine: true 'properties': 'always'
} }],
],
camelcase: [
0,
{
properties: 'always'
}
],
'comma-dangle': [2, 'never'], 'comma-dangle': [2, 'never'],
'comma-spacing': [ 'comma-spacing': [2, {
2, 'before': false,
{ 'after': true
before: false, }],
after: true
}
],
'comma-style': [2, 'last'], 'comma-style': [2, 'last'],
'constructor-super': 2, 'constructor-super': 2,
curly: [2, 'multi-line'], 'curly': [2, 'multi-line'],
'dot-location': [2, 'property'], 'dot-location': [2, 'property'],
'eol-last': 2, 'eol-last': 2,
eqeqeq: ['error', 'always', { null: 'ignore' }], 'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
'generator-star-spacing': [ 'generator-star-spacing': [2, {
2, 'before': true,
{ 'after': true
before: true, }],
after: true
}
],
'handle-callback-err': [2, '^(err|error)$'], 'handle-callback-err': [2, '^(err|error)$'],
indent: [ 'indent': [2, 2, {
2, 'SwitchCase': 1
2, }],
{
SwitchCase: 1
}
],
'jsx-quotes': [2, 'prefer-single'], 'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [ 'key-spacing': [2, {
2, 'beforeColon': false,
{ 'afterColon': true
beforeColon: false, }],
afterColon: true 'keyword-spacing': [2, {
} 'before': true,
], 'after': true
'keyword-spacing': [ }],
2, 'new-cap': [2, {
{ 'newIsCap': true,
before: true, 'capIsNew': false
after: true }],
}
],
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false
}
],
'new-parens': 2, 'new-parens': 2,
'no-array-constructor': 2, 'no-array-constructor': 2,
'no-caller': 2, 'no-caller': 2,
@@ -135,23 +102,17 @@ module.exports = {
'no-irregular-whitespace': 2, 'no-irregular-whitespace': 2,
'no-iterator': 2, 'no-iterator': 2,
'no-label-var': 2, 'no-label-var': 2,
'no-labels': [ 'no-labels': [2, {
2, 'allowLoop': false,
{ 'allowSwitch': false
allowLoop: false, }],
allowSwitch: false
}
],
'no-lone-blocks': 2, 'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2, 'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2, 'no-multi-spaces': 2,
'no-multi-str': 2, 'no-multi-str': 2,
'no-multiple-empty-lines': [ 'no-multiple-empty-lines': [2, {
2, 'max': 1
{ }],
max: 1
}
],
'no-native-reassign': 2, 'no-native-reassign': 2,
'no-negated-in-lhs': 2, 'no-negated-in-lhs': 2,
'no-new-object': 2, 'no-new-object': 2,
@@ -179,126 +140,62 @@ module.exports = {
'no-undef-init': 2, 'no-undef-init': 2,
'no-unexpected-multiline': 2, 'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2, 'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [ 'no-unneeded-ternary': [2, {
2, 'defaultAssignment': false
{ }],
defaultAssignment: false
}
],
'no-unreachable': 2, 'no-unreachable': 2,
'no-unsafe-finally': 2, 'no-unsafe-finally': 2,
'no-unused-vars': [ 'no-unused-vars': [2, {
2, 'vars': 'all',
{ 'args': 'none'
vars: 'all', }],
args: 'none'
}
],
'no-useless-call': 2, 'no-useless-call': 2,
'no-useless-computed-key': 2, 'no-useless-computed-key': 2,
'no-useless-constructor': 2, 'no-useless-constructor': 2,
'no-useless-escape': 0, 'no-useless-escape': 0,
'no-whitespace-before-property': 2, 'no-whitespace-before-property': 2,
'no-with': 2, 'no-with': 2,
'one-var': [ 'one-var': [2, {
2, 'initialized': 'never'
{ }],
initialized: 'never' 'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
} }
], }],
'operator-linebreak': [
2,
'after',
{
overrides: {
'?': 'before',
':': 'before'
}
}
],
'padded-blocks': [2, 'never'], 'padded-blocks': [2, 'never'],
quotes: [ 'quotes': [2, 'single', {
2, 'avoidEscape': true,
'single', 'allowTemplateLiterals': true
{ }],
avoidEscape: true, 'semi': [2, 'never'],
allowTemplateLiterals: true 'semi-spacing': [2, {
} 'before': false,
], 'after': true
semi: [2, 'never'], }],
'semi-spacing': [
2,
{
before: false,
after: true
}
],
'space-before-blocks': [2, 'always'], 'space-before-blocks': [2, 'always'],
'space-before-function-paren': [ 'space-before-function-paren': [2, 'never'],
2,
{ anonymous: 'never', named: 'never', asyncArrow: 'always' }
],
'space-in-parens': [2, 'never'], 'space-in-parens': [2, 'never'],
'space-infix-ops': 2, 'space-infix-ops': 2,
'space-unary-ops': [ 'space-unary-ops': [2, {
2, 'words': true,
{ 'nonwords': false
words: true, }],
nonwords: false 'spaced-comment': [2, 'always', {
} 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
], }],
'object-curly-spacing': [2, 'always'],
'spaced-comment': [
2,
'always',
{
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}
],
'template-curly-spacing': [2, 'never'], 'template-curly-spacing': [2, 'never'],
'use-isnan': 2, 'use-isnan': 2,
'valid-typeof': 2, 'valid-typeof': 2,
'wrap-iife': [2, 'any'], 'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'], 'yield-star-spacing': [2, 'both'],
yoda: [2, 'never'], 'yoda': [2, 'never'],
'prefer-const': 2, 'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'array-bracket-spacing': [2, 'never'], 'object-curly-spacing': [2, 'always', {
'spellcheck/spell-checker': [ objectsInObjects: false
'warn', }],
{ 'array-bracket-spacing': [2, 'never']
comments: true,
strings: false,
identifiers: false,
lang: 'en_US',
skipWords: [
'echarts',
'resize',
'vue',
'eslint',
'babel',
'jsx',
'scss',
'v-deep',
'calc',
'vw',
'vh',
'px',
'rgba',
'rgb',
'var',
'lang',
'scoped',
'pdf',
'rbac'
],
skipIfMatch: [
'http://[^s]*',
'^[-\\w]+/[-\\w\\.]+$',
String.raw`^\/api\/[a-z0-9\/._-]+$`,
],
minLength: 3
}
]
} }
} }

View File

@@ -1,28 +0,0 @@
name: LLM Code Review
permissions:
contents: read
pull-requests: write
on:
pull_request:
types: [opened, reopened, synchronize]
jobs:
llm-code-review:
runs-on: ubuntu-latest
steps:
- uses: fit2cloud/LLM-CodeReview-Action@main
env:
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
LANGUAGE: English
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
MODEL: qwen2-1.5b-instruct
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
top_p: 1
temperature: 1
# max_tokens: 10000
MAX_PATCH_LENGTH: 10000
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

View File

@@ -1,28 +0,0 @@
name: LLM Code Review
permissions:
contents: read
pull-requests: write
on:
pull_request:
types: [opened, reopened, synchronize]
jobs:
llm-code-review:
runs-on: ubuntu-latest
steps:
- uses: fit2cloud/LLM-CodeReview-Action@main
env:
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
LANGUAGE: English
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
MODEL: qwen2-1.5b-instruct
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
top_p: 1
temperature: 1
# max_tokens: 10000
MAX_PATCH_LENGTH: 10000
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

2
.gitignore vendored
View File

@@ -17,5 +17,3 @@ tests/**/coverage/
*.sln *.sln
.env.development .env.development
.python-version .python-version
helper.json

View File

@@ -1,57 +0,0 @@
# Dependencies
node_modules/
dist/
build/
lina/
# Logs
*.log
logs/
# Runtime data
pids/
*.pid
*.seed
# Coverage directory used by tools like istanbul
coverage/
# Generated files
*.min.js
*.min.css
# Package files
*.tgz
*.tar.gz
# Lock files
package-lock.json
yarn.lock
# Build outputs
*.map
# Config files that shouldn't be formatted
.eslintrc.js
babel.config.js
jest.config.js
vue.config.js
postcss.config.js
# Theme files
src/styles/fonts/
public/fonts/
lina/fonts/
# Assets
src/assets/
public/
# Mock data
mock/
# Test files
tests/
# Documentation
*.md

View File

@@ -1,11 +0,0 @@
module.exports = {
singleQuote: true,
semi: false,
trailingComma: 'none',
printWidth: 100,
tabWidth: 2,
useTabs: false,
bracketSpacing: true,
arrowParens: 'avoid',
endOfLine: 'auto'
}

View File

@@ -1,4 +1,4 @@
FROM jumpserver/lina-base:20251105_092554 AS stage-build FROM jumpserver/lina-base:20240723_084702 AS stage-build
ARG VERSION ARG VERSION
ENV VERSION=$VERSION ENV VERSION=$VERSION

View File

@@ -1,76 +0,0 @@
# Prettier 配置说明
本项目已配置 Prettier 代码格式化工具,**仅在保存时自动格式化**,不进行批量格式化,以保持现有代码风格。
## 配置文件
- `.prettierrc` - Prettier 配置文件
- `.prettierignore` - 忽略格式化的文件列表
- `.vscode/settings.json` - VSCode 编辑器配置(保存时自动格式化)
- `.vscode/extensions.json` - 推荐的 VSCode 扩展
## 使用方法
### 1. 安装依赖
项目已安装以下依赖:
- `prettier@^2.8.8` - Prettier 核心
- `eslint-plugin-prettier@^3.1.4` - ESLint 与 Prettier 集成
- `eslint-config-prettier@^6.15.0` - 禁用与 Prettier 冲突的 ESLint 规则
### 2. 命令行使用
```bash
# ESLint 检查和修复
npm run fix
```
**注意**:本项目配置为仅在保存时自动格式化,不提供批量格式化命令。
### 3. VSCode 编辑器配置
确保安装了推荐的扩展:
- Prettier - Code formatter (esbenp.prettier-vscode)
- ESLint (dbaeumer.vscode-eslint)
- Vetur (octref.vetur)
配置已设置为保存时自动格式化。
### 4. Git 提交钩子
项目使用 `husky``lint-staged` 在提交时进行代码检查:
- 提交时运行 ESLint 检查和修复
- 不进行批量格式化,保持原有代码风格
## Prettier 配置说明
```json
{
"semi": false, // 不使用分号
"singleQuote": true, // 使用单引号
"tabWidth": 0, // 不使用缩进
"useTabs": false, // 使用空格而不是制表符
"trailingComma": "none", // 不使用尾随逗号
"printWidth": 100, // 行宽 100 字符
"bracketSpacing": true, // 对象括号内有空格
"arrowParens": "avoid", // 箭头函数单参数时不使用括号
"endOfLine": "lf", // 使用 LF 换行符
"vueIndentScriptAndStyle": false // Vue 文件中 script 和 style 标签不缩进
}
```
## 常见问题
### Q: 如何临时禁用格式化?
A: 使用注释:
```javascript
// prettier-ignore
const uglyCode = {
a:1,b:2
}
```
### Q: 如何添加文件到忽略列表?
A: 编辑 `.prettierignore` 文件,添加文件或目录路径。
### Q: VSCode 保存时没有自动格式化?
A: 检查是否安装了 Prettier 扩展,并确认 `.vscode/settings.json` 配置正确。

View File

@@ -5,6 +5,5 @@
"@/*": ["src/*"] "@/*": ["src/*"]
} }
}, },
"include": ["src"],
"exclude": ["node_modules", "dist"] "exclude": ["node_modules", "dist"]
} }

View File

@@ -1,25 +1,13 @@
import Mock from 'mockjs' import Mock from 'mockjs'
import { param2Obj } from '../src/utils'
import user from './user' import user from './user'
import table from './table' import table from './table'
export function param2Obj(url) { const mocks = [
const search = url.split('?')[1] ...user,
if (!search) { ...table
return {} ]
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ') +
'"}'
)
}
const mocks = [...user, ...table]
// for front mock // for front mock
// please use it cautiously, it will redefine XMLHttpRequest, // please use it cautiously, it will redefine XMLHttpRequest,

View File

@@ -2,7 +2,7 @@
"name": "lina", "name": "lina",
"version": "v4.0.0", "version": "v4.0.0",
"description": "JumpServer Web UI", "description": "JumpServer Web UI",
"author": "JumpServer Team <support@lxware.hk>", "author": "JumpServer Team <support@fit2cloud.com>",
"license": "GPL-3.0-or-later", "license": "GPL-3.0-or-later",
"scripts": { "scripts": {
"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve", "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
@@ -26,22 +26,19 @@
"dependencies": { "dependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.13.12", "@babel/plugin-proposal-optional-chaining": "^7.13.12",
"@fontsource/open-sans": "^5.0.24", "@fontsource/open-sans": "^5.0.24",
"@kangc/v-md-editor": "^1.7.12",
"@traptitech/markdown-it-katex": "^3.6.0", "@traptitech/markdown-it-katex": "^3.6.0",
"@ztree/ztree_v3": "3.5.44", "@ztree/ztree_v3": "3.5.44",
"axios": "0.28.0", "axios": "0.28.0",
"axios-retry": "^3.1.9", "axios-retry": "^3.1.9",
"babel-loader": "^10.0.0",
"cache-loader": "^4.1.0",
"caniuse-lite": "^1.0.30001642", "caniuse-lite": "^1.0.30001642",
"cron-parser": "^4.0.0", "cron-parser": "^4.0.0",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"css-color-function": "^1.3.3", "css-color-function": "^1.3.3",
"decimal.js": "^10.4.3", "decimal.js": "^10.4.3",
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"dompurify": "^3.2.4", "dompurify": "^3.1.6",
"echarts": "4.7.0", "echarts": "4.7.0",
"element-ui": "https://github.com/jumpserver-dev/element/releases/download/v2.15.15/jumpserver-element-ui-2.15.15.tgz", "element-ui": "2.15.14",
"eslint-plugin-html": "^6.0.0", "eslint-plugin-html": "^6.0.0",
"highlight.js": "^11.9.0", "highlight.js": "^11.9.0",
"install": "^0.13.0", "install": "^0.13.0",
@@ -51,6 +48,17 @@
"less": "^3.10.3", "less": "^3.10.3",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lodash.clonedeep": "^4.5.0",
"lodash.frompairs": "^4.0.1",
"lodash.get": "^4.4.2",
"lodash.has": "^4.5.2",
"lodash.includes": "^4.3.0",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.isplainobject": "^4.0.6",
"lodash.set": "^4.3.2",
"lodash.topairs": "^4.3.0",
"lodash.values": "^4.3.0",
"markdown-it": "^13.0.2", "markdown-it": "^13.0.2",
"markdown-it-link-attributes": "^4.0.1", "markdown-it-link-attributes": "^4.0.1",
"moment": "^2.29.4", "moment": "^2.29.4",
@@ -58,22 +66,21 @@
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
"npm": "^7.8.0", "npm": "^7.8.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"path-to-regexp": "3.3.0", "path-to-regexp": "2.4.0",
"sortablejs": "^1.15.6",
"v-sanitize": "^0.0.13", "v-sanitize": "^0.0.13",
"vue": "2.7.16", "vue": "2.6.10",
"vue-codemirror": "4.0.6", "vue-codemirror": "4.0.6",
"vue-cookie": "^1.1.4", "vue-cookie": "^1.1.4",
"vue-echarts": "^5.0.0-beta.0", "vue-echarts": "^5.0.0-beta.0",
"vue-i18n": "^8.15.5", "vue-i18n": "^8.15.5",
"vue-json-editor": "^1.4.3", "vue-json-editor": "^1.4.3",
"vue-markdown": "^2.2.4", "vue-markdown": "^2.2.4",
"vue-moment": "^4.1.0",
"vue-password-strength-meter": "^1.7.2", "vue-password-strength-meter": "^1.7.2",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vue-select": "^3.9.5", "vue-select": "^3.9.5",
"vuejs-logger": "^1.5.4", "vuejs-logger": "^1.5.4",
"vuex": "3.1.0", "vuex": "3.1.0",
"watermark-js-plus": "^1.5.8",
"xss": "^1.0.14", "xss": "^1.0.14",
"xterm": "^4.5.0", "xterm": "^4.5.0",
"xterm-addon-fit": "^0.3.0", "xterm-addon-fit": "^0.3.0",
@@ -88,17 +95,15 @@
"@vue/cli-service": "3.6.0", "@vue/cli-service": "3.6.0",
"@vue/test-utils": "1.0.0-beta.29", "@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.5.1", "autoprefixer": "^9.5.1",
"babel-core": "6.26.3", "babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1", "babel-eslint": "10.0.2",
"babel-jest": "23.6.0", "babel-jest": "23.6.0",
"chalk": "2.4.2", "chalk": "2.4.2",
"compression-webpack-plugin": "^6.1.1", "compression-webpack-plugin": "^6.1.1",
"connect": "3.6.6", "connect": "3.6.6",
"deasync": "^0.1.29", "deasync": "^0.1.29",
"element-theme-chalk": "^2.13.1",
"eslint": "^5.15.3", "eslint": "^5.15.3",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-spellcheck": "^0.0.20",
"eslint-plugin-vue": "5.2.2", "eslint-plugin-vue": "5.2.2",
"eslint-plugin-vue-i18n": "^0.3.0", "eslint-plugin-vue-i18n": "^0.3.0",
"github-markdown-css": "^5.1.0", "github-markdown-css": "^5.1.0",
@@ -107,23 +112,20 @@
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"lint-staged": "^10.1.2", "lint-staged": "^10.1.2",
"mockjs": "1.0.1-beta3", "mockjs": "1.0.1-beta3",
"prettier": "^3.6.2",
"pretty-bytes": "^5.6.0",
"runjs": "^4.3.2", "runjs": "^4.3.2",
"sass": "~1.32.6", "sass": "~1.32.6",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3", "script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "0.7.2", "script-loader": "0.7.2",
"serve-static": "^1.16.0", "serve-static": "^1.13.2",
"strip-ansi": "^7.1.0", "strip-ansi": "^7.1.0",
"svg-sprite-loader": "4.1.3", "svg-sprite-loader": "4.1.3",
"svgo": "1.2.2", "svgo": "1.2.2",
"vue-i18n-extract": "^1.1.1", "vue-i18n-extract": "^1.1.1",
"vue-template-compiler": "2.7.16", "vue-template-compiler": "2.6.10"
"webpack": "^4.28.4"
}, },
"engines": { "engines": {
"node": ">=12", "node": ">=8.9",
"npm": ">= 3.0.0" "npm": ">= 3.0.0"
}, },
"browserslist": [ "browserslist": [

View File

@@ -1,90 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="0" http-equiv="Expires"> <meta http-equiv="Expires" content="0">
<meta content="no-cache" http-equiv="Pragma"> <meta http-equiv="Pragma" content="no-cache">
<meta content="no-cache" http-equiv="Cache-control"> <meta http-equiv="Cache-control" content="no-cache">
<meta content="no-cache" http-equiv="Cache"> <meta http-equiv="Cache" content="no-cache">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet"> <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
<style> </head>
#loading { <body>
position: fixed; <noscript>
top: 0; <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
left: 0; </noscript>
width: 100vw; <script>
height: 100vh; window.onload = function() {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.98);
z-index: 9999;
}
#loading .spinner {
width: 40px;
height: 40px;
border: 3px solid transparent;
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
#loading .spinner::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
width: 40px;
height: 40px;
border: 3px solid transparent;
border-top-color: rgba(64, 158, 255, 0.2);
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<noscript>
<strong>
We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
Please enable it to continue.
</strong>
</noscript>
<script>
window.onload = function () {
if (location.pathname === '/') { if (location.pathname === '/') {
location.pathname = '/ui/' location.pathname = '/ui/'
} }
const pathname = window.location.pathname const pathname = window.location.pathname
if (pathname.startsWith('/core')) { if (pathname.startsWith('/core')) {
return return
} }
if (pathname.indexOf('/ui') === -1) { if(pathname.indexOf('/ui') === -1) {
window.location.href = window.location.origin + '/ui/#' + pathname window.location.href = window.location.origin + '/ui/#' + pathname
} }
if (pathname.startsWith('/ui/#/chat')) { if (pathname.startsWith('/ui/#/chat')) {
window.location.href = window.location.origin + pathname window.location.href = window.location.origin + pathname
} }
} }
</script> </script>
<div id="app"> <div id="app"></div>
</div> <!-- built files will be auto injected -->
<div id="loading"> </body>
<div class="spinner"></div>
</div>
<!-- built files will be auto injected -->
</body>
</html> </html>

View File

@@ -5,90 +5,14 @@
</template> </template>
<script> <script>
import { mapState, mapGetters } from 'vuex' import { mapState } from 'vuex'
import { Watermark } from 'watermark-js-plus'
export default { export default {
name: 'App', name: 'App',
data() {
return {
watermark: null
}
},
computed: { computed: {
...mapState({ ...mapState({
isRouterAlive: state => state.common.isRouterAlive isRouterAlive: state => state.common.isRouterAlive
}),
...mapGetters({
currentUser: 'currentUser',
publicSettings: 'publicSettings'
}) })
},
watch: {
currentUser: {
handler(newVal) {
this.createWatermark()
}
},
'publicSettings.SECURITY_WATERMARK_ENABLED': {
handler(newVal) {
if (!newVal) {
return setTimeout(() => {
this.watermark?.destroy()
this.watermark = null
})
}
this.createWatermark()
}
}
},
methods: {
getWaterMarkFields() {
const user = this.currentUser
const userId = user?.id || ''
const name = user?.name || ''
const userName = user?.username || ''
const currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
return { userId, name, userName, currentTime }
},
getWaterMarkContent() {
const fields = this.getWaterMarkFields()
const template = this.publicSettings.SECURITY_WATERMARK_CONSOLE_CONTENT || ''
// 找出模板中所有的变量占位符 ${xxx}
const placeholders = template.match(/\${([^}]+)}/g) || []
const allVariables = {}
// 为模板中的每个变量准备值
placeholders.forEach(placeholder => {
const varName = placeholder.slice(2, -1) // 提取变量名,去掉 ${ 和 }
allVariables[varName] = fields[varName] !== undefined ? fields[varName] : 'N/A'
})
// 合并用户现有的字段和模板中可能缺失的字段
const safeFields = { ...fields, ...allVariables }
// 安全解析模板
return new Function(...Object.keys(safeFields), `return \`${template}\`;`)(...Object.values(safeFields))
},
createWatermark() {
if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
this.watermark = new Watermark({
content: this.getWaterMarkContent(),
width: this.publicSettings?.SECURITY_WATERMARK_WIDTH,
height: this.publicSettings?.SECURITY_WATERMARK_HEIGHT,
rotate: this.publicSettings?.SECURITY_WATERMARK_ROTATE,
fontWeight: 'normal',
fontSize: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE + 'px',
fontColor: this.publicSettings?.SECURITY_WATERMARK_COLOR,
contentType: 'multi-line-text',
lineHeight: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE
})
this.watermark.create()
}
}
} }
} }
</script> </script>

View File

@@ -16,9 +16,9 @@ export function getSystemUserList(data) {
}) })
} }
export function getZoneList(data) { export function getDomainList(data) {
return request({ return request({
url: '/api/v1/assets/zones/', url: '/api/v1/assets/domains/',
method: 'get', method: 'get',
params: data params: data
}) })

View File

@@ -53,7 +53,7 @@ export function createJob(form) {
}) })
} }
export function stopJob(form) { export function StopJob(form) {
return request({ return request({
url: '/api/v1/ops/job-executions/stop/', url: '/api/v1/ops/job-executions/stop/',
method: 'post', method: 'post',
@@ -61,21 +61,13 @@ export function stopJob(form) {
}) })
} }
export function JobUploadFile(form, config = {}) { export function JobUploadFile(form) {
return request({ return request({
url: '/api/v1/ops/jobs/upload/', url: '/api/v1/ops/jobs/upload/',
method: 'post', method: 'post',
headers: { 'Content-Type': 'multipart/form-data' }, headers: { 'Content-Type': 'multipart/form-data' },
timeout: 60 * 60 * 1000, timeout: 60 * 60 * 1000,
data: form,
...config
})
}
export function auditUpdateJob(id, form) {
return request({
url: `/api/v1/audits/jobs/${id}/`,
method: 'patch',
data: form data: form
}) })
} }

View File

@@ -18,14 +18,14 @@ export function toggleLockSession(data) {
export function getAllCommandStorage() { export function getAllCommandStorage() {
return request({ return request({
url: '/api/v1/terminal/command-storages/', url: `/api/v1/terminal/command-storages/`,
method: 'get' method: 'get'
}) })
} }
export function getAllReplayStorage() { export function getAllReplayStorage() {
return request({ return request({
url: '/api/v1/terminal/replay-storages/', url: `/api/v1/terminal/replay-storages/`,
method: 'get' method: 'get'
}) })
} }

View File

@@ -15,7 +15,6 @@ export function testEmailSetting(data) {
data: data data: data
}) })
} }
export function importLicense(formData) { export function importLicense(formData) {
return request({ return request({
url: '/api/v1/xpack/license/import', url: '/api/v1/xpack/license/import',
@@ -26,7 +25,6 @@ export function importLicense(formData) {
data: formData data: formData
}) })
} }
export function testLdapSetting(data, refresh = true) { export function testLdapSetting(data, refresh = true) {
let url = '/api/v1/settings/ldap/testing/config/' let url = '/api/v1/settings/ldap/testing/config/'
if (refresh) { if (refresh) {
@@ -98,17 +96,9 @@ export function getPublicSettings(isOpen) {
method: 'get' method: 'get'
}) })
} }
export function getLogo() { export function getLogo() {
return request({ return request({
url: '/api/v1/xpack/interface/setting/', url: '/api/v1/xpack/interface/setting/',
method: 'get' method: 'get'
}) })
} }
export function getPreference() {
return request({
url: '/api/v1/users/preference/?category=luna',
method: 'get'
})
}

View File

@@ -8,20 +8,11 @@ export function login(data) {
}) })
} }
export async function getProfile(token) { export function getProfile(token) {
let profile = await request({ return request({
url: '/api/v1/users/profile/', url: '/api/v1/users/profile/',
method: 'get' method: 'get'
}) })
const perms = await request({
url: '/api/v1/users/profile/permissions/',
method: 'get'
})
profile = {
...profile,
...perms
}
return profile
} }
export function getUserList(data) { export function getUserList(data) {
@@ -31,7 +22,6 @@ export function getUserList(data) {
params: data params: data
}) })
} }
export function getUserGroupList(params) { export function getUserGroupList(params) {
return request({ return request({
url: '/api/v1/users/groups/', url: '/api/v1/users/groups/',
@@ -39,7 +29,6 @@ export function getUserGroupList(params) {
params: params params: params
}) })
} }
export function getUserGroupDetail(id) { export function getUserGroupDetail(id) {
return request({ return request({
url: `/api/v1/users/groups/${id}/`, url: `/api/v1/users/groups/${id}/`,
@@ -61,7 +50,6 @@ export function editUserGroup(data) {
data: data data: data
}) })
} }
export function updateUserGroup(id, data) { export function updateUserGroup(id, data) {
return request({ return request({
url: '/api/v1/users/groups/' + id + '/', url: '/api/v1/users/groups/' + id + '/',

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752631175762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4421" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M93.866667 234.666667c-34.133333 12.8-51.2 25.6-51.2 34.133333 0 4.266667 51.2 64 115.2 136.533333 64 68.266667 115.2 128 115.2 128s-51.2 59.733333-115.2 128C93.866667 729.6 42.666667 793.6 42.666667 797.866667c4.266667 17.066667 59.733333 42.666667 98.133333 42.666666 64 0 81.066667-12.8 217.6-162.133333 68.266667-76.8 128-140.8 128-140.8 0-4.266667-55.466667-64-123.733333-140.8-85.333333-102.4-132.266667-145.066667-153.6-157.866667-29.866667-12.8-81.066667-17.066667-115.2-4.266666z m725.333333 4.266666c-21.333333 8.533333-68.266667 59.733333-153.6 153.6-68.266667 76.8-123.733333 140.8-123.733333 140.8 0 4.266667 55.466667 68.266667 128 140.8 136.533333 153.6 153.6 162.133333 217.6 162.133334 42.666667 0 98.133333-21.333333 98.133333-42.666667 0-4.266667-51.2-68.266667-115.2-136.533333-64-68.266667-115.2-128-115.2-128s51.2-59.733333 115.2-128c64-68.266667 115.2-128 115.2-136.533334-4.266667-17.066667-55.466667-38.4-98.133333-38.4-34.133333 0-46.933333 4.266667-68.266667 12.8z" fill="#E57000" p-id="4422"></path><path d="M238.933333 136.533333c-42.666667 21.333333-42.666667 25.6-4.266666 68.266667 221.866667 243.2 273.066667 302.933333 277.333333 302.933333 4.266667 0 311.466667-332.8 315.733333-341.333333 0-4.266667-8.533333-12.8-21.333333-21.333333-17.066667-12.8-34.133333-17.066667-68.266667-17.066667-64-4.266667-85.333333 8.533333-162.133333 93.866667-34.133333 38.4-64 72.533333-64 72.533333s-29.866667-29.866667-64-68.266667c-34.133333-38.4-72.533333-76.8-89.6-85.333333-25.6-17.066667-89.6-21.333333-119.466667-4.266667zM354.133333 725.333333c-85.333333 93.866667-153.6 170.666667-153.6 174.933334 0 4.266667 8.533333 12.8 21.333334 21.333333 17.066667 12.8 34.133333 17.066667 68.266666 17.066667 59.733333 4.266667 85.333333-8.533333 162.133334-98.133334 34.133333-38.4 64-68.266667 64-68.266666s29.866667 29.866667 64 68.266666c81.066667 89.6 98.133333 102.4 162.133333 98.133334 34.133333 0 51.2-4.266667 68.266667-17.066667 12.8-8.533333 21.333333-17.066667 21.333333-21.333333-4.266667-8.533333-311.466667-345.6-315.733333-341.333334-8.533333 0-76.8 76.8-162.133334 166.4z" p-id="4423"></path></svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748326203303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M10.24 605.184l839.168-481.28L1013.76 220.672v191.488L174.592 895.488 10.24 804.352z" fill="#0096FF" p-id="2854"></path><path d="M10.24 416.768V220.672l168.96-96.768 308.736 178.688-331.776 193.536zM541.184 717.312l331.264-195.072 141.312 88.064v194.048l-165.376 95.744z" fill="#25C764" p-id="2855"></path></svg>

Before

Width:  |  Height:  |  Size: 645 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import DataActions from '@/components/Common/DataActions/index.vue' import DataActions from '@/components/DataActions'
export default { export default {
name: 'ActionsGroup', name: 'ActionsGroup',

View File

@@ -1,42 +1,24 @@
import { UpdateToken, UploadSecret } from '@/components/Form/FormFields' import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
import Select2 from '@/components/Form/FormFields/Select2.vue' import Select2 from '@/components/Form/FormFields/Select2.vue'
import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
import { Required, RequiredChange } from '@/components/Form/DataForm/rules' import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue' import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
export const accountFieldsMeta = (vm) => { export const accountFieldsMeta = (vm) => {
const defaultPrivilegedAccounts = ['root', 'administrator'] const defaultPrivilegedAccounts = ['root', 'administrator']
function onPrivilegedUser(value, updateForm) {
const maybePrivileged = defaultPrivilegedAccounts.includes(value)
if (maybePrivileged) {
updateForm({ privileged: true, secret_reset: false, push_now: false })
}
}
return { return {
nodes: { assets: {
component: Select2, component: Select2,
label: vm.$t('Node'), label: vm.$t('Assets'),
rules: [Required],
el: { el: {
value: [], multiple: true,
ajax: { ajax: {
url: '/api/v1/assets/nodes/', url: '/api/v1/assets/assets/',
transformOption: (item) => { transformOption: (item) => {
return { label: item.full_value, value: item.id } return { label: item.name + '(' + item.address + ')', value: item.id }
} }
} }
}, },
hidden: () => {
return !vm.addTemplate
}
},
assets: {
component: AssetSelect,
label: vm.$t('Asset'),
el: {
multiple: false
},
hidden: () => { hidden: () => {
return vm.platform || vm.asset return vm.platform || vm.asset
} }
@@ -45,10 +27,7 @@ export const accountFieldsMeta = (vm) => {
component: Select2, component: Select2,
rules: [Required], rules: [Required],
el: { el: {
get disabled() { multiple: false,
return vm.isDisabled
},
multiple: vm.addTemplate,
ajax: { ajax: {
url: '/api/v1/accounts/account-templates/', url: '/api/v1/accounts/account-templates/',
transformOption: (item) => { transformOption: (item) => {
@@ -64,11 +43,6 @@ export const accountFieldsMeta = (vm) => {
rules: [Required], rules: [Required],
label: vm.$t('AccountPolicy'), label: vm.$t('AccountPolicy'),
helpTip: vm.$t('AccountPolicyHelpText'), helpTip: vm.$t('AccountPolicyHelpText'),
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: () => { hidden: () => {
return vm.platform || vm.asset return vm.platform || vm.asset
} }
@@ -76,19 +50,17 @@ export const accountFieldsMeta = (vm) => {
name: { name: {
label: vm.$t('Name'), label: vm.$t('Name'),
rules: [RequiredChange], rules: [RequiredChange],
el: {
get disabled() {
return vm.isDisabled
}
},
on: { on: {
input: ([value], updateForm) => { input: ([value], updateForm) => {
if (!vm.usernameChanged) { if (!vm.usernameChanged) {
if (!vm.account?.name) { if (!vm.account?.name) {
updateForm({ username: value }) updateForm({ username: value })
} }
const maybePrivileged = defaultPrivilegedAccounts.includes(value)
if (maybePrivileged) {
updateForm({ privileged: true })
}
} }
onPrivilegedUser(value, updateForm)
} }
}, },
hidden: () => { hidden: () => {
@@ -97,16 +69,17 @@ export const accountFieldsMeta = (vm) => {
}, },
username: { username: {
el: { el: {
get disabled() { disabled: !!vm.account?.name
return !!vm.account?.name || vm.isDisabled
}
}, },
on: { on: {
input: ([value], updateForm) => { input: ([value], updateForm) => {
vm.usernameChanged = true vm.usernameChanged = true
}, },
change: ([value], updateForm) => { change: ([value], updateForm) => {
onPrivilegedUser(value, updateForm) const maybePrivileged = defaultPrivilegedAccounts.includes(value)
if (maybePrivileged) {
updateForm({ privileged: true })
}
} }
}, },
hidden: () => { hidden: () => {
@@ -115,11 +88,6 @@ export const accountFieldsMeta = (vm) => {
}, },
privileged: { privileged: {
label: vm.$t('Privileged'), label: vm.$t('Privileged'),
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: () => { hidden: () => {
return vm.addTemplate return vm.addTemplate
} }
@@ -142,11 +110,6 @@ export const accountFieldsMeta = (vm) => {
}, },
su_from_username: { su_from_username: {
label: vm.$t('UserSwitchFrom'), label: vm.$t('UserSwitchFrom'),
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => { hidden: (formValue) => {
return vm.platform || vm.asset || vm.addTemplate return vm.platform || vm.asset || vm.addTemplate
} }
@@ -154,11 +117,6 @@ export const accountFieldsMeta = (vm) => {
password: { password: {
label: vm.$t('Password'), label: vm.$t('Password'),
component: UpdateToken, component: UpdateToken,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => { hidden: (formValue) => {
return formValue.secret_type !== 'password' || vm.addTemplate return formValue.secret_type !== 'password' || vm.addTemplate
} }
@@ -166,63 +124,33 @@ export const accountFieldsMeta = (vm) => {
ssh_key: { ssh_key: {
label: vm.$t('PrivateKey'), label: vm.$t('PrivateKey'),
component: UploadSecret, component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
}, },
passphrase: { passphrase: {
label: vm.$t('Passphrase'), label: vm.$t('Passphrase'),
component: UpdateToken, component: UpdateToken,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
}, },
token: { token: {
label: vm.$t('Token'), label: vm.$t('Token'),
component: UploadSecret, component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
}, },
access_key: { access_key: {
id: 'access_key', id: 'access_key',
label: vm.$t('AccessKey'), label: vm.$t('AccessKey'),
component: UploadSecret, component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
}, },
api_key: { api_key: {
id: 'api_key', id: 'api_key',
label: vm.$t('ApiKey'), label: vm.$t('ApiKey'),
component: UploadSecret, component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
}, },
secret_type: { secret_type: {
type: 'radio-group', type: 'radio-group',
options: [], options: [],
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: () => { hidden: () => {
return vm.addTemplate return vm.addTemplate
} }
@@ -235,8 +163,7 @@ export const accountFieldsMeta = (vm) => {
!automation.ansible_enabled || !automation.ansible_enabled ||
!vm.$hasPerm('accounts.push_account') || !vm.$hasPerm('accounts.push_account') ||
(formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') || (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
vm.addTemplate || vm.addTemplate
!formValue.secret_reset
} }
}, },
params: { params: {
@@ -245,9 +172,6 @@ export const accountFieldsMeta = (vm) => {
el: {}, el: {},
hidden: (formValue) => { hidden: (formValue) => {
const automation = vm.iPlatform.automation || {} const automation = vm.iPlatform.automation || {}
if (!vm.iPlatform.automation) {
return true
}
vm.fieldsMeta.params.el.method = vm.iPlatform.automation.push_account_method vm.fieldsMeta.params.el.method = vm.iPlatform.automation.push_account_method
vm.fieldsMeta.params.el.pushAccountParams = vm.iPlatform.automation.push_account_params vm.fieldsMeta.params.el.pushAccountParams = vm.iPlatform.automation.push_account_params
return !formValue.push_now || return !formValue.push_now ||
@@ -260,27 +184,12 @@ export const accountFieldsMeta = (vm) => {
} }
}, },
is_active: { is_active: {
label: vm.$t('IsActive'), label: vm.$t('IsActive')
el: {
get disabled() {
return vm.isDisabled
}
}
}, },
comment: { comment: {
label: vm.$t('Comment'), label: vm.$t('Comment'),
el: { hidden: () => {
get disabled() { return vm.addTemplate
return vm.isDisabled
}
}
},
secret_reset: {
label: vm.$t('SecretReset'),
el: {
get disabled() {
return vm.isDisabled
}
} }
} }
} }

View File

@@ -11,7 +11,7 @@
<script> <script>
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue' import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
import { encryptPassword } from '@/utils/secure' import { encryptPassword } from '@/utils/crypto'
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const' import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
export default { export default {
@@ -45,7 +45,6 @@ export default {
data() { data() {
return { return {
loading: true, loading: true,
isDisabled: false,
usernameChanged: false, usernameChanged: false,
submitBtnText: this.$t('Confirm'), submitBtnText: this.$t('Confirm'),
iPlatform: { iPlatform: {
@@ -62,12 +61,11 @@ export default {
form: Object.assign({ 'on_invalid': 'error' }, this.account || {}), form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
encryptedFields: ['secret'], encryptedFields: ['secret'],
fields: [ fields: [
[this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']], [this.$t('AccountTemplate'), ['template']],
[this.$t('Asset'), ['nodes', 'assets']], [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
[this.$t('Secret'), [ [this.$t('Secret'), [
'secret_type', 'password', 'ssh_key', 'token', 'secret_type', 'password', 'ssh_key', 'token',
'access_key', 'passphrase', 'api_key', 'access_key', 'passphrase', 'api_key'
'secret_reset'
]], ]],
[this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']] [this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
], ],
@@ -75,16 +73,6 @@ export default {
hasSaveContinue: false hasSaveContinue: false
} }
}, },
watch: {
'$route.query': {
handler(nv, ov) {
if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
this.isDisabled = true
}
},
immediate: true
}
},
async mounted() { async mounted() {
try { try {
await this.getPlatform() await this.getPlatform()
@@ -157,11 +145,7 @@ export default {
delete form['secret'] delete form['secret']
} }
if (this.account?.name) { if (this.account?.name) {
if (this.account.payload && this.account.payload === 'pam_account_clone') { this.$emit('edit', form)
this.$emit('add', form)
} else {
this.$emit('edit', form)
}
} else { } else {
this.$emit('add', form) this.$emit('add', form)
} }
@@ -173,16 +157,16 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.account-add { .account-add {
::v-deep .el-form-item { ::v-deep .el-form-item {
//margin-bottom: 5px; margin-bottom: 5px;
.help-block { .help-block {
//margin-bottom: 5px; margin-bottom: 5px;
} }
} }
::v-deep .form-group-header { ::v-deep .form-group-header {
.hr-line-dashed { .hr-line-dashed {
//margin: 5px 0; margin: 5px 0;
} }
h3 { h3 {

View File

@@ -11,7 +11,7 @@
<script> <script>
import { GenericUpdateFormDialog } from '@/layout/components' import { GenericUpdateFormDialog } from '@/layout/components'
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const' import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
import { encryptPassword } from '@/utils/secure' import { encryptPassword } from '@/utils/crypto'
export default { export default {
name: 'AccountBulkUpdateDialog', name: 'AccountBulkUpdateDialog',

View File

@@ -1,38 +1,36 @@
<template v-if="iVisible"> <template>
<Drawer <Dialog
v-if="iVisible"
:close-on-click-modal="false"
:destroy-on-close="true"
:show-cancel="false"
:show-confirm="false"
:title="title" :title="title"
:visible="iVisible" :visible.sync="iVisible"
class="drawer" v-bind="$attrs"
@close-drawer="handleCloseDrawer" width="900px"
v-on="$listeners"
> >
<Page :title="'null'"> <AccountCreateUpdateForm
<IBox class="content"> v-if="!loading"
<AccountCreateUpdateForm ref="form"
v-if="!loading" :account="account"
ref="form" :add-template="addTemplate"
:account="account" :asset="asset"
:add-template="addTemplate" @add="addAccount"
:asset="asset" @edit="editAccount"
@add="addAccount" />
@edit="editAccount" </Dialog>
/>
</IBox>
</Page>
</Drawer>
</template> </template>
<script> <script>
import Drawer from '@/components/Drawer/index.vue' import Dialog from '@/components/Dialog/index.vue'
import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue' import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
import IBox from '@/components/Common/IBox/index.vue'
import Page from '@/layout/components/Page/index.vue'
export default { export default {
name: 'CreateAccountDialog', name: 'CreateAccountDialog',
components: { components: {
IBox, Dialog,
Drawer,
Page,
AccountCreateUpdateForm AccountCreateUpdateForm
}, },
props: { props: {
@@ -93,8 +91,8 @@ export default {
iVisible = true iVisible = true
data = formValue data = formValue
url = `/api/v1/accounts/accounts/bulk/` url = `/api/v1/accounts/accounts/bulk/`
if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) { if (data.assets.length === 0) {
this.$message.error(this.$tc('PleaseSelectAssetOrNode')) this.$message.error(this.$tc('PleaseSelectAsset'))
return return
} }
} }
@@ -107,32 +105,17 @@ export default {
this.$emit('add', true) this.$emit('add', true)
} }
}).catch(error => { }).catch(error => {
if (error?.response?.data?.code === 'no_valid_assets') {
this.$message.error(error?.response?.data?.detail)
return
}
this.iVisible = true this.iVisible = true
this.handleResult(null, error) this.handleResult(null, error)
}) })
}, },
editAccount(form) { editAccount(form) {
const data = { ...form } const data = { ...form }
const flag = this.$route.query.flag this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
this.iVisible = false
switch (flag) { this.$emit('add', true)
case 'copy': this.$message.success(this.$tc('UpdateSuccessMsg'))
this.handleAccountOperation(this.account.id, 'copy-to-assets', data) }).catch(error => this.setFieldError(error))
break
case 'move':
this.handleAccountOperation(this.account.id, 'move-to-assets', data)
break
default:
this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
this.iVisible = false
this.$emit('add', true)
this.$message.success(this.$tc('UpdateSuccessMsg'))
}).catch(error => this.setFieldError(error))
}
}, },
handleResult(resp, error) { handleResult(resp, error) {
let bulkCreate = !this.asset let bulkCreate = !this.asset
@@ -185,29 +168,7 @@ export default {
refsAutoDataForm.setFieldError(current, err) refsAutoDataForm.setFieldError(current, err)
} }
} }
},
handleCloseDrawer() {
this.iVisible = false
// Reflect.deleteProperty(this.$route.query, 'flag')
},
handleAccountOperation(id, path, data) {
this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
this.iVisible = false
this.$emit('add', true)
this.handleResult(res, null)
}).catch(error => this.handleResult(null, error))
} }
} }
} }
</script> </script>
<style lang="scss" scoped>
.drawer {
::v-deep .el-drawer__body {
.el-form {
margin-right: 30px;
}
}
}
</style>

View File

@@ -1,12 +1,6 @@
<template> <template>
<div> <div>
<DrawerListTable <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
ref="ListTable"
:detail-drawer="detailDrawer"
:header-actions="headerActions"
:quick-filters="quickFilters"
:table-config="tableConfig"
/>
<ViewSecret <ViewSecret
v-if="showViewSecretDialog" v-if="showViewSecretDialog"
:account="account" :account="account"
@@ -22,13 +16,22 @@
<AccountCreateUpdate <AccountCreateUpdate
v-if="showAddDialog" v-if="showAddDialog"
:account="account" :account="account"
:add-template="addTemplate"
:asset="iAsset" :asset="iAsset"
:title="accountCreateUpdateTitle" :title="accountCreateUpdateTitle"
:visible.sync="showAddDialog" :visible.sync="showAddDialog"
@add="addAccountSuccess" @add="addAccountSuccess"
@bulk-create-done="showBulkCreateResult($event)" @bulk-create-done="showBulkCreateResult($event)"
/> />
<AccountCreateUpdate
v-if="showAddTemplateDialog"
:account="account"
:add-template="true"
:asset="iAsset"
:title="accountCreateByTemplateTitle"
:visible.sync="showAddTemplateDialog"
@add="addAccountSuccess"
@bulk-create-done="showBulkCreateResult($event)"
/>
<ResultDialog <ResultDialog
v-if="showResultDialog" v-if="showResultDialog"
:result="createAccountResults" :result="createAccountResults"
@@ -41,42 +44,29 @@
v-bind="updateSelectedDialogSetting" v-bind="updateSelectedDialogSetting"
@update="handleAccountBulkUpdate" @update="handleAccountBulkUpdate"
/> />
<PasswordHistoryDialog
v-if="showPasswordHistoryDialog"
:account="currentAccountColumn"
:visible.sync="showPasswordHistoryDialog"
/>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import ListTable from '@/components/Table/ListTable/index.vue'
import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const' import { ActionsFormatter } from '@/components/Table/TableFormatters'
import { openTaskPage } from '@/utils/jms/index'
import {
AccountConnectFormatter,
ActionsFormatter,
PlatformFormatter,
SecretViewerFormatter
} from '@/components/Table/TableFormatters'
import ViewSecret from './ViewSecret.vue' import ViewSecret from './ViewSecret.vue'
import UpdateSecretInfo from './UpdateSecretInfo.vue' import UpdateSecretInfo from './UpdateSecretInfo.vue'
import ResultDialog from './BulkCreateResultDialog.vue'
import AccountCreateUpdate from './AccountCreateUpdate.vue' import AccountCreateUpdate from './AccountCreateUpdate.vue'
import PasswordHistoryDialog from './PasswordHistoryDialog.vue' import { connectivityMeta } from './const'
import DrawerListTable from '@/components/Table/DrawerListTable/index.vue' import { openTaskPage } from '@/utils/jms'
import ResultDialog from './BulkCreateResultDialog.vue'
import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue' import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
export default { export default {
name: 'AccountListTable', name: 'AccountListTable',
components: { components: {
ViewSecret, AccountBulkUpdateDialog,
ResultDialog, ResultDialog,
DrawerListTable, ListTable,
UpdateSecretInfo, UpdateSecretInfo,
AccountCreateUpdate, ViewSecret,
PasswordHistoryDialog, AccountCreateUpdate
AccountBulkUpdateDialog
}, },
props: { props: {
url: { url: {
@@ -99,7 +89,7 @@ export default {
}, },
hasClone: { hasClone: {
type: Boolean, type: Boolean,
default: true default: false
}, },
asset: { asset: {
type: Object, type: Object,
@@ -129,7 +119,7 @@ export default {
columnsDefault: { columnsDefault: {
type: Array, type: Array,
default: () => ([ default: () => ([
'name', 'username', 'secret', 'asset', 'platform', 'connect' 'name', 'username', 'asset', 'date_updated'
]) ])
}, },
headerExtraActions: { headerExtraActions: {
@@ -139,34 +129,22 @@ export default {
extraQuery: { extraQuery: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
},
showQuickFilters: {
type: Boolean,
default: true
},
showActions: {
type: Boolean,
default: true
} }
}, },
data() { data() {
const vm = this const vm = this
return { return {
addTemplate: false,
isUpdateAccount: false,
currentAccountColumn: {},
showPasswordHistoryDialog: false,
showViewSecretDialog: false, showViewSecretDialog: false,
showUpdateSecretDialog: false, showUpdateSecretDialog: false,
showResultDialog: false, showResultDialog: false,
showAddDialog: false, showAddDialog: false,
showAddTemplateDialog: false, showAddTemplateDialog: false,
detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
createAccountResults: [], createAccountResults: [],
accountCreateUpdateTitle: this.$t('AddAccount'),
accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
iAsset: this.asset, iAsset: this.asset,
account: {}, account: {},
secretUrl: '', secretUrl: '',
quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
tableConfig: { tableConfig: {
url: this.url, url: this.url,
permissions: { permissions: {
@@ -175,86 +153,40 @@ export default {
}, },
extraQuery: this.extraQuery, extraQuery: this.extraQuery,
columnsExclude: ['spec_info'], columnsExclude: ['spec_info'],
columnsAdd: ['secret', 'platform', 'connect'],
columnsShow: { columnsShow: {
min: ['name', 'username', 'actions'], min: ['name', 'username', 'actions'],
default: this.columnsDefault default: this.columnsDefault
}, },
columnsMeta: { columnsMeta: {
name: { name: {
minWidth: '60px', width: '120px',
formatterArgs: { formatter: function(row) {
can: () => vm.$hasPerm('accounts.view_account'), const to = {
getRoute: ({ row }) => ({ name: 'AssetAccountDetail',
name: 'AccountDetail',
params: { id: row.id } params: { id: row.id }
}),
getTitle: ({ row }) => {
let title = row.name
if (row.ds && this.asset && this.asset.id !== row.asset.id) {
const dsID = row.ds.id.split('-')[0]
title = `${row.name}@${dsID}`
}
return title
},
getDrawerTitle({ row }) {
return `${row.username}@${row.asset.name}`
} }
} if (vm.$hasPerm('accounts.view_account')) {
}, return <router-link to={to}>{row.name}</router-link>
secret: {
formatter: SecretViewerFormatter,
width: '130px',
formatterArgs: {
secretFrom: 'api',
hasDownload: false,
actionLeft: true
}
},
connect: {
label: this.$t('Connect'),
width: '80px',
formatter: AccountConnectFormatter,
formatterArgs: {
asset: this.asset,
can: ({ row }) => {
return this.currentUserIsSuperAdmin
}
}
},
ds: {
width: '100px',
formatter: (row) => {
if (row.ds && row.ds['domain_name']) {
return row.ds['domain_name']
} else { } else {
return '' return <span>{row.name}</span>
} }
} }
}, },
platform: {
label: this.$t('Platform'),
width: '150px',
formatter: PlatformFormatter,
formatterArgs: {
platformAttr: 'asset.platform'
}
},
asset: { asset: {
minWidth: '100px',
formatter: function(row) { formatter: function(row) {
return row.asset.name const to = {
name: 'AssetDetail',
params: { id: row.asset.id }
}
if (vm.$hasPerm('assets.view_asset')) {
return <router-link to={to}>{row.asset.name}</router-link>
} else {
return <span>{row.asset.name}</span>
}
} }
}, },
username: { username: {
minWidth: '60px', width: '120px'
formatter: function(row) {
if (row.ds && row.ds['domain_name']) {
return `${row.username}@${row.ds['domain_name']}`
} else {
return row.username
}
}
}, },
secret_type: { secret_type: {
formatter: function(row) { formatter: function(row) {
@@ -282,19 +214,77 @@ export default {
connectivity: connectivityMeta, connectivity: connectivityMeta,
actions: { actions: {
formatter: ActionsFormatter, formatter: ActionsFormatter,
has: this.showActions,
formatterArgs: { formatterArgs: {
performDelete: ({ row }) => {
const id = row.id
const url = `/api/v1/accounts/accounts/${id}/`
return this.$axios.delete(url)
},
hasUpdate: false, // can set function(row, value) hasUpdate: false, // can set function(row, value)
hasDelete: true, // can set function(row, value) hasDelete: false, // can set function(row, value)
hasClone: false, hasClone: this.hasClone,
canDelete: ({ row }) => vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
moreActionsTitle: this.$t('More'), moreActionsTitle: this.$t('More'),
extraActions: accountOtherActions(this) extraActions: [
{
name: 'View',
title: this.$t('View'),
can: this.$hasPerm('accounts.view_accountsecret'),
type: 'primary',
callback: ({ row }) => {
// debugger
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
vm.account = row
vm.showViewSecretDialog = false
setTimeout(() => {
vm.showViewSecretDialog = true
})
}
},
{
name: 'Update',
title: this.$t('Edit'),
can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
callback: ({ row }) => {
const data = {
...this.asset,
...row.asset
}
vm.account = row
vm.iAsset = data
vm.showAddDialog = false
vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
setTimeout(() => {
vm.showAddDialog = true
})
}
},
{
name: 'Test',
title: this.$t('Test'),
can: ({ row }) =>
!this.$store.getters.currentOrgIsRoot &&
this.$hasPerm('accounts.verify_account') &&
row.asset['auto_config'].ansible_enabled &&
row.asset['auto_config'].ping_enabled,
callback: ({ row }) => {
this.$axios.post(
`/api/v1/accounts/accounts/tasks/`,
{ action: 'verify', accounts: [row.id] }
).then(res => {
openTaskPage(res['task'])
})
}
},
{
name: 'ClearSecret',
title: this.$t('ClearSecret'),
can: this.$hasPerm('accounts.change_account'),
type: 'primary',
callback: ({ row }) => {
this.$axios.patch(
`/api/v1/accounts/accounts/clear-secret/`,
{ account_ids: [row.id] }
).then(() => {
this.$message.success(this.$tc('ClearSuccessMsg'))
})
}
}
]
} }
}, },
...this.columnsMeta ...this.columnsMeta
@@ -323,15 +313,15 @@ export default {
type: 'primary', type: 'primary',
icon: 'plus', icon: 'plus',
can: () => { can: () => {
return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
}, },
callback: () => { callback: async() => {
await this.getAssetDetail()
setTimeout(() => { setTimeout(() => {
vm.iAsset = this.asset vm.iAsset = this.asset
vm.account = {} vm.account = {}
this.addTemplate = false vm.showAddDialog = true
this.showAddDialog = true })
}, 200)
} }
}, },
{ {
@@ -339,15 +329,14 @@ export default {
title: this.$t('TemplateAdd'), title: this.$t('TemplateAdd'),
has: !(this.platform || this.asset), has: !(this.platform || this.asset),
can: () => { can: () => {
return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
}, },
callback: async () => { callback: async() => {
await this.getAssetDetail() await this.getAssetDetail()
setTimeout(() => { setTimeout(() => {
vm.iAsset = this.asset vm.iAsset = this.asset
vm.account = {} vm.account = {}
vm.showAddDialog = true vm.showAddTemplateDialog = true
vm.addTemplate = true
}) })
} }
}, },
@@ -358,11 +347,11 @@ export default {
name: 'TestSelected', name: 'TestSelected',
title: this.$t('TestSelected'), title: this.$t('TestSelected'),
type: 'primary', type: 'primary',
icon: 'verify', icon: 'fa-link',
can: ({ selectedRows }) => { can: ({ selectedRows }) => {
return selectedRows.length > 0 && return selectedRows.length > 0 &&
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 && ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
!this.$store.getters.currentOrgIsRoot && vm.$hasPerm('accounts.verify_account') !this.$store.getters.currentOrgIsRoot
}, },
callback: function({ selectedRows }) { callback: function({ selectedRows }) {
const ids = selectedRows.map(v => { const ids = selectedRows.map(v => {
@@ -427,18 +416,6 @@ export default {
} }
} }
}, },
computed: {
...mapGetters(['currentUserIsSuperAdmin']),
accountCreateUpdateTitle() {
if (this.addTemplate) {
return this.$t('AddAccountByTemplate')
} else if (this.isUpdateAccount) {
return this.$t('UpdateAccount')
} else {
return this.$t('AddAccount')
}
}
},
watch: { watch: {
url(iNew) { url(iNew) {
this.$set(this.tableConfig, 'url', iNew) this.$set(this.tableConfig, 'url', iNew)
@@ -446,39 +423,56 @@ export default {
} }
}, },
mounted() { mounted() {
this.setActions() if (this.columns.length > 0) {
this.tableConfig.columns = this.columns
}
if (this.otherActions) {
const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
for (const item of this.otherActions) {
actionColumn.formatterArgs.extraActions.push(item)
}
}
if (this.hasDeleteAction) {
this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
{
name: 'Delete',
title: this.$t('Delete'),
can: this.$hasPerm('accounts.delete_account'),
type: 'primary',
callback: ({ row }) => {
const msg = this.$t('AccountDeleteConfirmMsg')
this.$confirm(msg, this.$tc('Info'), {
type: 'warning',
confirmButtonClass: 'el-button--danger',
beforeClose: async(action, instance, done) => {
if (action !== 'confirm') return done()
this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
done()
this.$refs.ListTable.reloadTable()
this.$message.success(this.$tc('DeleteSuccessMsg'))
})
}
})
}
}
)
}
}, },
activated() { activated() {
// 由于组件嵌套较深,有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题 // 由于组件嵌套较深,有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
if (this.tabDeactivated) { setTimeout(() => {
setTimeout(() => this.refresh(), 300) this.refresh()
} }, 300)
},
deactivated() {
this.tabDeactivated = true
}, },
methods: { methods: {
setActions() {
if (this.columns.length > 0) {
this.tableConfig.columns = this.columns
}
if (this.otherActions) {
const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
for (const item of this.otherActions) {
actionColumn.formatterArgs.extraActions.push(item)
}
}
},
onUpdateAuthDone(account) { onUpdateAuthDone(account) {
Object.assign(this.account, account) Object.assign(this.account, account)
}, },
addAccountSuccess() { addAccountSuccess() {
// Reflect.deleteProperty(this.$route.query, 'flag')
this.isUpdateAccount = false
this.$refs.ListTable.reloadTable() this.$refs.ListTable.reloadTable()
}, },
async getAssetDetail() { async getAssetDetail() {
const { query: { asset } } = this.$route const { query: { asset }} = this.$route
if (asset) { if (asset) {
this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`) this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
} }
@@ -513,7 +507,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.cell a { .cell a {
color: var(--color-info); color: var(--color-info);
} }

View File

@@ -49,10 +49,6 @@ export default {
prop: 'asset', prop: 'asset',
label: this.$t('Asset') label: this.$t('Asset')
}, },
{
prop: 'account',
label: this.$t('Account')
},
{ {
prop: 'state', prop: 'state',
label: this.$t('Status'), label: this.$t('Status'),

View File

@@ -4,7 +4,7 @@
<script> <script>
import { GenericListTableDialog } from '@/layout/components' import { GenericListTableDialog } from '@/layout/components'
import { SecretViewerFormatter } from '@/components/Table/TableFormatters' import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
export default { export default {
components: { components: {
@@ -33,7 +33,7 @@ export default {
columnsMeta: { columnsMeta: {
secret: { secret: {
label: this.$t('Password'), label: this.$t('Password'),
formatter: SecretViewerFormatter, formatter: ShowKeyCopyFormatter,
formatterArgs: { formatterArgs: {
hasDownload: false, hasDownload: false,
name: this.account.name name: this.account.name

View File

@@ -12,7 +12,7 @@
<script> <script>
import Dialog from '@/components/Dialog/index.vue' import Dialog from '@/components/Dialog/index.vue'
import { openTaskPage } from '@/utils/jms/index' import { openTaskPage } from '@/utils/jms'
export default { export default {
name: 'RemoveAccount', name: 'RemoveAccount',

View File

@@ -1,36 +1,44 @@
<template> <template>
<Dialog <Dialog
:destroy-on-close="true" :destroy-on-close="true"
:show-buttons="false"
:title="$tc('UpdateAssetUserToken')" :title="$tc('UpdateAssetUserToken')"
:visible.sync="iVisible" :visible.sync="visible"
width="800px" width="50"
@cancel="handleCancel()"
@confirm="handleConfirm()"
v-on="$listeners" v-on="$listeners"
> >
<AutoDataForm <el-form label-position="right" label-width="90px">
:fields="fields" <el-form-item :label="$tc('Name')">
:fields-meta="fieldsMeta" <el-input v-model="account['asset_name']" readonly />
:form="init" </el-form-item>
:has-reset="false" <el-form-item :label="$tc('Username')">
:has-save-continue="false" <el-input v-model="account['username']" readonly />
:url="''" </el-form-item>
method="patch" <el-form-item :label="$tc('Password')">
@submit="handleConfirm" <UpdateToken v-model="authInfo.password" />
/> </el-form-item>
<el-form-item :label="$tc('SSHSecretKey')">
<UploadKey @input="getFile" />
</el-form-item>
<el-form-item :label="$tc('Passphrase')">
<UpdateToken v-model="authInfo.passphrase" />
</el-form-item>
</el-form>
</Dialog> </Dialog>
</template> </template>
<script> <script>
import Dialog from '@/components/Dialog/index.vue' import Dialog from '@/components/Dialog/index.vue'
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const' import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
import { encryptPassword } from '@/utils/secure' import { encryptPassword } from '@/utils/crypto'
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
export default { export default {
name: 'UpdateSecretInfo', name: 'UpdateSecretInfo',
components: { components: {
AutoDataForm, Dialog,
Dialog UploadKey,
UpdateToken
}, },
props: { props: {
account: { account: {
@@ -43,59 +51,49 @@ export default {
} }
}, },
data() { data() {
const accountMeta = accountFieldsMeta(this)
return { return {
fields: [ secretInfo: {
'name', 'secret_type', 'password', 'ssh_key', 'token', password: '',
'access_key', 'passphrase', 'api_key' private_key: '',
], passphrase: ''
fieldsMeta: {
...accountMeta,
name: {
...accountMeta.name,
readonly: true
},
secret_type: {
hidden: () => true
}
},
init: {
...this.account
}
}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
} }
} }
}, },
methods: { methods: {
handleConfirm(form) { handleConfirm() {
const secretType = this.account.secret_type.value const data = {}
const data = { if (this.secretInfo.password !== '') {
secret: encryptPassword(form[secretType]) data.password = encryptPassword(this.secretInfo.password)
}
if (this.secretInfo.private_key !== '') {
data.private_key = encryptPassword(this.secretInfo.private_key)
if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
} }
this.$axios.patch( this.$axios.patch(
`/api/v1/accounts/accounts/${this.account.id}/`, `/api/v1/accounts/accounts/${this.account.id}/`,
data, data,
{ disableFlashErrorMsg: true } { disableFlashErrorMsg: true }
).then(res => { ).then(res => {
this.authInfo = { password: '', private_key: '' }
this.$message.success(this.$tc('UpdateSuccessMsg')) this.$message.success(this.$tc('UpdateSuccessMsg'))
this.iVisible = false this.$emit('updateAuthDone', res)
this.$emit('update:visible', false)
}).catch(err => { }).catch(err => {
const errMsg = Object.values(err.response.data).join(', ') const errMsg = Object.values(err.response.data).join(', ')
this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg) this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
this.iVisible = false this.$emit('update:visible', true)
}) })
}, },
handleCancel() { handleCancel() {
this.$emit('update:visible', false) this.$emit('update:visible', false)
},
getFile(file) {
this.secretInfo.private_key = file
} }
} }
} }
</script> </script>
<style scoped>
</style>

View File

@@ -18,7 +18,7 @@
<span>{{ account['username'] }}</span> <span>{{ account['username'] }}</span>
</el-form-item> </el-form-item>
<el-form-item :label="secretTypeLabel"> <el-form-item :label="secretTypeLabel">
<SecretViewerFormatter <ShowKeyCopyFormatter
:cell-value="secretInfo.secret" :cell-value="secretInfo.secret"
:col="{ formatterArgs: { :col="{ formatterArgs: {
name: account['name'], name: account['name'],
@@ -60,15 +60,15 @@
<script> <script>
import Dialog from '@/components/Dialog/index.vue' import Dialog from '@/components/Dialog/index.vue'
import PasswordHistoryDialog from './PasswordHistoryDialog.vue' import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
import { SecretViewerFormatter } from '@/components/Table/TableFormatters' import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
import { encryptPassword } from '@/utils/secure' import { encryptPassword } from '@/utils/crypto'
export default { export default {
name: 'ShowSecretInfo', name: 'ShowSecretInfo',
components: { components: {
Dialog, Dialog,
PasswordHistoryDialog, PasswordHistoryDialog,
SecretViewerFormatter ShowKeyCopyFormatter
}, },
props: { props: {
account: { account: {

View File

@@ -1,5 +1,4 @@
import { ChoicesFormatter } from '@/components/Table/TableFormatters' import { ChoicesFormatter } from '@/components/Table/TableFormatters'
import { openTaskPage } from '@/utils/jms/index'
export const connectivityMeta = { export const connectivityMeta = {
formatter: ChoicesFormatter, formatter: ChoicesFormatter,
@@ -7,23 +6,11 @@ export const connectivityMeta = {
faChoices: { faChoices: {
'-': '', '-': '',
ok: 'fa-check-circle', ok: 'fa-check-circle',
err: 'fa-times-circle', err: 'fa-times-circle'
auth_err: 'fa-times-circle',
rdp_err: 'fa-times-circle',
password_err: 'fa-times-circle',
openssh_key_err: 'fa-times-circle',
ntlm_err: 'fa-times-circle',
create_temp_err: 'fa-times-circle'
}, },
classChoices: { classChoices: {
ok: 'text-primary', ok: 'text-primary',
err: 'text-danger', err: 'text-danger'
auth_err: 'text-danger',
rdp_err: 'text-danger',
password_err: 'text-danger',
openssh_key_err: 'text-danger',
ntlm_err: 'text-danger',
create_temp_err: 'text-danger'
}, },
getText({ cellValue }) { getText({ cellValue }) {
if (cellValue?.value === '-' || cellValue?.value === 'unknown') { if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
@@ -35,316 +22,3 @@ export const connectivityMeta = {
}, },
width: '130px' width: '130px'
} }
export function isDirectoryServiceAccount(account, vm) {
return vm.asset && vm.asset.id !== account.asset.id
}
export const accountOtherActions = vm => {
return [
{
name: 'View',
title: vm.$t('View'),
can: vm.$hasPerm('accounts.view_accountsecret'),
type: 'primary',
order: 1,
callback: ({ row }) => {
// debugger
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
vm.account = row
vm.showViewSecretDialog = false
setTimeout(() => {
vm.showViewSecretDialog = true
})
}
},
{
name: 'Update',
title: vm.$t('Edit'),
can: ({ row }) => {
return (
vm.$hasPerm('accounts.change_account') &&
!vm.$store.getters.currentOrgIsRoot &&
!isDirectoryServiceAccount(row, vm)
)
},
callback: ({ row }) => {
vm.isUpdateAccount = true
const data = {
...vm.asset,
...row.asset
}
vm.iAsset = data
vm.account = row
vm.addTemplate = false
vm.showAddDialog = false
setTimeout(() => {
vm.showAddDialog = true
})
}
},
{
name: 'UpdateSecret',
title: vm.$t('EditSecret'),
can: ({ row }) => {
return (
vm.$hasPerm('accounts.change_account') &&
!vm.$store.getters.currentOrgIsRoot &&
!isDirectoryServiceAccount(row, vm)
)
},
callback: ({ row }) => {
const data = {
...vm.asset,
...row.asset
}
vm.account = row
vm.iAsset = data
vm.showUpdateSecretDialog = false
vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
setTimeout(() => {
vm.showUpdateSecretDialog = true
})
}
},
{
name: 'Clone',
title: vm.$t('Duplicate'),
has: () => {
return !vm.asset
},
can: ({ row }) => {
return (
vm.$hasPerm('accounts.add_account') &&
!vm.$store.getters.currentOrgIsRoot &&
!isDirectoryServiceAccount(row, vm)
)
},
callback: ({ row }) => {
vm.account = {
name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
payload: 'pam_account_clone'
}
vm.iAsset = vm.asset
vm.showAddDialog = false
setTimeout(() => {
vm.showAddDialog = true
})
}
},
{
name: 'Test',
title: vm.$t('VerifySecret'),
divided: true,
can: ({ row }) =>
!vm.$store.getters.currentOrgIsRoot &&
vm.$hasPerm('accounts.verify_account') &&
row.asset['auto_config'].ansible_enabled &&
row.asset['auto_config'].ping_enabled,
callback: ({ row }) => {
vm.$axios
.post(`/api/v1/accounts/accounts/tasks/`, { action: 'verify', accounts: [row.id] })
.then(res => {
openTaskPage(res['task'])
})
}
},
{
name: 'ClearSecret',
title: vm.$t('ClearSecret'),
can: ({ row }) => {
return vm.$hasPerm('accounts.change_account') && !isDirectoryServiceAccount(row, vm)
},
type: 'primary',
callback: ({ row }) => {
vm.$axios
.patch(`/api/v1/accounts/accounts/clear-secret/`, { account_ids: [row.id] })
.then(() => {
vm.$message.success(vm.$tc('ClearSuccessMsg'))
})
}
},
{
name: 'SecretHistory',
title: vm.$t('HistoryPassword'),
can: () => vm.$hasPerm('accounts.view_accountsecret'),
type: 'primary',
callback: ({ row }) => {
vm.account = row
vm.currentAccountColumn = row
vm.showViewSecretDialog = false
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
setTimeout(() => {
vm.showViewSecretDialog = true
})
}
},
{
name: 'CopyToOther',
title: vm.$t('CopyToAsset'),
type: 'primary',
divided: true,
can: ({ row }) => {
return (
vm.$hasPerm('accounts.add_account') &&
!vm.$store.getters.currentOrgIsRoot &&
!isDirectoryServiceAccount(row, vm)
)
},
has: () => {
return !vm.asset
},
callback: ({ row }) => {
vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
vm.$route.query.flag = 'copy'
vm.iAsset = vm.asset
vm.account = row
vm.showAddDialog = true
}
},
{
name: 'MoveToOther',
title: vm.$t('MoveToAsset'),
type: 'primary',
can: ({ row }) => {
return (
vm.$hasPerm('accounts.delete_account') &&
!vm.$store.getters.currentOrgIsRoot &&
!isDirectoryServiceAccount(row, vm)
)
},
has: () => {
return !vm.asset
},
callback: ({ row }) => {
vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
vm.$route.query.flag = 'move'
vm.iAsset = vm.asset
vm.account = row
vm.showAddDialog = true
}
}
]
}
export const accountQuickFilters = vm => [
{
label: vm.$t('Recent (7 days)'),
options: [
{
label: vm.$t('RecentlyDiscovered'),
filter: {
latest_discovery: '1'
}
},
{
label: vm.$t('RecentlyLoggedIn'),
filter: {
latest_accessed: '1'
}
},
{
label: vm.$t('RecentlyModified'),
filter: {
latest_updated: '1'
}
},
{
label: vm.$t('RecentlyChangedPassword'),
filter: {
latest_secret_changed: '1'
}
},
{
label: vm.$t('RecentPasswordChangeFailed'),
filter: {
latest_secret_change_failed: '1'
}
}
]
},
{
label: vm.$t('RiskyAccount'),
options: [
{
label: vm.$t('NoLoginLongTime'),
filter: {
long_time_no_login: 'true'
}
},
{
label: vm.$t('AddAccount'),
filter: {
risk: 'new_found'
}
},
{
label: vm.$t('WeakPassword'),
filter: {
risk: 'weak_password'
}
},
{
label: vm.$t('EmptyPassword'),
filter: {
has_secret: 'false'
}
},
{
label: vm.$t('LongTimePassword'),
filter: {
long_time_no_change_secret: 'true'
}
}
]
},
{
label: vm.$t('AccountType'),
options: [
{
label: vm.$t('All'),
filter: {
category: ''
}
},
{
label: vm.$t('Host'),
filter: {
category: 'host'
}
},
{
label: vm.$t('Database'),
filter: {
category: 'database'
}
},
{
label: vm.$t('Cloud'),
filter: {
category: 'cloud'
}
},
{
label: vm.$t('Device'),
filter: {
category: 'device'
}
},
{
label: 'Web',
filter: {
category: 'web'
}
},
{
label: vm.$t('Other'),
filter: {
category: 'custom'
}
}
]
}
]

View File

@@ -16,7 +16,7 @@
</template> </template>
<script> <script>
import IBox from '@/components/Common/IBox/index.vue' import IBox from '@/components/IBox/index.vue'
import AssetSelect from '@/components/Apps/AssetSelect/index.vue' import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
export default { export default {
@@ -48,13 +48,11 @@ export default {
}, },
performAdd: { performAdd: {
type: Function, type: Function,
default: (objects, that) => { default: (objects, that) => {}
}
}, },
onAddSuccess: { onAddSuccess: {
type: Function, type: Function,
default: (objects, that) => { default: (objects, that) => {}
}
}, },
canSelect: { canSelect: {
type: Function, type: Function,
@@ -64,7 +62,8 @@ export default {
} }
}, },
data() { data() {
return {} return {
}
}, },
methods: { methods: {
addObjects() { addObjects() {
@@ -78,18 +77,18 @@ export default {
</script> </script>
<style scoped> <style scoped>
b, strong { b, strong {
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
} }
tr td { tr td {
line-height: 1.42857; line-height: 1.42857;
padding: 8px; padding: 8px;
vertical-align: top; vertical-align: top;
} }
tr.item td { tr.item td {
border-top: 1px solid #e7eaec; border-top: 1px solid #e7eaec;
} }
</style> </style>

View File

@@ -2,6 +2,7 @@
<Dialog <Dialog
:close-on-click-modal="false" :close-on-click-modal="false"
:title="$tc('Assets')" :title="$tc('Assets')"
:disabled-status="!isLoaded"
custom-class="asset-select-dialog" custom-class="asset-select-dialog"
top="2vh" top="2vh"
v-bind="$attrs" v-bind="$attrs"
@@ -22,8 +23,8 @@
:url="baseUrl" :url="baseUrl"
class="tree-table" class="tree-table"
v-bind="$attrs" v-bind="$attrs"
@loaded="handleTableLoaded"
v-on="$listeners" v-on="$listeners"
@loaded="handleTableLoaded"
/> />
</Dialog> </Dialog>
</template> </template>
@@ -82,7 +83,7 @@ export default {
}, },
{ {
prop: 'address', prop: 'address',
label: this.$t('Address'), label: this.$t('IpDomain'),
sortable: 'custom' sortable: 'custom'
}, },
{ {

View File

@@ -56,10 +56,6 @@ export default {
treeSetting: { treeSetting: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
},
disabled: {
type: [Boolean, Function],
default: false
} }
}, },
data() { data() {
@@ -75,7 +71,6 @@ export default {
dialogVisible: false, dialogVisible: false,
initialValue: _.cloneDeep(iValue), initialValue: _.cloneDeep(iValue),
select2Config: { select2Config: {
disabled: this.disabled,
value: iValue, value: iValue,
multiple: true, multiple: true,
clearable: true, clearable: true,

View File

@@ -20,7 +20,7 @@
<script> <script>
import TreeTable from '../../Table/TreeTable/index.vue' import TreeTable from '../../Table/TreeTable/index.vue'
import { setRouterQuery, setUrlParam } from '@/utils/common/index' import { setRouterQuery, setUrlParam } from '@/utils/common'
import $ from '@/utils/jquery-vendor' import $ from '@/utils/jquery-vendor'
export default { export default {
@@ -32,10 +32,6 @@ export default {
type: String, type: String,
default: '/api/v1/assets/assets/' default: '/api/v1/assets/assets/'
}, },
typeUrl: {
type: String,
default: '/api/v1/assets/nodes/category/tree/'
},
nodeUrl: { nodeUrl: {
type: String, type: String,
default: '/api/v1/assets/nodes/' default: '/api/v1/assets/nodes/'
@@ -109,16 +105,11 @@ export default {
showAssets: false, showAssets: false,
showSearch: false, showSearch: false,
customTreeHeaderName: this.$t('TypeTree'), customTreeHeaderName: this.$t('TypeTree'),
url: this.typeUrl, url: '/api/v1/assets/nodes/category/tree/',
nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl, nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`, treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
callback: { callback: {
onSelected: (event, treeNode) => this.getAssetsUrl(treeNode) onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
},
edit: {
drag: {
isMove: false
}
} }
} }
} }
@@ -147,9 +138,6 @@ export default {
treeSetting.showDelete = this.$hasPerm('assets.delete_node') treeSetting.showDelete = this.$hasPerm('assets.delete_node')
}, },
methods: { methods: {
reloadTable() {
this.$refs.TreeList.reloadTable()
},
setTreeUrlQuery() { setTreeUrlQuery() {
let str = '' let str = ''
for (const key in this.treeUrlQuery) { for (const key in this.treeUrlQuery) {

View File

@@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import { DrawerListTable as ListTable } from '@/components' import ListTable from '@/components/Table/ListTable/index.vue'
export default { export default {
name: 'BlockedIPList', name: 'BlockedIPList',

View File

@@ -12,7 +12,7 @@
> >
<el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px"> <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
<el-form-item :label="$tc('OldSecret')"> <el-form-item :label="$tc('OldSecret')">
<SecretViewerFormatter <ShowKeyCopyFormatter
:cell-value="secretInfo.old_secret" :cell-value="secretInfo.old_secret"
:col="{ formatterArgs: { :col="{ formatterArgs: {
name: 'old_secret' name: 'old_secret'
@@ -20,7 +20,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item :label="$tc('NewSecret')"> <el-form-item :label="$tc('NewSecret')">
<SecretViewerFormatter <ShowKeyCopyFormatter
:cell-value="secretInfo.new_secret" :cell-value="secretInfo.new_secret"
:col="{ formatterArgs: { :col="{ formatterArgs: {
name: 'new_secret' name: 'new_secret'
@@ -34,13 +34,13 @@
<script> <script>
import Dialog from '@/components/Dialog/index.vue' import Dialog from '@/components/Dialog/index.vue'
import { SecretViewerFormatter } from '@/components/Table/TableFormatters' import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
export default { export default {
name: 'RecordViewSecret', name: 'RecordViewSecret',
components: { components: {
Dialog, Dialog,
SecretViewerFormatter ShowKeyCopyFormatter
}, },
props: { props: {
visible: { visible: {

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<div v-if="hasPrompt" class="chat-action"> <div class="chat-action">
<Select2 <Select2
v-model="select.value" v-model="select.value"
:disabled="isLoading || isSelectDisabled" :disabled="isLoading || isSelectDisabled"
@@ -36,10 +36,6 @@ export default {
expanded: { expanded: {
type: Boolean, type: Boolean,
default: false default: false
},
hasPrompt: {
type: Boolean,
default: true
} }
}, },
data() { data() {
@@ -50,7 +46,7 @@ export default {
url: '/api/v1/settings/chatai-prompts/', url: '/api/v1/settings/chatai-prompts/',
value: '', value: '',
multiple: false, multiple: false,
placeholder: this.$t('Role'), placeholder: this.$t('Prompt'),
ajax: { ajax: {
transformOption: (item) => { transformOption: (item) => {
return { label: item.name, value: item.content } return { label: item.name, value: item.content }

View File

@@ -1,73 +1,42 @@
<template> <template>
<div :class="{ 'user-role': isUserRole }" class="chat-item"> <div :class="{'user-role': isUserRole}" class="chat-item">
<div class="chart-item-container"> <div class="avatar">
<div class="avatar"> <el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
<el-avatar </div>
:src="isUserRole ? userUrl : chatUrl" <div class="content">
class="header-avatar" <div class="operational">
/> <span class="date">
{{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
</span>
</div> </div>
<div class="content"> <div class="message">
<div class="operational"> <div class="message-content">
<div v-if="!item.message.is_reasoning" class="date"> <span v-if="isSystemError" class="error">
{{ {{ item.message.content }}
$moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss") </span>
}} <span v-else class="chat-text">
</div> <MessageText :message="item.message" />
</span>
<div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</div>
</div> </div>
<div :class="item.reasoning ? 'reasoning' : 'message'"> <div class="action">
<div class="message-content"> <el-tooltip
<div v-if="!item.reasoning"> v-if="isSystemError && isLoading"
<span v-if="isSystemError" class="error"> :content="$tc('Reconnect')"
{{ item.message.content }} :open-delay="500"
</span> placement="top"
<span v-else class="chat-text"> >
<MessageText :message="item.message" /> <svg-icon icon-class="refresh" @click="onRefresh" />
</span> </el-tooltip>
</div> <el-dropdown v-else size="small" @command="handleCommand">
<span class="el-dropdown-link">
<div v-else class="thinking-wrapper"> <i class="fa fa-ellipsis-v" />
<div class="thinking-content"> </span>
<!-- eslint-disable-next-line --> <el-dropdown-menu slot="dropdown">
<div class="divider"></div> <el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
<p> {{ i.label }}
<MessageText :message="item.reasoning" @insert-code="handleInsertCode" /> </el-dropdown-item>
</p> </el-dropdown-menu>
</div> </el-dropdown>
<div class="thinking-result">
<span v-if="isServerError" class="error">
{{ isServerError }}
</span>
<MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
</div>
</div>
<div class="action">
<el-tooltip
v-if="isSystemError && isLoading"
:content="$tc('Reconnect')"
:open-delay="500"
placement="top"
>
<svg-icon icon-class="refresh" @click="onRefresh" />
</el-tooltip>
<el-dropdown v-else size="small" @command="handleCommand">
<span class="el-dropdown-link">
<i class="fa fa-ellipsis-v" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="i in dropdownOptions"
:key="i.action"
:command="i.action"
>
{{ i.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -76,10 +45,10 @@
<script> <script>
import MessageText from './MessageText.vue' import MessageText from './MessageText.vue'
import { mapGetters, mapState } from 'vuex' import { mapState } from 'vuex'
import { copy } from '@/utils/common/index' import { copy } from '@/utils/common'
import { useChat } from '../../useChat.js' import { useChat } from '../../useChat.js'
import { reconnect } from '@/utils/request' import { reconnect } from '@/utils/socket'
const { setLoading, removeLoadingMessageInChat } = useChat() const { setLoading, removeLoadingMessageInChat } = useChat()
@@ -92,14 +61,11 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
} }
},
isTerminal: {
type: Boolean,
default: false
} }
}, },
data() { data() {
return { return {
chatUrl: require('@/assets/img/chat.png'),
userUrl: '/api/v1/settings/logo/', userUrl: '/api/v1/settings/logo/',
dropdownOptions: [ dropdownOptions: [
{ {
@@ -113,26 +79,11 @@ export default {
...mapState({ ...mapState({
isLoading: state => state.chat.loading isLoading: state => state.chat.loading
}), }),
...mapGetters([
'publicSettings'
]),
isUserRole() { isUserRole() {
return this.item.message?.role === 'user' return this.item.message?.role === 'user'
}, },
isSystemError() { isSystemError() {
return ( return this.item.type === 'error' && this.item.message?.role === 'assistant'
this.item.type === 'error' && this.item?.role === 'assistant'
)
},
isServerError() {
return (this.item.type === 'finish' && this.item.result.content === '')
? this.$i18n.t('ServerBusyRetry')
: ''
},
chatUrl() {
return this.publicSettings.CHAT_AI_TYPE === 'gpt'
? require('@/assets/img/chat.png')
: require('@/assets/img/deepSeek.png')
} }
}, },
methods: { methods: {
@@ -143,11 +94,8 @@ export default {
}, },
handleCommand(value) { handleCommand(value) {
if (value === 'copy') { if (value === 'copy') {
copy(this.item.result.content) copy(this.item.message.content)
} }
},
handleInsertCode(code) {
this.$emit('insert-code', code)
} }
} }
} }
@@ -156,160 +104,101 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.chat-item { .chat-item {
display: flex; display: flex;
padding: 0.5rem; padding: 16px 14px 0;
.chart-item-container {
display: flex;
gap: 0.5rem;
.avatar {
width: 24px;
height: 24px;
margin-top: 2px;
.header-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
&::v-deep img {
background-color: #fff;
}
}
}
.content {
display: flex;
flex-direction: column;
// gap: 0.5rem;
overflow: hidden;
.operational {
display: flex;
justify-content: space-between;
overflow: hidden;
.date {
padding-top: 5px;
}
.thinking-time {
width: 6rem;
display: flex;
justify-content: center;
padding: 5px 10px;
border-radius: 0.5rem;
background-color: #f5f5f5;
}
.copy {
float: right;
cursor: pointer;
}
}
.reasoning {
display: flex;
gap: 0.5rem;
align-items: flex-end;
.message-content .thinking-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
.thinking-content {
position: relative;
color: #8b8b8b;
.divider {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 2px solid #e5e5e5;
}
p {
margin: unset;
padding-left: 0.5rem;
::v-deep p {
color: #8b8b8b;
}
}
}
}
}
.message {
display: -webkit-box;
.message-content {
flex: 1;
padding: 6px 10px;
border-radius: 2px 12px 12px;
background-color: #f0f1f5;
}
.action {
.svg-icon {
transform: translateY(50%);
margin-left: 3px;
cursor: pointer;
}
.el-dropdown {
height: 32px;
line-height: 37px;
font-size: 13px;
.el-dropdown-link {
i {
padding: 4px 5px;
font-size: 15px;
color: #8d9091;
&:hover {
color: #7b8085;
}
}
}
}
}
.error {
color: red;
}
}
}
}
&:last-child { &:last-child {
padding-bottom: 16px; padding-bottom: 16px;
} }
&.user-role { .avatar {
flex-direction: row-reverse; width: 22px;
height: 22px;
margin-top: 2px;
.chart-item-container { .header-avatar {
width: 100%;
height: 100%;
&::v-deep img {
background-color: #e5e5e7;
}
}
}
.content {
margin-left: 6px;
overflow: hidden;
.operational {
display: flex;
justify-content: space-between;
overflow: hidden;
.copy {
float: right;
cursor: pointer;
}
}
.message {
display: -webkit-box;
.message-content {
flex: 1;
padding: 6px 10px;
border-radius: 2px 12px 12px;
background-color: #f0f1f5;
}
.action {
.svg-icon {
transform: translateY(50%);
margin-left: 3px;
cursor: pointer;
}
.el-dropdown {
height: 32px;
line-height: 37px;
font-size: 13px;
.el-dropdown-link {
i {
padding: 4px 5px;
font-size: 15px;
color: #8d9091;
&:hover {
color: #7b8085
}
}
}
}
}
.error {
color: red;
}
}
}
}
.user-role {
flex-direction: row-reverse;
.content {
margin-right: 10px;
.operational {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.content { .message {
margin-right: 10px; flex-direction: row-reverse;
.operational { .message-content {
flex-direction: row-reverse; background-color: var(--menu-hover);
} border-radius: 12px 2px 12px 12px;
.message {
flex-direction: row-reverse;
.message-content {
background-color: var(--menu-hover);
border-radius: 12px 2px 12px 12px;
}
} }
} }
} }

View File

@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
import mila from 'markdown-it-link-attributes' import mila from 'markdown-it-link-attributes'
import hljs from 'highlight.js' import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css' import 'highlight.js/styles/atom-one-dark.css'
import { copy } from '@/utils/common/index' import { copy } from '@/utils/common'
export default { export default {
props: { props: {
@@ -25,10 +25,6 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
} }
},
isTerminal: {
type: Boolean,
default: false
} }
}, },
data() { data() {
@@ -49,10 +45,10 @@ export default {
this.init() this.init()
}, },
updated() { updated() {
this.addEvents() this.addCopyEvents()
}, },
destroyed() { destroyed() {
this.removeEvents() this.removeCopyEvents()
}, },
methods: { methods: {
init() { init() {
@@ -69,68 +65,30 @@ export default {
return vm.highlightBlock(hljs.highlightAuto(code).value, '') return vm.highlightBlock(hljs.highlightAuto(code).value, '')
} }
}) })
this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' } }) this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' }})
this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' }) this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
}, },
highlightBlock(str, lang) { highlightBlock(str, lang) {
let insertSpanHtml = `<span class="code-block-header__insert">${this.$t('Insert')}</span>` return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
if (!this.isTerminal) {
insertSpanHtml = ''
}
return `<pre class="code-block-wrapper">
<div class="code-block-header">
<span class="code-block-header__lang">${lang}</span>
<span class="code-block-header__actions">
${insertSpanHtml}
<span class="code-block-header__copy">${this.$t('Copy')}</span>
</span>
</div>
<code class="hljs code-block-body ${lang}">${str}</code></pre>`
}, },
addEvents() { addCopyEvents() {
this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy) const copyBtn = document.querySelectorAll('.code-block-header__copy')
this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert) copyBtn.forEach((btn) => {
}, btn.addEventListener('click', () => {
const code = btn.parentElement?.nextElementSibling?.textContent
handlerClickCopy(event) { if (code) {
const wrapper = event.target.closest('.code-block-wrapper') copy(code)
if (wrapper) { }
// 查找里面的 code 元素
const codeElement = wrapper.querySelector('code.code-block-body')
if (codeElement) {
const codeText = codeElement.textContent
copy(codeText)
}
}
},
handlerClickInsert(event) {
const wrapper = event.target.closest('.code-block-wrapper')
if (wrapper) {
// 查找里面的 code 元素
const codeElement = wrapper.querySelector('code.code-block-body')
if (codeElement) {
const codeText = codeElement.textContent
this.$emit('insert-code', codeText)
}
}
},
addBtnClickEvents(selector, callback) {
const buttons = this.$refs.textRef.querySelectorAll(selector)
buttons.forEach((btn) => {
btn.addEventListener('click', callback)
})
},
removeBtnClickEvent(selector) {
const buttons = this.$refs.textRef.querySelectorAll(selector)
buttons.forEach((btn) => {
btn.removeEventListener('click', () => {
}) })
}) })
}, },
removeEvents() { removeCopyEvents() {
if (this.$refs.textRef) { if (this.$refs.textRef) {
this.removeBtnClickEvent('.code-block-header__copy') const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
this.addBtnClickEvents('.code-block-header__insert') copyBtn.forEach((btn) => {
btn.removeEventListener('click', () => {
})
})
} }
} }
} }
@@ -140,7 +98,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.markdown-body { .markdown-body {
font-size: 13px; font-size: 13px;
max-width: 300px;;
&::v-deep p { &::v-deep p {
margin-bottom: 0 !important; margin-bottom: 0 !important;
@@ -158,46 +115,26 @@ export default {
&::v-deep .code-block-wrapper { &::v-deep .code-block-wrapper {
background: #1F2329; background: #1F2329;
padding: 0; padding: 2px 6px;
margin: 5px 0; margin: 5px 0;
display: flex;
flex-direction: column;
overflow: hidden;
.code-block-body { .code-block-body {
padding: 5px 10px; padding: 5px 10px 0;
} }
;
.code-block-header { .code-block-header {
margin-bottom: 4px; margin-bottom: 4px;
overflow: hidden; overflow: hidden;
background: #353946; background: #353946;
color: #c2d1e1; color: #c2d1e1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
width: 100%;
box-sizing: border-box;
.code-block-header__actions { .code-block-header__copy {
display: flex; float: right;
gap: 8px; cursor: pointer;
.code-block-header__copy { &:hover {
cursor: pointer; color: #6e747b;
&:hover {
color: #6e747b;
}
}
.code-block-header__insert {
cursor: pointer;
&:hover {
color: #6e747b;
}
} }
} }
} }
@@ -241,7 +178,6 @@ export default {
0% { 0% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }

View File

@@ -17,7 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" :is-terminal="isTerminal" @insert-code="insertCode" /> <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
</div> </div>
<div class="input-box"> <div class="input-box">
<el-button <el-button
@@ -28,7 +28,7 @@
size="small" size="small"
@click="onStopHandle" @click="onStopHandle"
>{{ $tc('Stop') }}</el-button> >{{ $tc('Stop') }}</el-button>
<ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" /> <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
</div> </div>
</div> </div>
</template> </template>
@@ -37,7 +37,7 @@
import ChatInput from './ChatInput.vue' import ChatInput from './ChatInput.vue'
import ChatMessage from './ChatMessage.vue' import ChatMessage from './ChatMessage.vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/request' import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
import { getInputFocus, useChat } from '../../useChat.js' import { getInputFocus, useChat } from '../../useChat.js'
const { const {
@@ -68,10 +68,7 @@ export default {
prompt: '', prompt: '',
conversationId: '', conversationId: '',
showIntroduction: false, showIntroduction: false,
introduction: [], introduction: []
terminalContext: null,
isTerminal: false,
sessionChat: {}
} }
}, },
computed: { computed: {
@@ -103,9 +100,6 @@ export default {
this.showIntroduction = true this.showIntroduction = true
this.conversationId = '' this.conversationId = ''
this.$refs.chatInput.select.value = '' this.$refs.chatInput.select.value = ''
if (this.terminalContext) {
this.prompt = this.terminalContext.content || ''
}
const chat = { const chat = {
message: { message: {
content: this.$t('ChatHello'), content: this.$t('ChatHello'),
@@ -129,17 +123,7 @@ export default {
setLoading(true) setLoading(true)
removeLoadingMessageInChat() removeLoadingMessageInChat()
this.conversationId = data.id this.conversationId = data.id
updateChaMessageContentById(data.message.id, data)
const newFragment = {
message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
result: { content: data.message.is_reasoning ? '' : data.message.content },
role: data.message.role,
type: data.message.type,
create_time: data.message.create_time
}
updateChaMessageContentById(data.message.id, newFragment)
} }
if (data.message?.type === 'finish') { if (data.message?.type === 'finish') {
setLoading(false) setLoading(false)
@@ -156,32 +140,6 @@ export default {
addMessageToActiveChat(data) addMessageToActiveChat(data)
setLoading(true) setLoading(true)
}, },
onTerminalContext(terminalContext) {
const originSessionId = this.terminalContext?.sessionId
const newSessionId = terminalContext.sessionId || ''
if (originSessionId) {
this.saveSessionChat(originSessionId)
}
this.terminalContext = terminalContext
this.isTerminal = true
this.prompt = terminalContext.content || ''
if (originSessionId !== newSessionId) {
if (this.sessionChat[newSessionId]) {
clearChats()
for (const chat of this.sessionChat[newSessionId]) {
addChatMessageById(chat)
}
} else {
this.onNewChat()
}
}
},
saveSessionChat(sessionId) {
if (this.terminalContext) {
this.sessionChat[sessionId] = JSON.parse(JSON.stringify(this.activeChat.chats))
}
},
onSendHandle(value) { onSendHandle(value) {
this.showIntroduction = false this.showIntroduction = false
this.socket = ws || {} this.socket = ws || {}
@@ -236,15 +194,6 @@ export default {
sendIntroduction(item) { sendIntroduction(item) {
this.showIntroduction = false this.showIntroduction = false
this.onSendHandle(item.content) this.onSendHandle(item.content)
},
insertCode(code) {
this.sendPostMessage({
name: 'INSERT_TERMINAL_CODE',
data: code.replace(/^[\s\r\n]+|[\s\r\n]+$/g, '')
})
},
sendPostMessage(data) {
window.parent.postMessage(data)
} }
} }
} }

View File

@@ -13,8 +13,6 @@
</template> </template>
<script> <script>
import { BASE_URL } from '@/utils/common/index'
export default { export default {
props: { props: {
active: { active: {
@@ -43,16 +41,6 @@ export default {
}, },
handleExpand() { handleExpand() {
this.$emit('expand-full') this.$emit('expand-full')
},
async openWebsite() {
let url = `${BASE_URL}/?_=${Date.now()}`
if (process.env.NODE_ENV !== 'production') {
url = url.replace('9528', '5173')
}
const newUrl = new URL(url)
window.open(newUrl.toString(), '_blank')
return url
} }
} }
} }

View File

@@ -1,6 +1,5 @@
<template> <template>
<DrawerPanel <DrawerPanel
v-if="visible"
ref="drawer" ref="drawer"
:default-show-panel="!!defaultShowPanel" :default-show-panel="!!defaultShowPanel"
:expanded="expanded" :expanded="expanded"
@@ -46,12 +45,9 @@
import Sidebar from './components/Sidebar/index.vue' import Sidebar from './components/Sidebar/index.vue'
import Chat from './components/ChitChat/index.vue' import Chat from './components/ChitChat/index.vue'
import { getInputFocus } from './useChat.js' import { getInputFocus } from './useChat.js'
import { ws } from '@/utils/request' import { ws } from '@/utils/socket'
import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue' import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
import { ObjectLocalStorage } from '@/utils/common'
import { mapGetters } from 'vuex'
const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
export default { export default {
components: { components: {
DrawerPanel, DrawerPanel,
@@ -76,68 +72,23 @@ export default {
}, },
data() { data() {
return { return {
visible: false,
active: 'chat', active: 'chat',
robotUrl: require('@/assets/img/robot-assistant.png'), robotUrl: require('@/assets/img/robot-assistant.png'),
height: '400px', height: '400px',
expanded: false, expanded: false,
clientOffset: {}, clientOffset: {}
currentTerminalContent: {}
} }
}, },
computed: {
...mapGetters([
'publicSettings'
])
},
watch: { watch: {
'publicSettings.CHAT_AI_METHOD': {
handler(newVal) {
this.visible = newVal === 'api'
}
}
}, },
mounted() { mounted() {
this.handleStartChat() this.handlePostMessage()
}, },
methods: { methods: {
handleStartChat() {
if (this.publicSettings.CHAT_AI_METHOD === 'api') {
this.visible = true
const expanded = aiPannelLocalStorage.get('expanded')
this.updateExpandedState(expanded)
this.handlePostMessage()
} else if (this.publicSettings.CHAT_AI_METHOD === 'embed') {
const embedScriptId = 'chat-ai-embed-id'
if (document.getElementById(embedScriptId)) {
return
}
const script = document.createElement('script')
script.id = embedScriptId
script.src = this.publicSettings.CHAT_AI_EMBED_URL
script.async = true
script.onload = () => {
const loadEvent = new Event('load', { bubbles: false, cancelable: false })
window.dispatchEvent(loadEvent)
}
document.body.appendChild(script)
}
},
handlePostMessage() { handlePostMessage() {
window.addEventListener('message', (event) => { window.addEventListener('message', (event) => {
if (event.data === 'show-chat-panel') { if (event.data === 'show-chat-panel') {
this.$refs.drawer.show = true this.$refs.drawer.show = true
this.initWebSocket()
return
}
const msg = event.data
switch (msg.name) {
case 'current_terminal_content':
// {content: '...', terminalId: '',sessionId: '',viewId: '',viewName: ''}
this.$log.debug('current_terminal_content', msg)
this.currentTerminalContent = msg.data
this.$refs.component?.onTerminalContext(msg.data)
break
} }
}) })
}, },
@@ -145,11 +96,6 @@ export default {
this.$refs.drawer.handleHeaderMoveDown(event) this.$refs.drawer.handleHeaderMoveDown(event)
}, },
handleMouseMoveUp(event) { handleMouseMoveUp(event) {
// Prevent the new chat button from triggering the header move up
const newButton = event.target.closest('.new')
if (newButton) {
return
}
this.$refs.drawer.handleHeaderMoveUp(event) this.$refs.drawer.handleHeaderMoveUp(event)
}, },
initWebSocket() { initWebSocket() {
@@ -161,20 +107,12 @@ export default {
this.$refs.drawer.show = false this.$refs.drawer.show = false
}, },
expandFull() { expandFull() {
this.updateExpandedState(true) this.height = '100%'
this.save_pannel_settings() this.expanded = true
}, },
compress() { compress() {
this.updateExpandedState(false) this.height = '400px'
this.save_pannel_settings() this.expanded = false
},
save_pannel_settings() {
aiPannelLocalStorage.set('expanded', this.expanded)
console.log('AI panel settings saved:', this.expanded)
},
updateExpandedState(expanded) {
this.expanded = expanded
this.height = expanded ? '100%' : '400px'
}, },
onNewChat() { onNewChat() {
this.active = 'chat' this.active = 'chat'

View File

@@ -1,5 +1,5 @@
import store from '@/store' import store from '@/store'
import { pageScroll } from '@/utils/common/index' import { pageScroll } from '@/utils/common'
export const getInputFocus = () => { export const getInputFocus = () => {
const dom = document.querySelector('.chat-input .el-textarea__inner') const dom = document.querySelector('.chat-input .el-textarea__inner')
@@ -9,11 +9,11 @@ export const getInputFocus = () => {
export function useChat() { export function useChat() {
const chatStore = {} const chatStore = {}
const setLoading = loading => { const setLoading = (loading) => {
store.commit('chat/setLoading', loading) store.commit('chat/setLoading', loading)
} }
const onNewChat = name => { const onNewChat = (name) => {
const data = { const data = {
name: name || `new chat`, name: name || `new chat`,
id: 1, id: 1,
@@ -27,7 +27,7 @@ export function useChat() {
store.commit('chat/clearChats') store.commit('chat/clearChats')
} }
const addMessageToActiveChat = chat => { const addMessageToActiveChat = (chat) => {
store.commit('chat/addMessageToActiveChat', chat) store.commit('chat/addMessageToActiveChat', chat)
} }
@@ -35,7 +35,7 @@ export function useChat() {
store.commit('chat/removeLoadingMessageInChat') store.commit('chat/removeLoadingMessageInChat')
} }
const addChatMessageById = chat => { const addChatMessageById = (chat) => {
store.commit('chat/addMessageToActiveChat', chat) store.commit('chat/addMessageToActiveChat', chat)
if (chat?.conversation_id) { if (chat?.conversation_id) {
store.commit('chat/setActiveChatConversationId', chat.conversation_id) store.commit('chat/setActiveChatConversationId', chat.conversation_id)
@@ -54,7 +54,7 @@ export function useChat() {
addChatMessageById(temporaryChat) addChatMessageById(temporaryChat)
} }
const newChatAndAddMessageById = chat => { const newChatAndAddMessageById = (chat) => {
onNewChat(chat.message.content) onNewChat(chat.message.content)
addChatMessageById(chat) addChatMessageById(chat)
} }

View File

@@ -34,7 +34,7 @@
<script> <script>
import Dialog from '@/components/Dialog/index.vue' import Dialog from '@/components/Dialog/index.vue'
import { openTaskPage } from '@/utils/jms/index' import { openTaskPage } from '@/utils/jms'
export default { export default {
name: 'GatewayDialog', name: 'GatewayDialog',

View File

@@ -7,7 +7,7 @@
/> />
</template> </template>
<script> <script type="text/jsx">
import AssetTreeTable from '@/components/Apps/AssetTreeTable' import AssetTreeTable from '@/components/Apps/AssetTreeTable'
import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters' import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
import { connectivityMeta } from '@/components/Apps/AccountListTable/const' import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
@@ -85,10 +85,9 @@ export default {
hasTree: true, hasTree: true,
columnsExtra: ['view_account'], columnsExtra: ['view_account'],
columnsExclude: ['spec_info'], columnsExclude: ['spec_info'],
columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
columnsShow: { columnsShow: {
min: ['name', 'address', 'accounts'], min: ['name', 'address', 'accounts'],
default: ['name', 'address', 'platform', 'view_account', 'actions'] default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
}, },
columnsMeta: { columnsMeta: {
name: { name: {
@@ -109,6 +108,11 @@ export default {
}, },
connectivity: connectivityMeta, connectivity: connectivityMeta,
comment: { ...this.comment } comment: { ...this.comment }
},
tableAttrs: {
rowClassName({ row }) {
return !row.is_active ? 'row_disabled' : ''
}
} }
}, },
headerActions: { headerActions: {

View File

@@ -1,63 +0,0 @@
<template>
<ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" :create-drawer="createDrawer" />
</template>
<script>
import { DrawerListTable as ListTable } from '@/components'
export default {
name: 'LeakPasswordList',
components: {
ListTable
},
props: {
object: {
type: Object,
required: false,
default: () => ({})
}
},
data() {
return {
createDrawer: () => import('@/components/Apps/LeakPasswords/LeakPasswordsCreateUpdate.vue'),
tableConfig: {
url: '/api/v1/settings/leak-passwords/',
columns: [
'password'
],
columnsMeta: {
actions: {
formatterArgs: {
hasClone: false,
canDelete: this.$hasPerm('settings.change_security'),
canUpdate: this.$hasPerm('settings.change_security')
}
}
}
},
headerActions: {
hasExport: true,
hasImport: true,
importOptions: {
encryptFields: [''], // 这里不加密 password''只是为了保证数组有值
canImportUpdate: false
},
hasCreate: true,
hasSearch: true,
hasRefresh: true,
hasBulkDelete: true,
hasBulkUpdate: false,
hasLeftActions: true,
hasRightActions: true,
canCreate: this.$hasPerm('settings.change_security'),
canBulkDelete: this.$hasPerm('settings.change_security')
}
}
}
}
</script>
<style lang='less' scoped>
</style>

View File

@@ -1,41 +0,0 @@
<template>
<div v-loading="loading">
<GenericCreateUpdatePage
v-if="!loading"
class="user-create-update"
v-bind="$data"
:title="null"
v-on="$listeners"
/>
</div>
</template>
<script>
import { GenericCreateUpdatePage } from '@/layout/components'
export default {
name: 'LeakPasswordsCreateUpdate',
components: {
GenericCreateUpdatePage
},
data() {
return {
loading: true,
fields: [
[this.$t('Basic'), ['password']]
],
encryptedFields: [],
url: '/api/v1/settings/leak-passwords/'
}
},
async mounted() {
this.loading = false
},
methods: {}
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -1,76 +0,0 @@
<template>
<div>
<div>
<el-button
size="mini"
type="primary"
@click="onOpenDialog"
>
{{ $tc('View') }}
</el-button>
</div>
<Dialog
:destroy-on-close="true"
:show-cancel="false"
:show-confirm="false"
:title="title"
:visible.sync="visible"
v-bind="$attrs"
width="40%"
v-on="$listeners"
>
<LeakPasswordList />
</Dialog>
</div>
</template>
<script>
import { Dialog } from '@/components'
import LeakPasswordList from '@/components/Apps/LeakPasswords/LeakPasswordList.vue'
export default {
componentName: 'LeakPasswords',
components: {
LeakPasswordList,
Dialog
},
props: {
value: {
type: Object,
default: () => ({})
},
title: {
type: String,
default: function() {
return this.$t('LeakPasswordList')
}
},
url: {
type: String,
default: `/api/v1/settings/leak-passwords/`
}
},
data() {
return {
visible: false,
form: this.value,
config: {
url: this.url,
hasSaveContinue: false,
hasButtons: true,
fields: [],
fieldsMeta: {}
}
}
},
methods: {
onOpenDialog() {
this.visible = true
}
}
}
</script>
<style scoped>
</style>

View File

@@ -1,31 +1,28 @@
<template> <template>
<TwoCol> <el-row :gutter="24">
<ListTable v-bind="config" /> <el-col :md="20" :sm="22">
</TwoCol> <ListTable v-bind="config" />
</el-col>
</el-row>
</template> </template>
<script> <script>
import { DrawerListTable as ListTable } from '@/components' import ListTable from '@/components/Table/ListTable/index.vue'
import { toM2MJsonParams } from '@/utils/jms/index' import { toM2MJsonParams } from '@/utils/jms'
import { DetailFormatter } from '@/components/Table/TableFormatters'
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
export default { export default {
name: 'AssetJsonTab', name: 'AssetJsonTab',
components: { components: {
TwoCol,
ListTable ListTable
}, },
props: { props: {
object: { object: {
type: Object, type: Object,
default: () => { default: () => {}
}
} }
}, },
data() { data() {
const [key, value] = toM2MJsonParams(this.object.assets) const [key, value] = toM2MJsonParams(this.object.assets)
const org_id = this.object.org_id || this.$store.getters.currentOrg.id
return { return {
config: { config: {
headerActions: { headerActions: {
@@ -34,19 +31,22 @@ export default {
hasExport: false hasExport: false
}, },
tableConfig: { tableConfig: {
url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`, url: `/api/v1/assets/assets/?${key}=${value}`,
columns: ['name', 'address', 'platform', 'type', 'is_active'], columns: ['name', 'address', 'platform',
columnsShow: { 'type', 'is_active'
min: ['name', 'address'], ],
default: ['name', 'address', 'platform']
},
columnsMeta: { columnsMeta: {
name: { name: {
label: this.$t('Asset'), label: this.$t('Asset'),
formatter: DetailFormatter, formatter: (row) => {
formatterArgs: { const to = {
getRoute: ({ row }) => { name: 'AssetDetail',
return { name: 'AssetDetail', params: { id: row.id } } params: { id: row.id }
}
if (this.$hasPerm('assets.view_asset')) {
return <router-link to={to} class='text-link'>{row.name}</router-link>
} else {
return <span>{row.name}</span>
} }
} }
}, },
@@ -65,3 +65,7 @@ export default {
} }
} }
</script> </script>
<style scoped>
</style>

View File

@@ -1,19 +1,18 @@
<template> <template>
<TwoCol> <el-row :gutter="24">
<ListTable v-bind="config" /> <el-col :md="20" :sm="22">
</TwoCol> <ListTable v-bind="config" />
</el-col>
</el-row>
</template> </template>
<script> <script>
import { DrawerListTable as ListTable } from '@/components' import ListTable from '@/components/Table/ListTable/index.vue'
import { toM2MJsonParams } from '@/utils/jms/index' import { toM2MJsonParams } from '@/utils/jms'
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
import { DetailFormatter } from '@/components/Table/TableFormatters'
export default { export default {
name: 'User', name: 'User',
components: { components: {
TwoCol,
ListTable ListTable
}, },
props: { props: {
@@ -25,7 +24,6 @@ export default {
}, },
data() { data() {
const [key, value] = toM2MJsonParams(this.object.users) const [key, value] = toM2MJsonParams(this.object.users)
const org_id = this.object.org_id || this.$store.getters.currentOrg.id
return { return {
config: { config: {
headerActions: { headerActions: {
@@ -34,25 +32,24 @@ export default {
hasExport: false hasExport: false
}, },
tableConfig: { tableConfig: {
url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`, url: `/api/v1/users/users/?${key}=${value}`,
columns: [ columns: [
'name', 'username', 'email', 'groups', 'system_roles', 'name', 'username', 'groups', 'system_roles',
'org_roles', 'source', 'is_valid' 'org_roles', 'source', 'is_valid'
], ],
columnsShow: {
min: ['name', 'username'],
default: ['name', 'username', 'email']
},
columnsMeta: { columnsMeta: {
name: { name: {
label: this.$t('Name'), label: this.$t('Name'),
formatter: DetailFormatter, width: 85,
formatterArgs: { formatter: (row) => {
getRoute: ({ row }) => { const to = {
return { name: 'UserDetail',
name: 'UserDetail', params: { id: row.id }
params: { id: row.id } }
} if (this.$hasPerm('users.view_user')) {
return <router-link to={to} class='text-link'>{row.name}</router-link>
} else {
return <span>{row.name}</span>
} }
} }
}, },
@@ -90,3 +87,7 @@ export default {
} }
} }
</script> </script>
<style scoped>
</style>

View File

@@ -1,43 +1,43 @@
<template> <template>
<div> <div>
<TwoCol> <el-row :gutter="20">
<IBox :title="title" class="block" v-bind="$attrs"> <el-col :md="16" :sm="24">
<el-timeline> <IBox :title="title" class="block" v-bind="$attrs">
<el-timeline-item <el-timeline>
v-for="(activity, index) in activities" <el-timeline-item
:key="index" v-for="(activity, index) in activities"
:size="activity.size" :key="index"
:timestamp="activity.timestamp" :size="activity.size"
:type="activity.type" :timestamp="activity.timestamp"
placement="bottom" :type="activity.type"
> placement="bottom"
{{ activity.content }}
<el-link
v-if="activity['detail_url']"
type="primary"
@click.native="onClick(activity)"
> >
{{ $tc('Detail') }} {{ activity.content }}
</el-link> <el-link
</el-timeline-item> v-if="activity['detail_url']"
</el-timeline> type="primary"
</IBox> @click.native="onClick(activity)"
</TwoCol> >
{{ $tc('Detail') }}
</el-link>
</el-timeline-item>
</el-timeline>
</IBox>
</el-col>
</el-row>
<DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" /> <DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
</div> </div>
</template> </template>
<script> <script>
import IBox from '@/components/Common/IBox/index.vue' import IBox from '@/components/IBox/index.vue'
import DiffDetail from '@/components/Dialog/DiffDetail.vue' import DiffDetail from '@/components/Dialog/DiffDetail.vue'
import { openTaskPage } from '@/utils/jms/index' import { openTaskPage } from '@/utils/jms'
import { toSafeLocalDateStr } from '@/utils/common/time' import { toSafeLocalDateStr } from '@/utils/time'
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
export default { export default {
name: 'ResourceActivity', name: 'ResourceActivity',
components: { components: {
TwoCol,
IBox, IBox,
DiffDetail DiffDetail
}, },

View File

@@ -13,12 +13,17 @@
v-on="$listeners" v-on="$listeners"
> >
<div v-if="confirmTypeRequired === 'relogin'"> <div v-if="confirmTypeRequired === 'relogin'">
<el-row :gutter="24" style="margin: 0 auto"> <el-row :gutter="24" style="margin: 0 auto;">
<el-col :md="24" :sm="24"> <el-col :md="24" :sm="24">
<el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" /> <el-alert
:title="$tc('ReLoginTitle')"
center
style="margin-bottom: 20px;"
type="error"
/>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="24" style="margin: 0 auto"> <el-row :gutter="24" style="margin: 0 auto;">
<el-col :md="24" :sm="24"> <el-col :md="24" :sm="24">
<el-button class="confirm-btn" size="mini" type="primary" @click="logout"> <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
{{ this.$t('ReLogin') }} {{ this.$t('ReLogin') }}
@@ -27,11 +32,11 @@
</el-row> </el-row>
</div> </div>
<div v-else> <div v-else>
<el-row :gutter="24" style="margin: 0 auto"> <el-row :gutter="24" style="margin: 0 auto;">
<el-col :md="24" :sm="24" :span="24" class="add"> <el-col :md="24" :sm="24" :span="24" class="add">
<el-select <el-select
v-model="subTypeSelected" v-model="subTypeSelected"
style="width: 100%; margin-bottom: 20px" style="width: 100%; margin-bottom: 20px;"
@change="handleSubTypeChange" @change="handleSubTypeChange"
> >
<el-option <el-option
@@ -44,73 +49,32 @@
</el-select> </el-select>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto"> <el-row :gutter="24" style="margin: 0 auto;">
<el-col :md="24" :sm="24" style="display: flex; align-items: center"> <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
<el-input <el-input
v-model="secretValue" v-model="secretValue"
:placeholder="inputPlaceholder" :placeholder="inputPlaceholder"
:show-password="showPassword" :show-password="showPassword"
@keyup.enter.native="handleConfirm" @keyup.enter.native="handleConfirm"
/> />
<span <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
style="margin: -1px 0 0 20px"
>
<el-button <el-button
:disabled="smsBtnDisabled" :disabled="smsBtnDisabled"
size="mini" size="mini"
style="line-height: 14px; float: right" style="line-height: 14px; float: right;"
type="primary" type="primary"
@click="sendCode" @click="sendSMSCode"
> >
{{ smsBtnText }} {{ smsBtnText }}
</el-button> </el-button>
</span> </span>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row :gutter="24" style="margin: 10px auto;">
<el-col>
<iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
<iframe
v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
:src="faceCaptureUrl"
allow="camera"
sandbox="allow-scripts allow-same-origin"
style="width: 100%; height: 600px; border: none"
/>
</el-col>
</el-row>
<el-row :gutter="24" style="margin: 20px auto 10px">
<el-col :md="24" :sm="24"> <el-col :md="24" :sm="24">
<el-button <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
v-if="!noCodeMFA.includes(subTypeSelected)"
class="confirm-btn"
size="mini"
type="primary"
@click="handleConfirm"
>
{{ this.$t('Confirm') }} {{ this.$t('Confirm') }}
</el-button> </el-button>
<el-button
v-if="subTypeSelected === 'face'"
v-show="!isFaceCaptureVisible"
class="confirm-btn"
size="mini"
type="primary"
@click="handleFaceCapture"
>
{{ this.$tc('VerifyFace') }}
</el-button>
<el-button
v-if="subTypeSelected === 'passkey'"
v-loading="passkeyVisible"
class="confirm-btn"
size="mini"
type="primary"
@click="handlePasskeyVerify"
>
{{ this.$tc('Next') }}
</el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@@ -118,7 +82,7 @@
</template> </template>
<script> <script>
import Dialog from '@/components/Dialog/index.vue' import Dialog from '@/components/Dialog/index.vue'
import { encryptPassword } from '@/utils/secure' import { encryptPassword } from '@/utils/crypto'
export default { export default {
name: 'UserConfirmDialog', name: 'UserConfirmDialog',
@@ -149,14 +113,7 @@ export default {
visible: false, visible: false,
callback: null, callback: null,
cancel: null, cancel: null,
processing: false, processing: false
isFaceCaptureVisible: false,
faceToken: null,
faceCaptureUrl: null,
noCodeMFA: ['face', 'passkey'],
sendCodeMFA: ['email', 'sms', 'otp'],
passkeyVisible: false,
passkeyUrl: '/api/v1/authentication/passkeys/login/?mfa=1'
} }
}, },
computed: { computed: {
@@ -172,10 +129,6 @@ export default {
}, },
methods: { methods: {
handleSubTypeChange(val) { handleSubTypeChange(val) {
if (val !== 'face') {
this.isFaceCaptureVisible = false
}
this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
this.smsWidth = val === 'sms' ? 6 : 0 this.smsWidth = val === 'sms' ? 6 : 0
}, },
@@ -189,117 +142,54 @@ export default {
this.$log.debug('perform confirm action') this.$log.debug('perform confirm action')
const confirmType = response.data?.code const confirmType = response.data?.code
const confirmUrl = '/api/v1/authentication/confirm/' const confirmUrl = '/api/v1/authentication/confirm/'
this.$axios this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
.get(confirmUrl, { params: { confirm_type: confirmType } }) this.confirmTypeRequired = data.confirm_type
.then(data => {
this.confirmTypeRequired = data.confirm_type
if (this.confirmTypeRequired === 'relogin') { if (this.confirmTypeRequired === 'relogin') {
this.$axios this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
.post(confirmUrl, { confirm_type: 'relogin', secret_key: 'x' }) this.callback()
.then(() => { this.visible = false
this.callback() }).catch(() => {
this.visible = false this.title = this.$t('NeedReLogin')
}) this.visible = true
.catch(() => { })
this.title = this.$t('NeedReLogin') return
this.visible = true }
}) this.subTypeChoices = data.content
return const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
} this.subTypeSelected = defaultSubType.name
this.subTypeChoices = data.content this.inputPlaceholder = defaultSubType.placeholder
const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0] this.visible = true
this.subTypeSelected = defaultSubType.name }).catch((err) => {
this.inputPlaceholder = defaultSubType.placeholder const data = err.response?.data
this.visible = true const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
}) this.$message.error(msg)
.catch(err => { this.cancel(err)
const data = err.response?.data }).finally(() => {
const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed') this.processing = false
this.$message.error(msg) })
this.cancel(err)
})
.finally(() => {
this.processing = false
})
}, 500), }, 500),
logout() { logout() {
window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}` window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
}, },
sendCode() { sendSMSCode() {
this.$axios this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }) this.$message.success(this.$tc('VerificationCodeSent'))
.then(res => { let time = 60
this.$message.success(this.$tc('VerificationCodeSent')) this.smsBtnDisabled = true
let time = 60
this.smsBtnDisabled = true
const interval = setInterval(() => { const interval = setInterval(() => {
time -= 1 time -= 1
this.smsBtnText = `${this.$t('Pending')}: ${time}` this.smsBtnText = `${this.$t('Pending')}: ${time}`
if (time <= 0) { if (time <= 0) {
clearInterval(interval) clearInterval(interval)
this.smsBtnText = this.$t('SendVerificationCode') this.smsBtnText = this.$t('SendVerificationCode')
this.smsBtnDisabled = false this.smsBtnDisabled = false
} }
}, 1000) }, 1000)
}) }).catch(() => {
.catch(() => { this.$message.error(this.$tc('FailedToSendVerificationCode'))
this.$message.error(this.$tc('FailedToSendVerificationCode'))
})
},
handlePasskeyVerify() {
this.passkeyVisible = true
this.checkPasskeyStatus()
},
checkPasskeyStatus() {
const url = '/api/v1/authentication/confirm/check/?confirm_type=mfa'
const t = setInterval(() => {
this.$axios.get(url).then(data => {
this.passkeyVisible = false
this.onSuccess()
})
}, 2000)
setTimeout(() => {
clearInterval(t)
if (this.passkeyVisible) {
this.passkeyVisible = false
this.$message.error(this.$tc('PasskeyTimeout'))
}
}, 20000)
},
startFaceCapture() {
const url = '/api/v1/authentication/face/context/'
this.$axios
.post(url)
.then(data => {
const token = data['token']
this.faceCaptureUrl = '/facelive/capture?token=' + token
this.isFaceCaptureVisible = true
const timer = setInterval(() => {
this.$axios.get(url + `?token=${token}`).then(data => {
if (data['is_finished']) {
clearInterval(timer)
this.isFaceCaptureVisible = false
this.handleConfirm()
}
})
}, 1000)
})
.catch(() => {
this.$message.error(this.$tc('FailedToStartFaceCapture'))
})
},
handleFaceCapture() {
this.startFaceCapture()
},
onSuccess() {
this.secretValue = ''
this.visible = false
this.$nextTick(() => {
this.callback()
}) })
}, },
handleConfirm() { handleConfirm() {
@@ -313,43 +203,39 @@ export default {
const data = { const data = {
confirm_type: this.confirmTypeRequired, confirm_type: this.confirmTypeRequired,
mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '', mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
secret_key: secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
this.confirmTypeRequired === 'password'
? encryptPassword(this.secretValue)
: this.secretValue
} }
this.$axios this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
.post(`/api/v1/authentication/confirm/`, data) this.secretValue = ''
.then(() => { this.visible = false
this.onSuccess() this.$nextTick(() => {
}) this.callback()
.catch(err => {
this.$message.error(err.message || this.$tc('ConfirmFailed'))
this.faceCaptureUrl = null
this.isFaceCaptureVisible = false
}) })
}).catch((err) => {
this.$message.error(err.message || this.$tc('ConfirmFailed'))
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dialog-content ::v-deep .el-dialog__footer { .dialog-content ::v-deep .el-dialog__footer {
padding: 0; padding: 0;
}
.dialog-content ::v-deep .el-dialog {
padding: 8px;
.el-dialog__body {
padding-top: 30px;
padding-bottom: 30px;
} }
}
.confirm-btn { .dialog-content ::v-deep .el-dialog {
width: 100%; padding: 8px;
line-height: 20px;
} .el-dialog__body {
padding-top: 30px;
padding-bottom: 30px;
}
}
.confirm-btn {
width: 100%;
line-height: 20px;
}
</style> </style>

View File

@@ -1,136 +0,0 @@
<template>
<AutoDataForm
ref="AutoDataForm"
class="variable-add"
:submit-btn-text="submitBtnText"
v-bind="$data"
@submit="confirm"
/>
</template>
<script>
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
export default {
name: 'VariableCreateForm',
components: {
AutoDataForm
},
props: {
variable: {
type: Object,
default: () => ({})
}
},
data() {
const defaultValidator = (rule, value, callback) => {
if (this.defaultValueRequired && !value) {
callback(new Error(this.$t('FieldRequiredError')))
} else {
callback()
}
}
return {
defaultValueRequired: false,
submitBtnText: this.$t('Confirm'),
url: '/api/v1/ops/variables/',
form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
fields: [
['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
],
fieldsMeta: {
var_name: {
helpTextAsTip: false
},
text_default_value: {
label: this.$t('DefaultValue'),
hidden: (formValue) => {
return formValue.type !== 'text'
},
rules: [{ validator: defaultValidator }],
helpTip: this.$t('DefaultValueTip'),
el: {
type: 'input'
}
},
select_default_value: {
label: this.$t('DefaultValue'),
helpTip: this.$t('DefaultValueTip'),
hidden: (formValue) => {
return formValue.type !== 'select'
},
rules: [{ validator: defaultValidator }],
el: { type: 'input' }
},
extra_args: {
hidden: (formValue) => {
return formValue.type !== 'select'
},
el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
rules: [
{
validator: (rule, value, callback) => {
try {
const lines = value.split('\n')
const regex = /^[^:]+:[^:]+$/
for (const line of lines) {
if (!regex.test(line.trim())) {
callback(new Error(this.$t('ExtraArgsFormatError')))
}
}
} catch (e) {
callback(new Error(this.$t('ExtraArgsFormatError')))
}
callback()
}
}
]
},
required: {
on: {
change: ([event], updateForm) => {
this.defaultValueRequired = event
}
}
}
},
hasSaveContinue: false,
method: 'get'
}
},
mounted() {
this.defaultValueRequired = this.variable?.required || false
},
methods: {
confirm(form) {
if (this.variable?.name) {
this.$emit('edit', form)
} else {
this.$emit('add', form)
}
}
}
}
</script>
<style lang='scss' scoped>
.variable-add {
::v-deep .el-form-item {
margin-bottom: 5px;
.help-block {
margin-bottom: 5px;
}
}
::v-deep .form-group-header {
.hr-line-dashed {
margin: 5px 0;
}
h3 {
margin-bottom: 10px;
}
}
}
</style>

View File

@@ -1,74 +0,0 @@
<template>
<AutoDataForm
ref="AutoDataForm"
class="variable-set"
:submit-btn-text="submitBtnText"
v-bind="$data"
:fields="fields"
@submit="confirm"
/>
</template>
<script>
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
export default {
name: 'VariableSetForm',
components: {
AutoDataForm
},
props: {
formData: {
type: Array,
default: () => ([])
},
queryParam: {
type: String,
default: ''
}
},
data() {
return {
submitBtnText: this.$t('Confirm'),
// 防止缓存form remoteMeta
url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
form: {},
hasSaveContinue: false,
method: 'get',
hasReset: false
}
},
computed: {
fields() {
return [['', this.formData.map(item => item.var_name)]]
}
},
methods: {
confirm(form) {
this.$emit('confirm', form)
}
}
}
</script>
<style lang='scss' scoped>
.variable-set {
::v-deep .el-form-item {
margin-bottom: 5px;
.help-block {
margin-bottom: 5px;
}
}
::v-deep .form-group-header {
.hr-line-dashed {
margin: 5px 0;
}
h3 {
margin-bottom: 10px;
}
}
}
</style>

View File

@@ -1,100 +0,0 @@
<template>
<Dialog
:show-cancel="false"
:show-confirm="false"
:title="title"
:visible.sync="iVisible"
class="help-dialog"
top="1vh"
width="50%"
>
<p>{{ variablesHelpText }}</p>
<table border="1" class="help-table">
<tr>
<th>{{ $tc('Variable') }}</th>
<th>{{ $tc('Description') }}</th>
<th>{{ $tc('Example') }}</th>
</tr>
<tr v-for="(item, index) in variables" :key="index">
<td :title="$tc('ClickCopy')" class="item-td text-link" @click="onCopy(item.name)">
<label class="item-label">{{ item.name }}</label>
</td>
<td><span>{{ item.label }}</span></td>
<td><span>{{ item.default }}</span></td>
</tr>
</table>
</Dialog>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { copy } from '@/utils/common/index'
export default {
components: {
Dialog
},
props: {
visible: {
type: Boolean,
default: false
},
variables: {
type: Array,
default: () => []
},
variablesHelpText: {
type: String,
default() {
return this.$t('WatermarkVariableHelpText')
}
}
},
data() {
return {
title: this.$t('BuiltinVariable')
}
},
computed: {
iVisible: {
set(val) {
this.$emit('update:visible', val)
},
get() {
return this.visible
}
}
},
methods: {
onCopy(key) {
copy(key)
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .help-dialog.dialog .el-dialog__footer {
border-top: none;
padding: 8px;
}
.help-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #dee2e6;
}
::v-deep .help-table th,
::v-deep .help-table td {
height: 40px;
padding: 0 8px;
text-align: left;
}
::v-deep .help-table .item-td,
::v-deep .help-table .item-label {
cursor: pointer;
color: var(--color-primary);
}
</style>

View File

@@ -1,5 +1,5 @@
<script type="text/jsx"> <script type="text/jsx">
import { toSafeLocalDateStr } from '@/utils/common/time' import { toSafeLocalDateStr } from '@/utils/time'
export default { export default {
name: 'ItemValue', name: 'ItemValue',
@@ -78,7 +78,7 @@ export default {
formatterData = data formatterData = data
} }
return ( return (
<span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span> <span>{formatterData}</span>
) )
} }
if (this.value instanceof Array) { if (this.value instanceof Array) {
@@ -92,7 +92,7 @@ export default {
) )
} }
return ( return (
<span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span> <span title={this.displayValue}>{this.displayValue}</span>
) )
} }
} }

View File

@@ -1,20 +1,15 @@
<template> <template>
<IBox v-if="loading" style="width: 100%; height: 200px" /> <IBox v-if="loading" style="width: 100%; height: 200px" />
<div v-else> <div v-else>
<DetailCard <DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
v-if="hasObject && items.length > 0"
:items="validItems"
:loading="loading"
v-bind="$attrs"
/>
</div> </div>
</template> </template>
<script> <script>
import DetailCard from './index.vue' import DetailCard from './index.vue'
import { copy } from '@/utils/common/index' import { copy } from '@/utils/common'
import { toSafeLocalDateStr } from '@/utils/common/time' import { toSafeLocalDateStr } from '@/utils/time'
import IBox from '@/components/Common/IBox/index.vue' import IBox from '@/components/IBox/index.vue'
import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue' import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
export default { export default {
@@ -37,7 +32,7 @@ export default {
type: Array, type: Array,
default: null default: null
}, },
showUndefined: { showUndefine: {
type: Boolean, type: Boolean,
default: true default: true
}, },
@@ -129,18 +124,8 @@ export default {
parseArrayValue(value, excludes, label) { parseArrayValue(value, excludes, label) {
if (Array.isArray(value)) { if (Array.isArray(value)) {
const tp = typeof value[0] const tp = typeof value[0]
let object = {}
if (value.length === 0) {
object = {
key: label,
value: '-'
}
return this.items.push(object)
}
// 如果是空数组,那么循环体将不会执行
for (const [index, item] of value.entries()) { for (const [index, item] of value.entries()) {
let object = {}
if (tp === 'object') { if (tp === 'object') {
const firstValue = value[0] const firstValue = value[0]
if (firstValue.hasOwnProperty('name')) { if (firstValue.hasOwnProperty('name')) {
@@ -183,7 +168,7 @@ export default {
const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url }) const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
let remoteMeta = data.actions['GET'] || {} let remoteMeta = data.actions['GET'] || {}
if (this.nested) { if (this.nested) {
remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {} remoteMeta = remoteMeta[this.nested]?.children || {}
} }
let fields = this.fields let fields = this.fields
fields = fields || Object.keys(remoteMeta) fields = fields || Object.keys(remoteMeta)
@@ -235,7 +220,7 @@ export default {
value = this.parseValue(value, fieldMeta.type) value = this.parseValue(value, fieldMeta.type)
if (value === undefined) { if (value === undefined) {
if (this.showUndefined) { if (this.showUndefine) {
value = '-' value = '-'
} else { } else {
continue continue

View File

@@ -1,25 +1,24 @@
<template> <template>
<IBox :fa="fa" :title="title"> <IBox :fa="fa" :title="title">
<el-form :label-width="labelWidth" class="content detail-card" label-position="left"> <el-form :label-width="labelWidth" class="content" label-position="left">
<template v-for="item in items"> <span v-for="item in items" :key="item.key">
<div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item"> <el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
<span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span> <span slot="label"> {{ formateLabel(item.key) }}</span>
<span class="item-value el-form-item__content"> <span
<component :is="item.component"
:is="item.component" v-if="item.component"
v-if="item.component" v-bind="{...item}"
v-bind="{...item}" />
/> <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
<ItemValue v-else :value="item.value" v-bind="item" /> </el-form-item>
</span> </span>
</div>
</template>
</el-form> </el-form>
<slot />
</IBox> </IBox>
</template> </template>
<script> <script>
import IBox from '@/components/Common/IBox/index.vue' import IBox from '../../IBox/index.vue'
import ItemValue from './ItemValue.vue' import ItemValue from './ItemValue.vue'
export default { export default {
@@ -46,7 +45,7 @@ export default {
}, },
labelWidth: { labelWidth: {
type: String, type: String,
default: '120px' default: '25%'
} }
}, },
data() { data() {
@@ -72,76 +71,55 @@ export default {
padding: 20px 40px; padding: 20px 40px;
} }
.content { .el-form-item {
font-size: 13px; border-bottom: 1px dashed #EBEEF5;
line-height: 2; padding: 1px 0;
margin-bottom: 0;
::v-deep .el-form-item { &:last-child {
border-bottom: 1px dashed #F4F4F4; border-bottom: none;
padding: 1px 0; }
margin-bottom: 0;
display: flex;
align-items: center;
//text-align: end;
line-height: 32px;
min-height: 32px;
&:last-child { &.array-item {
//border-bottom: none; border-bottom: none;
::v-deep .el-form-item__content {
border-bottom: 1px dashed #EBEEF5
} }
&.array-item { ::v-deep .el-form-item__label:last-child {
border-bottom: none; border: 1px dashed #EBEEF5;
::v-deep .el-form-item__content {
border-bottom: 1px dashed #EBEEF5
}
::v-deep .el-form-item__label:last-child {
border: 1px dashed #EBEEF5;
}
}
.el-form-item__label {
//padding-right: 8%;
overflow: hidden;
color: var(--color-icon-primary);
font-size: 12px;
line-height: 1.5;
font-weight: 400;
width: 33%;
min-width: 120px;
padding: 5px 0;
span {
display: inline-block;
//line-height: 1.1;
}
}
.el-form-item__content {
color: var(--color-text-primary);
font-size: 13px;
line-height: 1.5;
width: calc(100% - 120px);
padding: 5px 0;
}
::v-deep .el-tag--mini {
margin-right: 3px;
} }
} }
.item-value { ::v-deep .el-form-item__label {
::v-deep span { padding-right: 8%;
//display: -webkit-box; overflow: hidden;
overflow: hidden; color: var(--color-icon-primary);
text-overflow: ellipsis;
word-break: break-word; span {
-webkit-line-clamp: 2; display: inline-block;
-webkit-box-orient: vertical; line-height: 1.5;
vertical-align: middle;
} }
} }
::v-deep .el-form-item__content {
color: var(--color-text-primary);
font-size: 13px;
line-height: 40px;
}
::v-deep .el-tag--mini {
margin-right: 3px;
}
}
.item-value span {
word-break: break-word;
}
.content {
font-size: 13px;
line-height: 2.5;
} }
</style> </style>

View File

@@ -49,7 +49,7 @@
<script> <script>
import { createSourceIdCache } from '@/api/common' import { createSourceIdCache } from '@/api/common'
import { Select2 } from '@/components/Form/FormFields' import { Select2 } from '@/components/Form/FormFields'
import IBox from '@/components/Common/IBox/index.vue' import IBox from '@/components/IBox/index.vue'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -340,13 +340,13 @@ b, strong {
} }
tr td { tr td {
line-height: 1.4; line-height: 1.42857;
padding: 8px 0; padding: 8px;
vertical-align: top; vertical-align: top;
} }
tr.item td { tr.item td {
border-top: 1px dashed #EBEEF5; border-top: 1px solid #e7eaec;
} }
.box-margin { .box-margin {

View File

@@ -1,23 +1,18 @@
<template> <template>
<div> <el-card shadow="never">
<div class="summary-header"> <div slot="header" class="summary-header">
<el-tooltip :content="title" :open-delay="500" placement="top"> <span class="header-title">{{ title }}</span>
<span class="title">{{ title }}</span>
</el-tooltip>
</div> </div>
<slot> <slot>
<h3 class="no-margins "> <h1 class="no-margins">
<span <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
:class="{ 'can-direct': canDirect }" <router-link v-else :to="body.route">
class="num" <span>{{ body.count }}</span>
@click="handleClick" </router-link>
> </h1>
<span v-if="count === null"> - </span> <small>{{ body.comment }}</small>
<span v-else>{{ count }}</span>
</span>
</h3>
</slot> </slot>
</div> </el-card>
</template> </template>
<script> <script>
@@ -28,78 +23,56 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
count: { rightSideLabel: {
type: [Number, String, Promise], type: Object,
default: null default: () => ({})
}, },
route: { body: {
type: [String, Object], type: Object,
default: '' default: () => ({})
},
canDirect: {
type: Boolean,
default: false
},
callback: {
type: Function,
default: () => {
}
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {}
},
methods: {
handleClick() {
if (this.disabled) {
return
}
if (this.route) {
this.$router.push(this.route)
return
}
this.callback.bind(this)()
this.$emit('click')
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.summary-header { .pull-right {
//color: var(--color-icon-primary); float: right !important;
overflow: hidden; }
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
.title { .header-title {
font-style: normal; font-size: 14px;
margin: 0 0 7px;
font-weight: 600; font-weight: 600;
font-size: 12px;
text-transform: uppercase;
line-height: 1.2;
} }
}
.no-margins { .right-side ::v-deep .el-tag {
margin: 0 !important; font-weight: 600;
padding: 3px 8px;
.num { text-shadow: none;
font-style: normal; line-height: 1;
font-weight: 500; }
font-size: 24px;
line-height: 40px; h1 {
color: var(--color-text-primary); font-size: 30px;
cursor: pointer; font-weight: 100;
}
&.can-direct:hover {
color: var(--color-primary); .el-card__body {
} background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px !important;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
}
.no-margins {
margin: 0 !important;
}
.disabled-link {
color: #428bca;
} }
}
</style> </style>

View File

@@ -1,71 +0,0 @@
<template>
<echarts
:options="iOptions"
v-bind="$attrs"
@finished="onFinished"
v-on="$listeners"
/>
</template>
<script>
import 'echarts'
export default {
components: {},
props: {
options: {
type: Object,
required: true
}
},
data() {
const urlParams = new URLSearchParams(window.location.search)
const isExport = urlParams.get('export') === 'true'
return {
isExport: isExport
}
},
computed: {
iOptions() {
return {
...this.options,
animation: !this.isExport
}
}
},
created() {
if (!window._echarts) {
window._echarts = {
total: new Set(),
finished: new Set()
}
}
// 唯一 id避免重复计数
this._chartId = `chart_${Date.now()}_${Math.random().toString(36).slice(2)}`
window._echarts.total.add(this._chartId)
},
beforeDestroy() {
if (window._echarts) {
window._echarts.total.delete(this._chartId)
window._echarts.finished.delete(this._chartId)
// 可选:当没有图表时清理全局对象
if (window._echarts.total.size === 0) {
delete window._echarts
delete window.echartsFinished
}
}
},
methods: {
onFinished() {
if (!window._echarts) return
window._echarts.finished.add(this._chartId)
if (window._echarts.finished.size === window._echarts.total.size) {
window.echartsFinished = true
}
}
}
}
</script>
<style scoped lang="scss">
</style>

View File

@@ -5,59 +5,41 @@
v-if="action.dropdown" v-if="action.dropdown"
v-show="action.dropdown.length > 0" v-show="action.dropdown.length > 0"
:key="action.name" :key="action.name"
:class="[action.name, { grouped: action.grouped }]"
:size="action.size"
:split-button="!!action.split"
:type="action.type"
class="action-item" class="action-item"
placement="bottom-start" placement="bottom-start"
trigger="click" trigger="click"
@click="handleClick(action)"
@command="handleDropdownCallback" @command="handleDropdownCallback"
> >
<span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }"> <el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
{{ action.title }} <span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
</span> <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
<el-button <svg-icon v-else :icon-class="action.icon" />
v-else
:class="action.name"
:size="size"
class="more-action"
v-bind="{ ...cleanButtonAction(action), icon: '' }"
>
<span class="pre-icon">
<Icon v-if="action.icon" :icon="action.icon" />
</span> </span>
<span v-if="action.title"> <span v-if="action.title">
{{ action.title }}<i class="el-icon-arrow-down el-icon--right" /> {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
</span> </span>
</el-button> </el-button>
<el-dropdown-menu slot="dropdown" style="overflow: auto; max-height: 60vh"> <el-dropdown-menu slot="dropdown" style="overflow: auto;max-height: 60vh">
<template v-for="option in action.dropdown"> <template v-for="option in action.dropdown">
<div <div
v-if="option.group" v-if="option.group"
:key="'group:' + option.name" :key="'group:'+option.name"
class="dropdown-menu-title" class="dropdown-menu-title"
style="width: 130px" style="width:130px"
> >
{{ option.group }} {{ option.group }}
</div> </div>
<el-tooltip <el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
:key="option.name"
:content="option.tip"
:disabled="!option.tip"
:open-delay="500"
placement="top"
>
<el-dropdown-item <el-dropdown-item
:key="option.name" :key="option.name"
:command="[option, action]" :command="[option, action]"
:title="option.tip" :title="option.tip"
class="dropdown-item" class="dropdown-item"
v-bind="{ ...option, icon: '' }" v-bind="{...option, icon: ''}"
> >
<span v-if="actionsHasIcon(action.dropdown)" class="pre-icon"> <span v-if="option.icon" class="pre-icon">
<Icon v-if="option.icon" :icon="option.icon" /> <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
<svg-icon v-else :icon-class="option.icon" />
</span> </span>
{{ option.title }} {{ option.title }}
</el-dropdown-item> </el-dropdown-item>
@@ -69,16 +51,16 @@
<el-button <el-button
v-else v-else
:key="action.name" :key="action.name"
:class="[action.name, { grouped: action.grouped }]"
:size="size" :size="size"
class="action-item" class="action-item"
v-bind="{ ...cleanButtonAction(action), icon: '' }" v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
@click="handleClick(action)" @click="handleClick(action)"
> >
<el-tooltip :content="action.tip" :disabled="!action.tip" placement="top"> <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
<span> <span>
<span v-if="action.icon" style="vertical-align: initial"> <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
<Icon :icon="action.icon" /> <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
<svg-icon v-else :icon-class="action.icon" />
</span> </span>
{{ action.title }} {{ action.title }}
</span> </span>
@@ -89,14 +71,10 @@
</template> </template>
<script> <script>
import { toSentenceCase } from '@/utils/common/index' import { toSentenceCase } from '@/utils/common'
import Icon from '@/components/Widgets/Icon/index.vue'
export default { export default {
name: 'DataActions', name: 'DataActions',
components: {
Icon
},
props: { props: {
grouped: { grouped: {
type: Boolean, type: Boolean,
@@ -121,9 +99,6 @@ export default {
} }
}, },
methods: { methods: {
actionsHasIcon(actions) {
return actions.some(action => action.icon)
},
hasIcon(action, type = '') { hasIcon(action, type = '') {
const icon = action.icon const icon = action.icon
if (!icon) { if (!icon) {
@@ -181,7 +156,6 @@ export default {
delete action['callback'] delete action['callback']
delete action['name'] delete action['name']
delete action['can'] delete action['can']
delete action['split']
return action return action
}, },
cleanActions(actions) { cleanActions(actions) {
@@ -211,10 +185,6 @@ export default {
} }
delete action['can'] delete action['can']
if (!action.size) {
action.size = 'small'
}
if (action.dropdown) { if (action.dropdown) {
action.dropdown = this.cleanActions(action.dropdown) action.dropdown = this.cleanActions(action.dropdown)
} }
@@ -228,9 +198,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$btn-text-color: #ffffff; $btn-text-color: #ffffff;
$color-btn-background: #e8f7f4; $color-btn-background: #E8F7F4;
$color-btn-focus-background: #83cbba; $color-btn-focus-background: #83CBBA;
$color-divided: #e4e7ed; $color-divided: #E4E7ED;
$color-drop-menu-title: #909399; $color-drop-menu-title: #909399;
$color-drop-menu-border: #e4e7ed; $color-drop-menu-border: #e4e7ed;
@@ -239,10 +209,6 @@ $color-drop-menu-border: #e4e7ed;
.action-item { .action-item {
margin-left: 5px; margin-left: 5px;
&.grouped {
margin-left: 0;
}
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }
@@ -283,17 +249,10 @@ $color-drop-menu-border: #e4e7ed;
align-items: flex-end; align-items: flex-end;
.el-button { .el-button {
padding: 2px 5px; display: flex;
line-height: 1.3; align-items: center;
font-size: 13px; padding: 2px 6px;
color: $btn-text-color;
&:not(.is-plain) {
color: $btn-text-color;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
* { * {
vertical-align: baseline !important; vertical-align: baseline !important;
@@ -321,6 +280,8 @@ $color-drop-menu-border: #e4e7ed;
// options // options
.el-dropdown-menu { .el-dropdown-menu {
::v-deep .more-batch-processing { ::v-deep .more-batch-processing {
text-align: center;
&:hover { &:hover {
background-color: transparent !important; background-color: transparent !important;
} }
@@ -342,7 +303,6 @@ $color-drop-menu-border: #e4e7ed;
.dropdown-item { .dropdown-item {
color: var(--color-text-primary); color: var(--color-text-primary);
line-height: 34px;
.pre-icon { .pre-icon {
width: 17px; width: 17px;
@@ -364,8 +324,6 @@ $color-drop-menu-border: #e4e7ed;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
padding: 0 20px;
&.is-disabled { &.is-disabled {
color: var(--color-disabled); color: var(--color-disabled);
cursor: not-allowed; cursor: not-allowed;

View File

@@ -1,7 +1,6 @@
<template> <template>
<Dialog <Dialog
v-if="detailVisible" v-if="detailVisible"
:modal="false"
:show-cancel="false" :show-cancel="false"
:show-confirm="false" :show-confirm="false"
:title="title" :title="title"

View File

@@ -1,71 +0,0 @@
<template>
<Dialog
:show-cancel="false"
:visible="iVisible"
class="processing-dialog"
height="300"
:title="$tc('Processing')"
width="300"
@confirm="iVisible=false"
>
<div id="load">
<div class="spinner" />
</div>
</Dialog>
</template>
<script>
import Dialog from './index.vue'
export default {
name: 'ProcessingDialog',
components: { Dialog },
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
}
}
</script>
<style lang="scss" scoped>
.processing-dialog {
::v-deep .el-dialog__body {
overflow: hidden;
}
}
.spinner {
width: 100px;
height: 100px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s infinite linear;
}
#load {
display: flex;
justify-content: center;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>

View File

@@ -1,69 +0,0 @@
<template>
<Dialog
:visible="iVisible"
height="300"
title="Processing"
width="300"
class="processing-dialog"
>
<div id="load">
<div class="spinner" />
</div>
</Dialog>
</template>
<script>
import Dialog from './index.vue'
export default {
name: 'RemoteProcessingDialog',
components: { Dialog },
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
}
}
</script>
<style lang="scss" scoped>
.processing-dialog {
::v-deep .el-dialog__body {
overflow: hidden;
}
}
.spinner {
width: 100px;
height: 100px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s infinite linear;
}
#load {
display: flex;
justify-content: center;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>

View File

@@ -1,75 +0,0 @@
<template>
<div>
<Dialog
v-if="iVisible"
:destroy-on-close="true"
:show-cancel="false"
:show-confirm="false"
:title="$tc('Report')"
:visible.sync="iVisible"
top="35vh"
width="80%"
@close="loading=true"
>
<span v-if="loading" v-loading="loading" class="loading" />
<iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
</Dialog>
</div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
export default {
name: 'ReportDialog',
components: {
Dialog
},
props: {
visible: {
type: Boolean,
default: false
},
url: {
type: String,
default: ''
}
},
data() {
return {
loading: true
}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
mounted() {
},
beforeMount() {
},
methods: {
onIframeLoad() {
this.loading = false
}
}
}
</script>
<style lang="scss" scoped>
iframe {
width: 100%;
height: 500px;
}
.loading {
margin-top: 20px;
display: block;
}
</style>

View File

@@ -1,96 +0,0 @@
<template>
<Dialog
:show-cancel="false"
:title="title"
:visible.sync="visible"
:close-on-click-modal="false"
width="700px"
@close="onClose"
@confirm="visible = false"
>
<el-alert type="warning" :closable="false">
{{ warningText }}
<div class="secret">
<div class="row">
<span class="col">ID:</span>
<span class="value">{{ keyInfo.id }}</span>
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
</div>
<div class="row">
<span class="col">Secret:</span>
<span class="value">{{ keyInfo.secret }}</span>
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
</div>
</div>
</el-alert>
</Dialog>
</template>
<script>
import i18n from '@/i18n/i18n'
import { copy } from '@/utils/common/index'
import Dialog from '@/components/Dialog/index'
export default {
name: 'Secret',
components: {
Dialog
},
props: {
title: {
type: String,
default: () => i18n.t('CreateAccessKey')
},
warningText: {
type: String,
default: () => i18n.t('ApiKeyWarning')
}
},
data() {
return {
keyInfo: { id: '', secret: '' },
visible: false
}
},
methods: {
show(data) {
this.keyInfo = data
this.visible = true
},
onClose() {
this.$emit('close')
},
handleCopy(value) {
copy(value)
}
}
}
</script>
<style lang='scss' scoped>
.secret {
color: #2b2f3a;
margin-top: 20px;
}
.row {
margin-bottom: 10px;
}
.col {
width: 100px;
text-align: left;
display: inline-block;
}
.copy-icon {
margin-left: 5px;
cursor: pointer;
transition: color 0.2s;
}
.value {
font-weight: 600;
}
</style>

View File

@@ -2,7 +2,6 @@
<transition name="dialog-fade"> <transition name="dialog-fade">
<el-dialog <el-dialog
:append-to-body="true" :append-to-body="true"
:class="{ shadow: shadow }"
:modal-append-to-body="true" :modal-append-to-body="true"
:title="title" :title="title"
:top="top" :top="top"
@@ -47,7 +46,7 @@ export default {
}, },
width: { width: {
type: String, type: String,
default: '800px' default: '60%'
}, },
showConfirm: { showConfirm: {
type: Boolean, type: Boolean,
@@ -80,14 +79,11 @@ export default {
maxWidth: { maxWidth: {
type: String, type: String,
default: '1200px' default: '1200px'
},
shadow: {
type: Boolean,
default: true
} }
}, },
data() { data() {
return {} return {
}
}, },
computed: { computed: {
iWidth() { iWidth() {
@@ -106,69 +102,58 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dialog.shadow ::v-deep .el-dialog {
box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
}
.dialog ::v-deep .el-dialog {
border-radius: 0.3em;
max-width: min(100vw, 1500px);
.form-group-header {
margin-left: 20px;
}
.el-form--label-top {
.form-group-header {
margin-left: 0;
}
}
.el-icon-circle-check {
display: none;
}
&__header {
box-sizing: border-box;
padding: 15px 22px;
border-bottom: 1px solid #dee2e6;
font-weight: 400;
}
&__body {
padding: 20px 30px;
font-size: 13px;
&:has(.el-table) {
background: #f3f3f4;
}
}
&__footer {
border-top: 1px solid #dee2e6;
padding: 16px 25px;
justify-content: flex-end;
}
}
@media (max-width: 900px) {
.dialog ::v-deep .el-dialog { .dialog ::v-deep .el-dialog {
max-width: calc(100% - 30px); border-radius: 0.3em;
max-width: min(100vw, 1500px);
.form-group-header {
margin-left: 20px;
}
.el-icon-circle-check {
display: none;
}
&__header {
box-sizing: border-box;
padding: 15px 22px;
border-bottom: 1px solid #dee2e6;
font-weight: 400;
}
&__body {
padding: 20px 30px;
&:has(.el-table) {
background: #f3f3f4;
}
}
&__footer {
border-top: 1px solid #dee2e6;
padding: 16px 25px;
justify-content: flex-end;
}
} }
}
.dialog-footer ::v-deep button.el-button { @media (max-width: 900px) {
font-size: 13px; .dialog ::v-deep .el-dialog {
padding: 8px 12px; max-width: calc(100% - 30px);
} }
}
.dialog-fade-enter-active, .dialog-fade-leave-active { .dialog-footer ::v-deep button.el-button {
transition: opacity 1s ease; font-size: 13px;
} padding: 8px 12px;
}
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */ .dialog-fade-enter-active, .dialog-fade-leave-active {
{ transition: opacity 1s ease;
opacity: 0; }
}
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
{
opacity: 0;
}
</style> </style>

View File

@@ -1,305 +0,0 @@
<template>
<el-drawer
ref="drawer"
v-el-drawer-drag-width
:append-to-body="true"
:before-close="handleClose"
:class="['drawer', { 'drawer__no-footer': !hasFooter }]"
:modal="modal"
:size="size"
:title="title"
:visible.sync="iVisible"
custom-class="drawer"
destroy-on-close
direction="rtl"
v-on="$listeners"
>
<div class="drawer__content">
<slot name="default">
<component
:is="component"
v-if="component"
ref="dynamicComponent"
v-bind="componentProps"
v-on="componentListeners"
/>
</slot>
</div>
<div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
</el-drawer>
</template>
<script>
import { getDrawerWidth } from '@/utils/common/index'
export default {
props: {
title: {
type: String,
default: ''
},
size: {
type: String,
default: () => {
return getDrawerWidth()
}
},
component: {
type: [String, Function, Object],
default: ''
},
componentProps: {
type: Object,
default: () => ({})
},
componentListeners: {
type: Object,
default: () => ({})
},
visible: {
type: Boolean,
default: false
},
modal: {
type: Boolean,
default: true
},
hasFooter: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
formLabelWidth: '80px'
}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
mounted() {
},
methods: {
handleClose(done) {
this.$emit('close-drawer')
done()
}
}
}
</script>
<style lang='scss' scoped>
.drawer__no-footer {
::v-deep {
.drawer {
.page {
height: calc(100vh - 55px);
}
}
}
}
@media (max-width: 992px) {
.drawer ::v-deep {
.el-form-item {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
}
}
.drawer {
::v-deep {
min-width: 565px;
.el-card__body {
padding-top: 10px;
padding-bottom: 20px;
}
.page-submenu {
.el-tabs__header {
padding: 0 15px;
}
.el-tabs__item.is-top {
padding: 0 10px;
}
}
.form-buttons {
margin-left: 13px;
}
.el-form {
margin-right: 1px;
padding-right: 15px;
height: 100%;
&.detail-card {
padding-right: 0;
margin-top: unset;
}
// Detail 中
&.content {
margin-right: 0;
}
.form-buttons {
//position: absolute;
// bottom: 13px;
// margin-left: 20%;
// margin-top: 0;
}
// Form 中的子 form
.el-form {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.el-form-item {
.el-form-item__label {
padding-right: 20px;
}
.el-radio {
line-height: 25px;
margin-right: 13px;
.el-radio__label {
padding-left: 5px;
}
}
}
&.el-form--label-top {
.el-radio-group {
.el-radio {
display: block;
padding-bottom: 3px;
}
}
.el-form-item {
padding-left: 12px;
.el-form-item__label {
padding: 0 20px 0 0;
line-height: 30px;
}
.sub-form {
margin-left: -1px;
.form-fields {
max-height: unset;
}
}
}
&.form-fields {
//overflow: auto;
//max-height: calc(100vh - 180px);
}
.el-checkbox-group {
.el-checkbox {
display: block;
padding-bottom: 3px;
}
}
.el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
display: inline-block; /* 更改为 inline-block */
//width: unset; /* 这个设置上去后,平台详情中, Automations 会有问题 */
vertical-align: bottom;
}
.el-form-item__content {
form {
.el-form-item {
padding-left: 0;
}
}
}
}
.form-group-header {
margin-left: 20px;
}
}
.el-drawer__header {
border-bottom: 1px solid #EBEEF5;
margin-bottom: 0;
padding: 15px 20px;
font-size: 16px;
font-weight: 500;
color: var(--color-text-primary);
}
.sql.container {
display: none;
}
.page {
overflow-y: auto;
height: calc(100vh - 110px);
&.tab-page {
.page-content {
padding-right: 0;
padding-left: 0;
}
}
.page-content {
height: unset;
padding-right: 10px;
padding-left: 20px;
& > div {
margin-bottom: 1px;
}
}
.ibox {
margin-bottom: 10px;
border: none;
}
}
.drawer__content, .tab-page-content {
height: 100%;
background: #f3f3f3;
}
.drawer__footer {
border-top: solid 1px #f3f3f3;
}
//.el-drawer__header {
// margin-bottom: 20px;
//
// span {
// font-size: 16px;
// font-weight: 800;
// color: var(--color-text-primary);
// }
//}
}
}
</style>

View File

@@ -1,35 +1,31 @@
<template> <template>
<div> <DataForm
<DataForm v-if="!loading"
v-if="!loading" ref="dataForm"
ref="dataForm" :fields="totalFields"
:fields="totalFields" :form="iForm"
:form="iForm" v-bind="$attrs"
:server-errors="serverErrors" v-on="$listeners"
v-bind="$attrs" >
v-on="$listeners" <span
v-for="(group, i) in groups"
:key="'group-'+group.name"
:slot="'id:'+group.name"
> >
<template <FormGroupHeader
v-for="(group, i) in groups" v-if="!groupHidden(group, i)"
:slot="'id:'+group.name" :group="group"
> :index="i"
<FormGroupHeader :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
v-if="!groupHidden(group, i)" />
:key="'group-' + group.name" </span>
:group="group" </DataForm>
:index="i"
:line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
/>
</template>
</DataForm>
</div>
</template> </template>
<script> <script>
import DataForm from '../DataForm/index.vue' import DataForm from '../DataForm/index.vue'
import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue' import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils' import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
import { UniqueCheck } from '@/components/Form/DataForm/rules'
export default { export default {
name: 'AutoDataForm', name: 'AutoDataForm',
@@ -67,8 +63,7 @@ export default {
totalFields: [], totalFields: [],
loading: true, loading: true,
groups: [], groups: [],
errors: {}, errors: {}
serverErrors: {}
} }
}, },
computed: { computed: {
@@ -92,12 +87,11 @@ export default {
} }
}, },
mounted() { mounted() {
// this.$log.debug('>>> Method: ', this.method)
this.optionUrlMetaAndGenerateColumns() this.optionUrlMetaAndGenerateColumns()
}, },
methods: { methods: {
async optionUrlMetaAndGenerateColumns() { async optionUrlMetaAndGenerateColumns() {
let data = { actions: {} } let data = { actions: {}}
if (this.url) { if (this.url) {
data = await this.$store.dispatch('common/getUrlMeta', { url: this.url }) data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
} }
@@ -106,8 +100,6 @@ export default {
this.generateColumns() this.generateColumns()
this.$emit('afterGenerateColumns', this.totalFields) this.$emit('afterGenerateColumns', this.totalFields)
this.cleanFormValue() this.cleanFormValue()
// 初始化时清空错误
this.serverErrors = {}
this.loading = false this.loading = false
}, },
generateColumns() { generateColumns() {
@@ -115,47 +107,6 @@ export default {
this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta) this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
this.groups = generator.groups this.groups = generator.groups
this.$log.debug('Total fields: ', this.totalFields) this.$log.debug('Total fields: ', this.totalFields)
this.applyUniqueRules()
},
applyUniqueRules() {
const fields = this.totalFields || []
const currentIdGetter = () => {
return this.$route?.params?.id || this.form?.id || this.iForm?.id
}
// 移除 url 后拼接的参数
const defaultListUrl = (() => {
try {
const u = new URL(this.url, location.origin)
u.pathname = u.pathname.replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?$/, '/')
return u.origin ? u.origin + u.pathname : u.pathname
} catch (e) {
return (this.url || '').replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?($|\?)/, '/$2')
}
})()
fields.forEach(field => {
const conf = field?.uniqueCheck
if (!conf) return
const confObj = (typeof conf === 'object') ? conf : {}
const param = confObj.param || field.prop || field.id
const url = confObj.url || defaultListUrl
const label = confObj.label || field.label || param
const entityName = confObj.entityName || ''
if (!Array.isArray(field.rules)) field.rules = []
field.rules.push(UniqueCheck({
url,
param,
label,
entityName,
getIgnoreId: currentIdGetter,
fieldName: field.prop || field.id
}))
})
}, },
_cleanFormValue(form, remoteMeta) { _cleanFormValue(form, remoteMeta) {
if (!form) { if (!form) {
@@ -185,69 +136,18 @@ export default {
cleanFormValue() { cleanFormValue() {
this._cleanFormValue(this.iForm, this.remoteMeta) this._cleanFormValue(this.iForm, this.remoteMeta)
}, },
_getElFormInstance() {
try {
return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
} catch (e) {
return null
}
},
/**
* @description 仅清理 UI 的错误展示,不触发表单内容重建
*/
clearAllFieldErrors() {
const elForm = this._getElFormInstance()
if (elForm && Array.isArray(elForm.fields)) {
elForm.fields.forEach((item) => {
item.validateMessage = ''
item.validateState = ''
})
}
// 不修改 totalFields/attrs避免触发 content 重建导致输入丢失
this.serverErrors = {}
},
setFieldError(name, error) { setFieldError(name, error) {
error = (error || '').toString().replace(/[。.]+$/, '') const field = this.totalFields.find((v) => v.prop === name)
const elForm = this._getElFormInstance() if (!field) {
if (elForm && Array.isArray(elForm.fields)) { return
const item = elForm.fields.find(f => f.prop === name)
if (item) {
item.validateMessage = error
item.validateState = error ? 'error' : ''
}
} }
// 不写入 totalFields避免触发 innerContent 变化导致表单值被覆盖 if (field.attrs.error === error) {
this.$set(this.serverErrors, name, error) error += '.'
}, }
setErrors(errors) {
const mapped = {} if (typeof error === 'string') {
Object.entries(errors || {}).forEach(([k, v]) => { field.el.errors = error
let msg = v field.attrs.error = error
console.log(k, v)
// v是数组并且数组都是字符串则拼接为字符串
if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
// 处理 [{"port":["请确保该值小于或者等于 65535。"]},{},{}] 这种情况
else if (Array.isArray(v) && v.every(item => _.isPlainObject(item))) {
const subMsg = []
v.forEach((subItem) => {
Object.values(subItem).forEach((subMsgArr) => {
if (Array.isArray(subMsgArr)) {
subMsg.push(...subMsgArr)
}
})
})
msg = subMsg.join(' ')
} else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
mapped[k] = String(msg || '')
})
this.serverErrors = mapped
const elForm = this._getElFormInstance()
if (elForm && Array.isArray(elForm.fields)) {
elForm.fields.forEach((item) => {
const msg = mapped[item.prop] || ''
item.validateMessage = msg
item.validateState = msg ? 'error' : ''
})
} }
}, },
groupHidden(group, i) { groupHidden(group, i) {
@@ -263,6 +163,5 @@ export default {
return true return true
} }
} }
} }
</script> </script>

View File

@@ -1,11 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue' import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue' import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
import Switcher from '@/components/Form/FormFields/Switcher.vue'
import rules from '@/components/Form/DataForm/rules' import rules from '@/components/Form/DataForm/rules'
import BasicTree from '@/components/Form/FormFields/BasicTree.vue' import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue' import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
import { assignIfNot, toSentenceCase } from '@/utils/common/index' import { assignIfNot, toSentenceCase } from '@/utils/common'
import TagInput from '@/components/Form/FormFields/TagInput.vue' import TagInput from '@/components/Form/FormFields/TagInput.vue'
import TransferSelect from '@/components/Form/FormFields/TransferSelect.vue'
import i18n from '@/i18n/i18n' import i18n from '@/i18n/i18n'
export class FormFieldGenerator { export class FormFieldGenerator {
@@ -63,9 +65,8 @@ export class FormFieldGenerator {
} }
break break
case 'boolean': case 'boolean':
type = 'checkbox' type = ''
// field.component = Switcher field.component = Switcher
// field.type = 'checkbox'
break break
case 'list': case 'list':
type = 'input' type = 'input'
@@ -112,7 +113,7 @@ export class FormFieldGenerator {
let nestedFields = fieldMeta.fields || [] let nestedFields = fieldMeta.fields || []
const nestedFieldsMeta = fieldMeta.fieldsMeta || {} const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {} const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
if (nestedFields.toString() === '__all__') { if (nestedFields === '__all__') {
nestedFields = Object.keys(nestedFieldsRemoteMeta) nestedFields = Object.keys(nestedFieldsRemoteMeta)
} }
for (const name of nestedFields) { for (const name of nestedFields) {
@@ -134,6 +135,9 @@ export class FormFieldGenerator {
case 'comment': case 'comment':
field.el.type = 'textarea' field.el.type = 'textarea'
break break
case 'users':
field.component = TransferSelect
field.el.label = field.label
} }
return field return field
} }
@@ -177,10 +181,7 @@ export class FormFieldGenerator {
const systemLang = document.cookie.django_language const systemLang = document.cookie.django_language
if (helpTextAsPlaceholder !== undefined) { if (helpTextAsPlaceholder !== undefined) {
helpTextAsPlaceholder = !!helpTextAsPlaceholder helpTextAsPlaceholder = !!helpTextAsPlaceholder
} else if ( } else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
placeholderType.indexOf(field.type) === -1 &&
placeholderComponent.indexOf(field.component) === -1
) {
helpTextAsPlaceholder = false helpTextAsPlaceholder = false
} else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') { } else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
helpTextAsPlaceholder = true helpTextAsPlaceholder = true

View File

@@ -361,10 +361,9 @@ export default {
}, },
// //
submitFill() { submitFill() {
const minMinutes = 60
const crontabDiffMin = this.crontabDiff / 1000 / 60 const crontabDiffMin = this.crontabDiff / 1000 / 60
if (crontabDiffMin > 0 && crontabDiffMin < minMinutes) { if (crontabDiffMin > 0 && crontabDiffMin < 10) {
const msg = this.$t('CrontabDiffError', { minutes: minMinutes }) const msg = this.$tc('CrontabDiffError')
this.$message.error(msg) this.$message.error(msg)
return return
} }

View File

@@ -10,18 +10,15 @@
<el-form-item> <el-form-item>
<el-radio v-model="radioValue" :label="2"> <el-radio v-model="radioValue" :label="2">
{{ this.$t('From') }} {{ this.$t('From') }}
<el-input-number v-model="cycle01" :max="23" :min="0" size="mini" /> <el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
- <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('Hour') }}
<el-input-number v-model="cycle02" :max="23" :min="0" size="mini" />
{{ this.$t('Hour') }}
</el-radio> </el-radio>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-radio v-model="radioValue" :label="3"> <el-radio v-model="radioValue" :label="3">
{{ this.$t('Every') }} {{ this.$t('Every') }}
<el-input-number v-model="average02" :max="23" :min="1" size="mini" /> <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
{{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
</el-radio> </el-radio>
</el-form-item> </el-form-item>
@@ -35,7 +32,7 @@
multiple multiple
style="width:100%" style="width:100%"
> >
<el-option v-for="item in 24" :key="item" :value="item-1">{{ item - 1 }}</el-option> <el-option v-for="item in 24" :key="item" :value="item-1">{{ item-1 }}</el-option>
</el-select> </el-select>
</el-radio> </el-radio>
</el-form-item> </el-form-item>

View File

@@ -9,7 +9,7 @@
<el-form-item> <el-form-item>
<el-radio v-model="radioValue" :label="3"> <el-radio v-model="radioValue" :label="3">
{{ this.$t('From') }} {{ this.$t('From') }}
<el-input-number v-model="average02" :max="59" :min="1" size="mini" /> <el-input-number v-model="average02" :max="60" :min="1" size="mini" />
{{ this.$t('Min') }} {{ this.$t('ExecuteOnce') }} {{ this.$t('Min') }} {{ this.$t('ExecuteOnce') }}
</el-radio> </el-radio>
</el-form-item> </el-form-item>

View File

@@ -13,7 +13,7 @@
<script> <script>
import parser from 'cron-parser' import parser from 'cron-parser'
import { toSafeLocalDateStr } from '@/utils/common/time' import { toSafeLocalDateStr } from '@/utils/time'
export default { export default {
name: 'CrontabResult', name: 'CrontabResult',

View File

@@ -39,13 +39,6 @@ export default {
showCron: false showCron: false
} }
}, },
watch: {
value: {
handler(val) {
this.crontabFill(val)
}
}
},
methods: { methods: {
crontabFill(value) { crontabFill(value) {
// //

View File

@@ -6,30 +6,29 @@
:prop="prop" :prop="prop"
:rules="_show && Array.isArray(data.rules) ? data.rules : []" :rules="_show && Array.isArray(data.rules) ? data.rules : []"
v-bind="data.attrs" v-bind="data.attrs"
:error="errorText"
> >
<template v-if="data.label" #label> <template v-if="data.label" #label>
<span :title="data.label"> <span>{{ data.label }}</span>
<span v-if="data.required">* </span> <el-tooltip
{{ data.label }} v-if="data.helpTip"
<el-tooltip :open-delay="500"
v-if="data.helpTip" :tabindex="-1"
:open-delay="500" effect="dark"
:tabindex="-1" placement="right"
effect="dark" popper-class="help-tips"
placement="right" >
popper-class="help-tips" <div slot="content" v-sanitize="data.helpTip" /> <!-- Noncompliant -->
> <i class="fa fa-question-circle-o help-tip-icon" />
<div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> </el-tooltip>
<!-- Noncompliant -->
<i class="fa fa-question-circle-o help-tip-icon" />
</el-tooltip>
</span>
</template> </template>
<template v-if="readonly && hasReadonlyContent"> <template v-if="readonly && hasReadonlyContent">
<div <div
v-if="data.type === 'input'" v-if="data.type === 'input'"
:style="componentProps.type === 'textarea' ? { padding: '10px 0', lineHeight: 1.5 } : ''" :style="
componentProps.type === 'textarea'
? {padding: '10px 0', lineHeight: 1.5}
: ''
"
> >
{{ itemValue }} {{ itemValue }}
</div> </div>
@@ -48,7 +47,11 @@
v-on="listeners" v-on="listeners"
> >
<template v-for="opt in options"> <template v-for="opt in options">
<el-option v-if="data.type === 'select'" :key="opt.label" v-bind="opt" /> <el-option
v-if="data.type === 'select'"
:key="opt.label"
v-bind="opt"
/>
<el-checkbox-button <el-checkbox-button
v-else-if="data.type === 'checkbox-group' && data.style === 'button'" v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
:key="opt.value" :key="opt.value"
@@ -68,7 +71,6 @@
<el-tooltip v-if="opt.tip" :content="opt.tip" :open-delay="500" placement="top"> <el-tooltip v-if="opt.tip" :content="opt.tip" :open-delay="500" placement="top">
<i class="el-icon-warning-outline" /> <i class="el-icon-warning-outline" />
</el-tooltip> </el-tooltip>
<span v-if="data.helpText">{{ data.helpText }}</span>
</el-checkbox> </el-checkbox>
<!-- WARNING: radio label 属性来表示 value 的含义 --> <!-- WARNING: radio label 属性来表示 value 的含义 -->
<!-- FYI: radio value 属性可以在没有 radio-group 时用来关联到同一个 v-model --> <!-- FYI: radio value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
@@ -85,7 +87,7 @@
</el-radio> </el-radio>
</template> </template>
</custom-component> </custom-component>
<div v-if="data.helpText" :class="data.type" class="help-block"> <div v-if="data.helpText" class="help-block">
<el-alert <el-alert
v-if="data.helpText.startsWith('!')" v-if="data.helpText.startsWith('!')"
:closable="false" :closable="false"
@@ -97,18 +99,15 @@
</el-alert> </el-alert>
<span v-else v-sanitize="data.helpText" /> <span v-else v-sanitize="data.helpText" />
</div> </div>
<div v-if="data.helpTextFormatter" class="help-block">
<RenderHelpTextSafe :render-content="data.helpTextFormatter" />
</div>
</el-form-item> </el-form-item>
</template> </template>
<script> <script>
import getEnableWhenStatus from '../util/enable-when' import getEnableWhenStatus from '../util/enable-when'
import { noop } from '../util/utils' import { noop } from '../util/utils'
import _get from 'lodash/get' import _get from 'lodash.get'
import _includes from 'lodash/includes' import _includes from 'lodash.includes'
import _topairs from 'lodash/toPairs' import _topairs from 'lodash.topairs'
import _frompairs from 'lodash/fromPairs' import _frompairs from 'lodash.frompairs'
function validator(data) { function validator(data) {
if (!data) { if (!data) {
@@ -122,18 +121,6 @@ function validator(data) {
export default { export default {
components: { components: {
RenderHelpTextSafe: {
functional: true,
props: {
renderContent: {
type: Function,
required: true
}
},
render(h, { props }) {
return props.renderContent()
}
},
/** /**
* 🐂🍺只需要有组件选项对象,就可以立刻包装成函数式组件在 template 中使用 * 🐂🍺只需要有组件选项对象,就可以立刻包装成函数式组件在 template 中使用
* FYI: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6 * FYI: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6
@@ -146,10 +133,6 @@ export default {
props: { props: {
// eslint-disable-next-line vue/require-default-prop // eslint-disable-next-line vue/require-default-prop
data: Object, data: Object,
serverErrors: {
type: Object,
default: () => ({})
},
prop: { prop: {
type: String, type: String,
default() { default() {
@@ -168,8 +151,7 @@ export default {
data() { data() {
return { return {
propsInner: {}, propsInner: {},
isBlurTrigger: isBlurTrigger: this.data.rules &&
this.data.rules &&
this.data.rules.some(rule => { this.data.rules.some(rule => {
return rule.required && rule.trigger === 'blur' return rule.required && rule.trigger === 'blur'
}) })
@@ -178,7 +160,7 @@ export default {
computed: { computed: {
// 解构运算符会处理 undefined 的情况 // 解构运算符会处理 undefined 的情况
componentProps: ({ data: { el }, propsInner }) => ({ ...el, ...propsInner }), componentProps: ({ data: { el }, propsInner }) => ({ ...el, ...propsInner }),
hasReadonlyContent: ({ data: { type } }) => _includes(['input', 'select'], type), hasReadonlyContent: ({ data: { type }}) => _includes(['input', 'select'], type),
hiddenStatus: ({ data: { hidden = () => false }, data, value }) => hidden(value, data), hiddenStatus: ({ data: { hidden = () => false }, data, value }) => hidden(value, data),
enableWhenStatus: ({ data: { enableWhen }, value }) => getEnableWhenStatus(enableWhen, value), enableWhenStatus: ({ data: { enableWhen }, value }) => getEnableWhenStatus(enableWhen, value),
// 是否显示 // 是否显示
@@ -188,11 +170,6 @@ export default {
classes() { classes() {
return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '') return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
}, },
errorText() {
const fromAttrs = this.data?.attrs?.error
const fromServer = this.serverErrors ? this.serverErrors[this.data.prop] : ''
return fromAttrs || fromServer || ''
},
listeners() { listeners() {
const { const {
data: { data: {
@@ -208,7 +185,10 @@ export default {
} = this } = this
return { return {
..._frompairs( ..._frompairs(
_topairs(on).map(([eName, handler]) => [eName, (...args) => handler(args, updateForm)]) _topairs(on).map(([eName, handler]) => [
eName,
(...args) => handler(args, updateForm)
]),
), ),
// 手动更新表单数据 // 手动更新表单数据
input: (value, ...rest) => { input: (value, ...rest) => {
@@ -233,7 +213,9 @@ export default {
multipleValue: ({ data, itemValue, options = [] }) => { multipleValue: ({ data, itemValue, options = [] }) => {
const multipleSelectValue = const multipleSelectValue =
_get(data, 'el.multiple') && Array.isArray(itemValue) ? itemValue : [itemValue] _get(data, 'el.multiple') && Array.isArray(itemValue)
? itemValue
: [itemValue]
return multipleSelectValue return multipleSelectValue
.map(val => (options.find(op => op.value === val) || {}).label) .map(val => (options.find(op => op.value === val) || {}).label)
.join() .join()
@@ -253,7 +235,8 @@ export default {
if (v.url === oldV.url || v.request === oldV.request) return if (v.url === oldV.url || v.request === oldV.request) return
} }
const isOptionsCase = const isOptionsCase =
['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) > -1 ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) >
-1
const { const {
url, url,
request = () => this.$axios.get(url).then(resp => resp.data), request = () => this.$axios.get(url).then(resp => resp.data),
@@ -321,7 +304,7 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.help-tips { .help-tips {
opacity: 0.8; opacity: 0.8;
line-height: 2; line-height: 2;
@@ -330,11 +313,7 @@ export default {
.help-block { .help-block {
::v-deep .el-alert__icon { ::v-deep .el-alert__icon {
font-size: 16px; font-size: 16px
}
&.checkbox {
//display: inline;
} }
} }
@@ -343,9 +322,4 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.help-tip-content {
white-space: pre-wrap;
word-wrap: break-word;
}
</style> </style>

View File

@@ -1,18 +1,11 @@
<template> <template>
<el-form <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
ref="elForm"
:model="value"
class="el-form-renderer"
v-bind="$attrs"
@submit.native.prevent
>
<template v-for="item in innerContent"> <template v-for="item in innerContent">
<slot v-if="!isHidden(item)" :name="`id:${item.id}`" /> <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
<component <component
:is="item.type === GROUP ? 'render-form-group' : 'render-form-item'" :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
:key="item.id" :key="item.id"
:data="item" :data="item"
:server-errors="serverErrors"
:disabled="disabled || item.disabled" :disabled="disabled || item.disabled"
:item-value="value[item.id]" :item-value="value[item.id]"
:options="options[item.id]" :options="options[item.id]"
@@ -26,19 +19,13 @@
</el-form> </el-form>
</template> </template>
<script> <script>
import _set from 'lodash/set' import _set from 'lodash.set'
import _isequal from 'lodash/isEqual' import _isequal from 'lodash.isequal'
import _clonedeep from 'lodash/cloneDeep' import _clonedeep from 'lodash.clonedeep'
import RenderFormGroup from './components/render-form-group.vue' import RenderFormGroup from './components/render-form-group.vue'
import RenderFormItem from './components/render-form-item.vue' import RenderFormItem from './components/render-form-item.vue'
import transformContent from './util/transform-content' import transformContent from './util/transform-content'
import { import { collect, correctValue, mergeValue, transformInputValue, transformOutputValue } from './util/utils'
collect,
correctValue,
mergeValue,
transformInputValue,
transformOutputValue
} from './util/utils'
const GROUP = 'group' const GROUP = 'group'
@@ -60,10 +47,6 @@ export default {
type: Array, type: Array,
required: true required: true
}, },
serverErrors: {
type: Object,
default: () => ({})
},
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false

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