|
|
|
|
@ -1,198 +1,178 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="">
|
|
|
|
|
<el-container style="">
|
|
|
|
|
<el-aside width="300px" style="background-color: #fff;padding: 20px;">
|
|
|
|
|
<!-- <el-input
|
|
|
|
|
v-model="searchQuery"
|
|
|
|
|
placeholder="搜索"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
class="menu-search"
|
|
|
|
|
@change="filteredMenuItems"
|
|
|
|
|
|
|
|
|
|
></el-input> -->
|
|
|
|
|
<div class="version-selector">
|
|
|
|
|
<span class="version-label">Version:</span>
|
|
|
|
|
<el-select v-model="selectedVersion" placeholder="">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in versions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <el-select v-model="selectedVersion" placeholder="Select version" id="version-select">
|
|
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in versions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
<span style="float: left">{{ item.label }}</span>
|
|
|
|
|
<span style="float: right; color: #f44336;" v-if="item.tag">{{ item.tag }}</span>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select> -->
|
|
|
|
|
<el-menu
|
|
|
|
|
:default-openeds="propList"
|
|
|
|
|
class="el-menu-vertical-demo"
|
|
|
|
|
:unique-opened="true"
|
|
|
|
|
@select="handleSelect"
|
|
|
|
|
@open="handleOpen"
|
|
|
|
|
v-if="menuItems['3.9']"
|
|
|
|
|
@close="handleClose">
|
|
|
|
|
<el-submenu v-for="(item,index) in menuItems[selectedVersion]" :key="index" :index="`${index+1}`" >
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<span>{{Object.keys(item)[0]}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<el-menu-item-group v-for="(itemGroup, groupIndex) in item[Object.keys(item)[0]]" :key="groupIndex">
|
|
|
|
|
<el-menu-item :index="`${index + 1}-${groupIndex}`">{{ itemGroup.title }}</el-menu-item>
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
<div class="">
|
|
|
|
|
<el-container style="background-color: #f8f8f8;">
|
|
|
|
|
<el-aside width="300px" style="background-color: #fff;margin: 20px 0 20px 20px;">
|
|
|
|
|
<div class="version-selector">
|
|
|
|
|
<span class="version-label">版本:</span>
|
|
|
|
|
<el-select v-model="selectedVersion" placeholder="">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in versions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div >
|
|
|
|
|
<el-menu
|
|
|
|
|
:default-openeds="propList"
|
|
|
|
|
class="el-menu-vertical-demo"
|
|
|
|
|
style="padding: 0;"
|
|
|
|
|
:unique-opened="true"
|
|
|
|
|
@select="handleSelect"
|
|
|
|
|
@open="handleOpen"
|
|
|
|
|
@close="handleClose">
|
|
|
|
|
<el-submenu v-for="(item, index) in menuItems[selectedVersion]" :key="index" :index="`${index+1}`">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<span>{{Object.keys(item)[0]}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<el-menu-item-group v-for="(itemGroup, groupIndex) in item[Object.keys(item)[0]]" :key="groupIndex">
|
|
|
|
|
<el-menu-item :index="`${index + 1}-${groupIndex}`">{{ itemGroup.title }}</el-menu-item>
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
</el-submenu>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</div>
|
|
|
|
|
</el-aside>
|
|
|
|
|
<el-main>
|
|
|
|
|
<router-view></router-view>
|
|
|
|
|
</el-main>
|
|
|
|
|
</el-container>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</el-aside>
|
|
|
|
|
|
|
|
|
|
<el-main>
|
|
|
|
|
<mainComponents></mainComponents>
|
|
|
|
|
<!-- More content -->
|
|
|
|
|
</el-main>
|
|
|
|
|
</el-container>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import mainComponents from './mainComponents.vue'
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Index-1 component
|
|
|
|
|
*/
|
|
|
|
|
export default {
|
|
|
|
|
name:"developmentDocking",
|
|
|
|
|
components: {
|
|
|
|
|
mainComponents
|
|
|
|
|
},
|
|
|
|
|
onMounted(){
|
|
|
|
|
console.log('onMounted');
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
var pre = document.getElementById('code');
|
|
|
|
|
var lines = pre.innerText.split('\n'); // 根据换行符分割文本
|
|
|
|
|
pre.innerHTML = lines.map(line => `<span>${line}</span>`).join('\n'); // 重新组合字符串，每行包裹在<span>中
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created(){
|
|
|
|
|
console.log('created',this.menuItems['3.9']);
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
searchQuery:"",
|
|
|
|
|
selectedVersion: '3.9',
|
|
|
|
|
versions: [
|
|
|
|
|
{ value: 'next', label: 'Next', tag: '' },
|
|
|
|
|
{ value: '3.9', label: '3.9', tag: 'LATEST' },
|
|
|
|
|
{ value: '3.8', label: '3.8', tag: '' },
|
|
|
|
|
{ value: '3.7', label: '3.7', tag: '' },
|
|
|
|
|
{ value: '3.6', label: '3.6', tag: '' },
|
|
|
|
|
{ value: '3.5', label: '3.5', tag: '' },
|
|
|
|
|
{ value: '3.4', label: '3.4', tag: '' }
|
|
|
|
|
],
|
|
|
|
|
propList:[],
|
|
|
|
|
code: `{
|
|
|
|
|
"shipment": {
|
|
|
|
|
"service": "B2B",
|
|
|
|
|
"store_id": "",
|
|
|
|
|
"client_reference": "",
|
|
|
|
|
"parcel_count": 2,
|
|
|
|
|
"export_scc": 0,
|
|
|
|
|
"import_scc": 0,
|
|
|
|
|
"attrs": []
|
|
|
|
|
}
|
|
|
|
|
}`,
|
|
|
|
|
menuItems: {
|
|
|
|
|
"3.9": [
|
|
|
|
|
{
|
|
|
|
|
"asa":[
|
|
|
|
|
{ title: '概览', index: '1' },
|
|
|
|
|
{ title: '系统状态', index: '2' },
|
|
|
|
|
{ title: '配置选项', index: '3' },
|
|
|
|
|
{ title: '用户管理', index: '4' },
|
|
|
|
|
{ title: '日志', index: '5' }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"hhh":[
|
|
|
|
|
{ title: '来玩呀', index: '1' },
|
|
|
|
|
{ title: '系统状态', index: '2' },
|
|
|
|
|
{ title: '配置选项', index: '3' },
|
|
|
|
|
{ title: '用户管理', index: '4' },
|
|
|
|
|
{ title: '日志', index: '5' }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"小妹妹":[
|
|
|
|
|
{ title: '嘿嘿嘿', index: '1' },
|
|
|
|
|
{ title: '系统状态', index: '2' },
|
|
|
|
|
{ title: '配置选项', index: '3' },
|
|
|
|
|
{ title: '用户管理', index: '4' },
|
|
|
|
|
{ title: '日志', index: '5' }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "developmentDocking",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
searchQuery: "",
|
|
|
|
|
selectedVersion: '1.0',
|
|
|
|
|
versions: [
|
|
|
|
|
// { value: 'next', label: 'Next', tag: '' },
|
|
|
|
|
// { value: '3.9', label: '3.9', tag: 'LATEST' },
|
|
|
|
|
// { value: '3.8', label: '3.8', tag: '' },
|
|
|
|
|
// { value: '3.7', label: '3.7', tag: '' },
|
|
|
|
|
// { value: '3.6', label: '3.6', tag: '' },
|
|
|
|
|
// { value: '3.5', label: '3.5', tag: '' },
|
|
|
|
|
{ value: '1.0', label: '1.0', tag: '' }
|
|
|
|
|
],
|
|
|
|
|
code: `{
|
|
|
|
|
"shipment": {
|
|
|
|
|
"service": "B2B",
|
|
|
|
|
"store_id": "",
|
|
|
|
|
"client_reference": "",
|
|
|
|
|
"parcel_count": 2,
|
|
|
|
|
"export_scc": 0,
|
|
|
|
|
"import_scc": 0,
|
|
|
|
|
"attrs": []
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}`,
|
|
|
|
|
menuItems: {
|
|
|
|
|
"1.0": [
|
|
|
|
|
{
|
|
|
|
|
"订单模块": [
|
|
|
|
|
{ title: '下单接口', index: '1' },
|
|
|
|
|
// { title: '系统状态', index: '2' },
|
|
|
|
|
// { title: '配置选项', index: '3' },
|
|
|
|
|
// { title: '用户管理', index: '4' },
|
|
|
|
|
// { title: '日志', index: '5' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// "hhh": [
|
|
|
|
|
// { title: '来玩呀', index: '1' },
|
|
|
|
|
// { title: '系统状态', index: '2' },
|
|
|
|
|
// { title: '配置选项', index: '3' },
|
|
|
|
|
// { title: '用户管理', index: '4' },
|
|
|
|
|
// { title: '日志', index: '5' }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// "小妹妹": [
|
|
|
|
|
// { title: '嘿嘿嘿', index: '1' },
|
|
|
|
|
// { title: '系统状态', index: '2' },
|
|
|
|
|
// { title: '配置选项', index: '3' },
|
|
|
|
|
// { title: '用户管理', index: '4' },
|
|
|
|
|
// { title: '日志', index: '5' }
|
|
|
|
|
// ]
|
|
|
|
|
// }
|
|
|
|
|
],
|
|
|
|
|
// "3.5": [
|
|
|
|
|
// {
|
|
|
|
|
// "asa": [
|
|
|
|
|
// { title: '概览', index: '1' },
|
|
|
|
|
// { title: '系统状态', index: '2' },
|
|
|
|
|
// { title: '配置选项', index: '3' },
|
|
|
|
|
// { title: '用户管理', index: '4' },
|
|
|
|
|
// { title: '日志', index: '5' }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// "hhh": [
|
|
|
|
|
// { title: '来玩呀', index: '1' },
|
|
|
|
|
// { title: '系统状态', index: '2' },
|
|
|
|
|
// { title: '配置选项', index: '3' },
|
|
|
|
|
// { title: '用户管理', index: '4' },
|
|
|
|
|
// { title: '日志', index: '5' }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// "小妹妹": [
|
|
|
|
|
// { title: '嘿嘿嘿', index: '1' },
|
|
|
|
|
// { title: '系统状态', index: '2' },
|
|
|
|
|
// { title: '配置选项', index: '3' },
|
|
|
|
|
// { title: '用户管理', index: '4' },
|
|
|
|
|
// { title: '日志', index: '5' }
|
|
|
|
|
// ]
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$router.push({ name: 'mainComponents', query: { api: '1-0' } });
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
codeLines() {
|
|
|
|
|
// 将代码按行分割成数组
|
|
|
|
|
return this.code.split('\n');
|
|
|
|
|
},
|
|
|
|
|
propList() {
|
|
|
|
|
return this.menuItems[this.selectedVersion].map((_, index) => `${index + 1}`);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleOpen(key, keyPath) {
|
|
|
|
|
// console.log(key, keyPath);
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
codeLines() {
|
|
|
|
|
// 将代码按行分割成数组
|
|
|
|
|
return this.code.split('\n');
|
|
|
|
|
},
|
|
|
|
|
handleClose(key, keyPath) {
|
|
|
|
|
// console.log(key, keyPath);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleOpen(key, keyPath) {
|
|
|
|
|
// console.log(key, keyPath);
|
|
|
|
|
},
|
|
|
|
|
handleClose(key, keyPath) {
|
|
|
|
|
// console.log(key, keyPath);
|
|
|
|
|
},
|
|
|
|
|
handleSelect(key, keyPath) {
|
|
|
|
|
console.log(key, keyPath,'select');
|
|
|
|
|
this.totalIndex = keyPath[0];
|
|
|
|
|
const section = document.getElementById(`section${key}`);
|
|
|
|
|
if (section) {
|
|
|
|
|
section.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
filteredMenuItems(val) {
|
|
|
|
|
// console.log(val)
|
|
|
|
|
this.propList = []
|
|
|
|
|
if (val === "") {
|
|
|
|
|
return this.menuItems; // 如果没有搜索查询，返回全部
|
|
|
|
|
}
|
|
|
|
|
const searchLower = `${val}`;
|
|
|
|
|
// console.log(searchLower,'searchLower')
|
|
|
|
|
|
|
|
|
|
const append = this.menuItems.map((item, index) => {
|
|
|
|
|
const key = Object.keys(this.menuItems[index])[0];
|
|
|
|
|
const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
|
|
|
|
|
|
|
|
|
|
if (eleIndex !== -1) {
|
|
|
|
|
return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
|
|
|
|
|
}
|
|
|
|
|
// console.log('嘿嘿嘿没找到')
|
|
|
|
|
// 或者其他你希望在未找到时返回的值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// console.log(append.filter(x => x !== undefined), 'append');
|
|
|
|
|
const appendData = append.filter(x => x !== undefined)
|
|
|
|
|
// console.log(appendData,'appendData')
|
|
|
|
|
const index = `${appendData[0].groupIndex+1}`
|
|
|
|
|
// console.log(index,'index')
|
|
|
|
|
this.propList.push(index)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
handleSelect(key, keyPath) {
|
|
|
|
|
console.log(key, keyPath, 'select');
|
|
|
|
|
this.totalIndex = keyPath[0];
|
|
|
|
|
this.$router.push({ name: 'mainComponents', query: { api: key } });
|
|
|
|
|
},
|
|
|
|
|
filteredMenuItems(val) {
|
|
|
|
|
this.propList = [];
|
|
|
|
|
if (val === "") {
|
|
|
|
|
return this.menuItems; // 如果没有搜索查询，返回全部
|
|
|
|
|
}
|
|
|
|
|
const searchLower = `${val}`;
|
|
|
|
|
const append = this.menuItems.map((item, index) => {
|
|
|
|
|
const key = Object.keys(this.menuItems[index])[0];
|
|
|
|
|
const eleIndex = item[key].findIndex(element => searchLower === element.title.toLowerCase());
|
|
|
|
|
if (eleIndex !== -1) {
|
|
|
|
|
return { groupIndex: index, itemIndex: eleIndex, item: item[key][eleIndex] };
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const appendData = append.filter(x => x !== undefined);
|
|
|
|
|
const index = `${appendData[0].groupIndex + 1}`;
|
|
|
|
|
this.propList.push(index);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style src="./index.css" scoped></style>
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style src="./index.css" scoped></style>
|
|
|
|
|
|
