feat: 展开树初始化
parent
1f50fb7477
commit
8b33399747
@ -1,3 +1,120 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
// root: true
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
// Ref sugar (take 2)
|
||||||
|
$: "readonly",
|
||||||
|
$$: "readonly",
|
||||||
|
$ref: "readonly",
|
||||||
|
$shallowRef: "readonly",
|
||||||
|
$computed: "readonly",
|
||||||
|
|
||||||
|
// index.d.ts
|
||||||
|
// global.d.ts
|
||||||
|
Fn: "readonly",
|
||||||
|
PromiseFn: "readonly",
|
||||||
|
RefType: "readonly",
|
||||||
|
LabelValueOptions: "readonly",
|
||||||
|
EmitType: "readonly",
|
||||||
|
TargetContext: "readonly",
|
||||||
|
ComponentElRef: "readonly",
|
||||||
|
ComponentRef: "readonly",
|
||||||
|
ElRef: "readonly",
|
||||||
|
global: "readonly",
|
||||||
|
ForDataType: "readonly",
|
||||||
|
ComponentRoutes: "readonly",
|
||||||
|
|
||||||
|
// script setup
|
||||||
|
defineProps: "readonly",
|
||||||
|
defineEmits: "readonly",
|
||||||
|
defineExpose: "readonly",
|
||||||
|
withDefaults: "readonly"
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended",
|
||||||
|
"@vue/typescript/recommended",
|
||||||
|
"@vue/prettier",
|
||||||
|
"@vue/eslint-config-typescript"
|
||||||
|
],
|
||||||
|
parser: "vue-eslint-parser",
|
||||||
|
parserOptions: {
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
sourceType: "module",
|
||||||
|
jsxPragma: "React",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ["*.ts", "*.vue"],
|
||||||
|
rules: {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ["*.vue"],
|
||||||
|
parser: "vue-eslint-parser",
|
||||||
|
parserOptions: {
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
extraFileExtensions: [".vue"],
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
"vue/no-v-html": "off",
|
||||||
|
"vue/require-default-prop": "off",
|
||||||
|
"vue/require-explicit-emits": "off",
|
||||||
|
"vue/multi-word-component-names": "off",
|
||||||
|
"@typescript-eslint/no-explicit-any": "off", // any
|
||||||
|
"no-debugger": "off",
|
||||||
|
"@typescript-eslint/explicit-module-boundary-types": "off", // setup()
|
||||||
|
"@typescript-eslint/ban-types": "off",
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"@typescript-eslint/no-empty-function": "off",
|
||||||
|
"@typescript-eslint/no-non-null-assertion": "off",
|
||||||
|
"vue/html-self-closing": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
html: {
|
||||||
|
void: "always",
|
||||||
|
normal: "always",
|
||||||
|
component: "always"
|
||||||
|
},
|
||||||
|
svg: "always",
|
||||||
|
math: "always"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"prettier/prettier": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
endOfLine: "auto"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
|
||||||
|
<path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#DCDCDC" stroke-width="1.5"
|
||||||
|
stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 216 B |
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
|
||||||
|
<path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#154DDD" stroke-width="2.3"
|
||||||
|
stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 216 B |
@ -1,5 +1,3 @@
|
|||||||
import collapseTree from "./src/collapseTree";
|
import collapseTree from "./src/collapseTree";
|
||||||
|
|
||||||
const CollapseTree = collapseTree;
|
export const CollapseTree = collapseTree;
|
||||||
|
|
||||||
export { CollapseTree };
|
|
||||||
|
|||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { computed, defineComponent } from "vue";
|
||||||
|
import "./collapseTreeStyle.scss";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "CollapseTreeItem",
|
||||||
|
props: {
|
||||||
|
info: {
|
||||||
|
type: undefined,
|
||||||
|
default: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props) {
|
||||||
|
const nodeLatestInfo = computed(() => {
|
||||||
|
//实时的树节点数据
|
||||||
|
return { ...props.info };
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
return (
|
||||||
|
<div class={["collapseTreeItem_wrap"]}>
|
||||||
|
<div class={["collapseTreeItem_info flex"]}>
|
||||||
|
<span class={["collapseTreeItem_line"]}></span>
|
||||||
|
<div class={["collapseTreeItem_main_info"]}>
|
||||||
|
<i class="iconfont icon-fuwuqi tree_item_icon"></i>
|
||||||
|
<span>{nodeLatestInfo.value.name}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="collapseTreeItem_child_info_box"
|
||||||
|
v-if={
|
||||||
|
Array.isArray(nodeLatestInfo.value?.childList) &&
|
||||||
|
nodeLatestInfo.value.childList.length
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{nodeLatestInfo.value.childList?.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<li key={index}>
|
||||||
|
<CollapseTreeItem info={item}></CollapseTreeItem>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
@import "../../../style/index";
|
||||||
|
|
||||||
|
.collapseTree_wrap {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.first_level_box {
|
||||||
|
padding: 12px 16px;
|
||||||
|
color: $--web-font2;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgb(21 77 221 / 10%);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected_active {
|
||||||
|
color: $--theme-color;
|
||||||
|
background: rgb(21 77 221 / 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.root_tree_icon {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.child_info_box {
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
& > li:last-child {
|
||||||
|
.collapseTreeItem_wrap {
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapseTreeItem_child_info_box {
|
||||||
|
& > li:last-child {
|
||||||
|
.collapseTreeItem_wrap {
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapseTreeItem_wrap {
|
||||||
|
// border-radius: 2px;
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
// padding-left: 10px;
|
||||||
|
// margin-top: 8px;
|
||||||
|
margin-left: 16px;
|
||||||
|
border-left: 2px solid $--theme-color;
|
||||||
|
|
||||||
|
.collapseTreeItem_info {
|
||||||
|
position: relative;
|
||||||
|
color: $--web-font2;
|
||||||
|
|
||||||
|
.tree_item_icon {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapseTreeItem_line {
|
||||||
|
// background-color: red;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
// margin-bottom: -10px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-top: -2px;
|
||||||
|
|
||||||
|
// position: absolute;
|
||||||
|
// left: -2px;
|
||||||
|
margin-left: -2px;
|
||||||
|
|
||||||
|
// border-radius: 50%;
|
||||||
|
// border-left: 1px solid red ;
|
||||||
|
// background-image: url("@/assets/svg/bgFooter.svg");
|
||||||
|
|
||||||
|
background-image: url("@/assets/svg/icons/treeNodeLineSelected.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
// background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapseTreeItem_main_info {
|
||||||
|
padding: 2px 5px 8px;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
// padding-top: 16px;
|
||||||
|
// position: absolute;
|
||||||
|
// left: -2px;
|
||||||
|
// top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .icon-fuwuqi {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
$--web-font1: #333;
|
||||||
|
$--web-font2: #666;
|
||||||
|
$--web-font3: #999;
|
||||||
|
$--theme-color: #154ddd;
|
||||||
@ -1,20 +1,9 @@
|
|||||||
<!--
|
|
||||||
* @Author: donghao donghao@supervision.ltd
|
|
||||||
* @Date: 2024-01-15 11:22:10
|
|
||||||
* @LastEditors: donghao donghao@supervision.ltd
|
|
||||||
* @LastEditTime: 2024-01-15 15:23:07
|
|
||||||
* @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\leftTree\index.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { CollapseTree } from "@/components/CustomTree";
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "DemoLeftTree"
|
name: "DemoLeftTrees"
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>123</div>
|
||||||
<CollapseTree />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,17 +1,21 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { CollapseTree } from "@/components/CustomTree";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "TreeCard"
|
name: "TreeCard"
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="treeCard">TreeCard</div>
|
<div class="treeCard"><CollapseTree /></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.treeCard {
|
.treeCard {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 808px;
|
height: 808px;
|
||||||
background-color: cadetblue;
|
background: #fafafa;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue