feat: 加了一些websocket的功能

This commit is contained in:
zerlei 2024-10-10 09:46:14 +08:00
parent d572e9466e
commit f7e911943c
6 changed files with 213 additions and 14 deletions

View file

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"monaco-editor": "0.33.0", "monaco-editor": "0.33.0",
"monaco-editor-vue3": "^0.1.10", "monaco-editor-vue3": "^0.1.10",
"stringify-object": "^5.0.0",
"vue": "^3.4.21" "vue": "^3.4.21"
}, },
"devDependencies": { "devDependencies": {

View file

@ -1,37 +1,108 @@
<script setup> <script setup>
import MonacoEditor from 'monaco-editor-vue3'; import MonacoEditor from 'monaco-editor-vue3';
import { ref } from 'vue'; import HistoryBtn from "./HistoryBtn.vue"
import { ref, onMounted, computed } from 'vue';
import stringifyObject from 'stringify-object';
const cacheConfig = ref({})
const options = ref({ const options = ref({
colorDecorators: true, colorDecorators: true,
lineHeight: 24, lineHeight: 24,
tabSize: 2, tabSize: 2,
}) })
// let config = {
// x:10,
// y:20
// }
const code = ref(` const code = ref(`
config = { config = {
x:10, Name: "Test",
y:20 RemoteUrl: "D:/FileSyncTest/dtemp",
} RemotePwd: "t123",
IsDeployDb: false,
IsDeployProject: false,
LocalProjectAbsolutePath:
"D:/git/HMES-H7-HNFY/HMES-H7-HNFYMF/HMES-H7-HNFYMF.WEB",
LocalRootPath: "D:/FileSyncTest/src",
RemoteRootPath: "D:/FileSyncTest/dst",
SrcDb: {
ServerName: "172.16.12.2",
DatebaseName: "HMES_H7_HNFYMF",
User: "hmes-h7",
Password: "Hmes-h7666",
TrustServerCertificate: "True",
SyncTablesData: [
"dbo.sys_Button",
"dbo.sys_Menu",
"dbo.sys_Module",
"dbo.sys_Page",
],
},
DstDb: {
ServerName: "127.0.0.1",
DatebaseName: "HMES_H7_HNFYMF",
User: "sa",
Password: "0",
TrustServerCertificate: "True",
},
DirFileConfigs: [
{
DirPath: "/bin",
Excludes: ["/roslyn", "/Views"],
},
],
};
`) `)
function submit() { function submit() {
var config = {} var config = {}
// const config = eval(code.value) try {
eval(code.value) eval(code.value)
console.log(config) if ([undefined, null, ''].includes(config.Name)) {
throw "缺少名称!"
}
cacheConfig.value[config.Name] = config
updateStorage()
}
catch (e) {
window.alert(e)
}
} }
function onLoad(name) {
const pretty = stringifyObject(cacheConfig.value[name], {
indent: ' ',
singleQuotes: false
});
code.value = "\nconfig = " + pretty
}
const history = computed(() => {
return Object.keys(cacheConfig.value)
})
function publishCB(MsgIt) {
}
function onDel(name) {
delete cacheConfig.value[name]
updateStorage()
}
function updateStorage() {
localStorage.setItem('config', JSON.stringify(cacheConfig.value))
}
onMounted(() => {
var cacheConfigStr = localStorage.getItem('config')
if (cacheConfigStr) {
cacheConfig.value = JSON.parse(cacheConfigStr)
}
})
</script> </script>
<template> <template>
<h3>发布工具</h3> <h3>发布工具</h3>
<div>发布历史</div> <div>
<HistoryBtn :name="name" @load="onLoad" @del="onDel" v-for="name in history" />
</div>
<div style="display: flex;"> <div style="display: flex;">
<MonacoEditor theme="vs-dark" :options="options" language="javascript" :width="800" :height="700" <MonacoEditor theme="vs-dark" :options="options" language="javascript" :width="800" :height="700"
v-model:value="code"></MonacoEditor> v-model:value="code"></MonacoEditor>
<div style="width: 800px;height: 700px;background-color: #1e1e1e;"> <div style="width: 800px;height: 700px;background-color: #1e1e1e;">
发布日志 发布日志
</div> </div>

View file

@ -0,0 +1,52 @@
<template>
<button style="margin: 5px;position: relative;" v-on:click="load">{{ name }}
<div class="delbtn" title="删除" style="position: absolute;top:-5px;right:-5px;" v-on:click.stop="del">
<svg style="pointer-events: none;" t="1728198663794" class="icon" viewBox="0 0 1070 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4287" width="16" height="16">
<path
d="M729.098039 883.45098H342.588235c-81.568627 0-148.078431-66.509804-148.078431-148.078431V377.72549c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v357.647059c0 61.490196 50.196078 110.431373 110.431372 110.431373h386.509804c61.490196 0 110.431373-50.196078 110.431373-110.431373V377.72549c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v357.647059c0 81.568627-66.509804 148.078431-148.078432 148.078431z"
fill="#e6e6e6" p-id="4288"></path>
<path
d="M783.058824 266.039216v-58.980392c0-71.529412-57.72549-129.254902-129.254902-129.254902H417.882353C346.352941 77.803922 288.627451 135.529412 288.627451 207.058824v58.980392"
fill="#e6e6e6" p-id="4289"></path>
<path
d="M783.058824 284.862745c-10.039216 0-18.823529-8.784314-18.82353-18.823529v-58.980392c0-61.490196-50.196078-110.431373-110.431372-110.431373H417.882353c-61.490196 0-110.431373 50.196078-110.431373 110.431373v58.980392c0 10.039216-8.784314 18.823529-18.823529 18.823529s-18.823529-8.784314-18.823529-18.823529v-58.980392c0-81.568627 66.509804-148.078431 148.078431-148.078432h235.921569c81.568627 0 148.078431 66.509804 148.078431 148.078432v58.980392c0 10.039216-8.784314 18.823529-18.823529 18.823529z"
fill="#e6e6e6" p-id="4290"></path>
<path
d="M921.098039 296.156863H149.333333c-10.039216 0-18.823529-8.784314-18.823529-18.82353s8.784314-18.823529 18.823529-18.823529h771.764706c10.039216 0 18.823529 8.784314 18.82353 18.823529s-8.784314 18.823529-18.82353 18.82353zM410.352941 773.019608c-10.039216 0-18.823529-8.784314-18.823529-18.82353v-376.470588c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v376.470588c0 10.039216-8.784314 18.823529-18.82353 18.82353z"
fill="#e6e6e6" p-id="4291"></path>
<path
d="M661.333333 773.019608c-10.039216 0-18.823529-8.784314-18.823529-18.82353v-376.470588c0-10.039216 8.784314-18.823529 18.823529-18.823529s18.823529 8.784314 18.82353 18.823529v376.470588c0 10.039216-8.784314 18.823529-18.82353 18.82353z"
fill="#e6e6e6" p-id="4292"></path>
</svg>
</div>
</button>
</template>
<script setup>
const props = defineProps({
name: String
})
const emits = defineEmits(
['load', 'del']
)
function load() {
emits('load', props.name)
}
function del() {
emits('del', props.name)
}
// const name = ref(props.name)
</script>
<style>
.delbtn {
border-radius: 3px;
}
.delbtn:hover {
/* background-color:red; */
cursor: pointer;
border: 2px solid #9B0000;
}
</style>

View file

@ -0,0 +1,33 @@
class ConnectPipe {
#websocket;
//在这里打断点可能会导致debug错误然后浏览器打不开页面 这是为啥?
constructor() {
//Id,Msgtype,callback
// this.#websocket = new WebSocket(`ws://${window.location.host}`)
}
#OpenPipe(config, MsgCb) {
this.config = config;
var webSocUrl = `ws://${window.location.host}:${window.location.port}/websoc?Name=${config.Name}`
this.#websocket = new WebSocket(webSocUrl);
this.#websocket.onopen = (event) => {
// console.warn("websocket connected!");
this.#websocket.send(JSON.stringify(this.config));
};
this.#websocket.onmessage = (event) => {
};
this.#websocket.onclose = (event) => {};
this.#websocket.onerror = (e) => {
if (this.#websocket.readyState) {
//bla bla
}
};
}
}
let cPipe = new ConnectPipe();
export default cPipe;

