The_evening_detective/evening_detective_admin_client
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add features

Browse Source
This commit is contained in:
Владимир Фёдоров 2025-12-07 05:31:53 +07:00
parent 296ec5f222
commit 8b38453a4e
1 changed files with 120 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/components/EditorWindow.vue
View File

@ -13,8 +13,26 @@ const graph = ref<Graph>({
edges: []
})
const emptyNode = {
id: -1,
label: "",
name: "",
text: "",
applications: [],
links: [],
}
const selectedNode = ref<GraphNode>({
id: 0,
id: -1,
label: "",
name: "",
text: "",
applications: [],
links: [],
})
const focusedNode = ref<GraphNode>({
id: -1,
label: "",
name: "",
text: "",
@ -107,6 +125,17 @@ function selectNode(node: GraphNode) {
net.selectNodes([selectedNode.value.id])
}
function focusNode(node: GraphNode) {
console.log("Focus node:", node.id)
focusedNode.value = node
}
function copyLink(node: GraphNode) {
console.log("Focus node:", node.id)
navigator.clipboard.writeText("([" + node.label + "])")
focusedNode.value = emptyNode
}
async function updateSelectedNode() {
console.log("Update node:", selectedNode.value)
await updateNode(selectedNode.value)
@ -143,11 +172,14 @@ function nodeHeader(node: GraphNode): string {
<hr class="hr">
<div v-bind:key="node.id" v-for="node in graph.nodes">
<div :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
v-on:click="selectNode(node)">
{{ nodeHeader(node) }}
<span v-if="node.applications.length > 0">({{ node.applications.length }})</span>
</div>
<span v-on:mouseenter="focusNode(node)" v-on:mouseleave="focusNode(emptyNode)">
<span :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
v-on:click="selectNode(node)">{{ nodeHeader(node) }}</span>
<span v-if="node.applications.length > 0"> ({{ node.applications.length }})</span>
<span v-if="node.id == focusedNode.id" class="copy-node-link" v-on:click="copyLink(node)">
Скопировать ссылку
</span>
</span>
</div>
</div>
@ -243,95 +275,111 @@ function nodeHeader(node: GraphNode): string {
margin: 10px 0;
}
.copy-node-link {
margin-left: 5px;
}
.copy-node-link:hover {
font-weight: bold;
cursor: pointer;
}
.checkbox-green {
display: inline-block;
height: 20px;
line-height: 28px;
margin-right: 10px;
position: relative;
vertical-align: middle;
font-size: 14px;
user-select: none;
display: inline-block;
height: 20px;
line-height: 28px;
margin-right: 10px;
position: relative;
vertical-align: middle;
font-size: 14px;
user-select: none;
}
.checkbox-green .checkbox-green-switch {
display: inline-block;
height: 20px;
width: 90px;
box-sizing: border-box;
position: relative;
border-radius: 2px;
background: #848484;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
display: inline-block;
height: 20px;
width: 90px;
box-sizing: border-box;
position: relative;
border-radius: 2px;
background: #848484;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green .checkbox-green-switch:before {
content: attr(data-label-on);
display: inline-block;
box-sizing: border-box;
width: 45px;
padding: 0 8px;
position: absolute;
top: 0;
left: 45px;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
line-height: 20px;
content: attr(data-label-on);
display: inline-block;
box-sizing: border-box;
width: 45px;
padding: 0 8px;
position: absolute;
top: 0;
left: 45px;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
line-height: 20px;
}
.checkbox-green .checkbox-green-switch:after {
content: attr(data-label-off);
display: inline-block;
box-sizing: border-box;
width: 44px;
border-radius: 1px;
position: absolute;
top: 1px;
left: 1px;
z-index: 5;
text-transform: uppercase;
text-align: center;
background: white;
line-height: 18px;
font-size: 10px;
color: #777;
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
content: attr(data-label-off);
display: inline-block;
box-sizing: border-box;
width: 44px;
border-radius: 1px;
position: absolute;
top: 1px;
left: 1px;
z-index: 5;
text-transform: uppercase;
text-align: center;
background: white;
line-height: 18px;
font-size: 10px;
color: #777;
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green input[type="checkbox"] {
display: block;
width: 0;
height: 0;
position: absolute;
z-index: -1;
opacity: 0;
display: block;
width: 0;
height: 0;
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
background-color: #848484;
.checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch {
background-color: #848484;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
content: attr(data-label-off);
left: 0;
.checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch:before {
content: attr(data-label-off);
left: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
content: attr(data-label-on);
color: #848484;
transform: translate3d(44px, 0, 0);
.checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch:after {
content: attr(data-label-on);
color: #848484;
transform: translate3d(44px, 0, 0);
}
/* Hover */
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover {
cursor: pointer;
.checkbox-green input[type="checkbox"]:not(:disabled)+.checkbox-green-switch:hover {
cursor: pointer;
}
/* Disabled */
.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch {
opacity: 0.6;
filter: grayscale(50%);
.checkbox-green input[type=checkbox]:disabled+.checkbox-green-switch {
opacity: 0.6;
filter: grayscale(50%);
}
/* Focus */
.checkbox-green.focused .checkbox-green-switch:after {
box-shadow: inset 0px 0px 4px #ff5623;
box-shadow: inset 0px 0px 4px #ff5623;
}
</style>