You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.1 KiB
66 lines
2.1 KiB
@model Dictionary<string,string>
|
|
@section styles{
|
|
<style>
|
|
#close {
|
|
position: absolute;
|
|
top: 1em;
|
|
left: calc(100%/2 - 1em);
|
|
width: 2em;
|
|
line-height: 2em;
|
|
display: inline-block;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: gray;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
}
|
|
@section scripts{
|
|
<script>
|
|
const model = Vue.reactive((@Json.Serialize(Model)));
|
|
var app = {
|
|
setup() {
|
|
const show = Vue.ref(false);
|
|
const detail = (key, value) => {
|
|
const flask = new CodeFlask('#editor', { language: 'js', readonly: true });
|
|
flask.updateCode(value);
|
|
show.value = true;
|
|
//
|
|
};
|
|
const close = () => {
|
|
show.value = false;
|
|
};
|
|
return {
|
|
model,
|
|
show,
|
|
close,
|
|
detail
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
}
|
|
<div style="display:inline-flex;justify-content:center;align-items:flex-start;width:100%;box-sizing:border-box;">
|
|
<table class="pure-table pure-table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>文件</th>
|
|
<th>详情</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(value,key) in model">
|
|
<td class="white-space-nowrap">{{key}}</td>
|
|
<td class="white-space-nowrap" v-on:click="detail(key,value)"><span style="cursor:pointer;">详情</span></td>
|
|
<td class="white-space-nowrap"><a :href="'@Url.Action("Edit")?file='+encodeURIComponent(key)">编辑</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="modal" style="width:100%;height:100vh;position:absolute;top:0;overflow:hidden;" v-show="show">
|
|
<div id="editor" style="width:100%;height:100%;overflow:scroll;"></div>
|
|
<span id="close" v-on:click="close">X</span>
|
|
</div>
|
|
|
|
|