38
Tool/webtool/test.js Normal file
View file

@ -0,0 +1,38 @@
config = {
Name: "Test",
RemoteUrl: "D:/FileSyncTest/dtemp",
RemotePwd: "t123",
IsDeployDb: false,
IsDeployProject: false,
LocalProjectAbsolutePath:
"D:/git/HMES-H7-HNFY/HMES-H7-HNFYMF/HMES-H7-HNFYMF.WEB",
LocalRootPath: "D:/FileSyncTest/src",
RemoteRootPath: "D:/FileSyncTest/dst",
SrcDb: {
ServerName: "172.16.12.2",
DatebaseName: "HMES_H7_HNFYMF",
User: "hmes-h7",
Password: "Hmes-h7666",
TrustServerCertificate: "True",
SyncTablesData: [
"dbo.sys_Button",
"dbo.sys_Menu",
"dbo.sys_Module",
"dbo.sys_Page",
],
},
DstDb: {
ServerName: "127.0.0.1",
DatebaseName: "HMES_H7_HNFYMF",
User: "sa",
Password: "0",
TrustServerCertificate: "True",
},
DirFileConfigs: [
{
DirPath: "/bin",
Excludes: ["/roslyn", "/Views"],
},
],
};

View file

@ -4,4 +4,8 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
server:{
host:"0.0.0.0",
port:6769
}
}) })