feat: 更改文件目录，编写部分文档
咬轮猫
3 years ago
parent
feb6f31d69
commit
1a3529e354
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="#ffffff" stroke-width="4">
|
||||
<path d="M39.3 6.00012H8.7C7.20883 6.00012 6 7.20895 6 8.70012V39.3001C6 40.7913 7.20883 42.0001 8.7 42.0001H39.3C40.7912 42.0001 42 40.7913 42 39.3001V8.70012C42 7.20895 40.7912 6.00012 39.3 6.00012Z" fill="none" stroke-linejoin="round" />
|
||||
<path d="M32 6V24H15V6H32Z" fill="none" stroke-linejoin="round" />
|
||||
<path d="M26 13.0001V17.0001" stroke-linecap="round" />
|
||||
<path d="M10.9969 6.00012H35.9985" stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 653 B |
@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { VAceEditor } from 'vue3-ace-editor';
|
||||
import '@/config-center/ace-edit';
|
||||
|
||||
import { useImportDataModel } from '@/hooks';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const content = ref<string>('');
|
||||
|
||||
const onImportJson = () => {
|
||||
useImportDataModel(content.value);
|
||||
ElMessage.success('导入成功');
|
||||
};
|
||||
defineExpose({
|
||||
onImportJson
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-ace-editor
|
||||
v-model:value="content"
|
||||
lang="json"
|
||||
theme="monokai"
|
||||
style="height: 400px"
|
||||
:options="{
|
||||
useWorker: true,
|
||||
enableBasicAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
enableLiveAutocompletion: true
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@ -1,50 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { VAceEditor } from 'vue3-ace-editor';
|
||||
import '@/config-center/ace-edit';
|
||||
import { useGlobalStore } from '@/store/global';
|
||||
import { useSvgEditLayoutStore } from '@/store/svgedit-layout';
|
||||
import { useConfigStore } from '@/store/config';
|
||||
import { IDataModel } from '../../types';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const content = ref<string>('');
|
||||
const globalStore = useGlobalStore();
|
||||
const svgEditLayoutStore = useSvgEditLayoutStore();
|
||||
const configStore = useConfigStore();
|
||||
const onImportJson = () => {
|
||||
try {
|
||||
const json: IDataModel = JSON.parse(content.value);
|
||||
console.log(json, json.layout_center, configStore, 15);
|
||||
if (!json.config || !json.layout_center || !json.done_json) {
|
||||
ElMessage.error('请导入正确的数据模型！');
|
||||
return;
|
||||
}
|
||||
configStore.svg = json.config;
|
||||
svgEditLayoutStore.center_offset = json.layout_center;
|
||||
globalStore.setDoneJson(json.done_json);
|
||||
ElMessage.success('导入成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('请导入正确的数据模型！');
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
};
|
||||
defineExpose({
|
||||
onImportJson
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-ace-editor
|
||||
v-model:value="content"
|
||||
lang="json"
|
||||
theme="monokai"
|
||||
style="height: 400px"
|
||||
:options="{
|
||||
useWorker: true,
|
||||
enableBasicAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
enableLiveAutocompletion: true
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@ -0,0 +1,5 @@
|
||||
import WebtopoSvgEdit from '@/components/webtopo-svg-edit/index.vue';
|
||||
import WebtopoSvgPreview from '@/components/webtopo-svg-preview/index.vue';
|
||||
import 'virtual:windi.css';
|
||||
import 'virtual:svg-icons-register';
|
||||
export { WebtopoSvgEdit, WebtopoSvgPreview };
|
||||
@ -1,9 +1,396 @@
|
||||
<template>
|
||||
<webtopo-svgedit @on-return="onReturn"></webtopo-svgedit>
|
||||
<webtopo-svg-edit
|
||||
@on-return="onReturn"
|
||||
@on-preview="onPreview"
|
||||
@on-save="onSave"
|
||||
></webtopo-svg-edit>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import WebtopoSvgedit from '../../components/webtopo-svgedit/index.vue';
|
||||
// import { ref } from 'vue';
|
||||
import { IDataModel } from '@/components/webtopo-svg-edit/types';
|
||||
// import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
|
||||
// const setCustomToolBar = ref({
|
||||
// 测试注入组件: [
|
||||
// {
|
||||
// groupType: 'element-ui',
|
||||
// title: 'element-ui',
|
||||
// list: [
|
||||
// {
|
||||
// name: 'el-button',
|
||||
// tag: 'el-button',
|
||||
// title: '按钮',
|
||||
// type: 'Vue',
|
||||
// config: {
|
||||
// can_zoom: true,
|
||||
// have_anchor: true,
|
||||
// actual_rect: true
|
||||
// },
|
||||
// display: true,
|
||||
// props: {
|
||||
// size: {
|
||||
// title: '尺寸',
|
||||
// type: 'Select',
|
||||
// val: 'default',
|
||||
// options: [
|
||||
// {
|
||||
// label: '大',
|
||||
// value: 'large'
|
||||
// },
|
||||
// {
|
||||
// label: '默认',
|
||||
// value: 'default'
|
||||
// },
|
||||
// {
|
||||
// label: '小',
|
||||
// value: 'small'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// type: {
|
||||
// title: '类型',
|
||||
// type: 'Select',
|
||||
// val: 'primary',
|
||||
// options: [
|
||||
// {
|
||||
// label: '主要按钮',
|
||||
// value: 'primary'
|
||||
// },
|
||||
// {
|
||||
// label: '成功按钮',
|
||||
// value: 'success'
|
||||
// },
|
||||
// {
|
||||
// label: '警告按钮',
|
||||
// value: 'warning'
|
||||
// },
|
||||
// {
|
||||
// label: '危险按钮',
|
||||
// value: 'danger'
|
||||
// },
|
||||
// {
|
||||
// label: '信息按钮',
|
||||
// value: 'info'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// plain: {
|
||||
// title: '朴素按钮',
|
||||
// type: 'Switch',
|
||||
// val: false
|
||||
// },
|
||||
// text: {
|
||||
// title: '文字按钮',
|
||||
// type: 'Switch',
|
||||
// val: false
|
||||
// }
|
||||
// },
|
||||
// tag_slot: '按钮'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// groupType: 'custom-vue',
|
||||
// title: '自定义',
|
||||
// list: [
|
||||
// {
|
||||
// name: 'custom-vue-common-table',
|
||||
// title: '通用表格',
|
||||
// tag: 'custom-vue-common-table',
|
||||
// type: 'Vue',
|
||||
// config: {
|
||||
// can_zoom: true,
|
||||
// have_anchor: true,
|
||||
// actual_rect: true
|
||||
// },
|
||||
// display: true,
|
||||
// props: {
|
||||
// 'col-config': {
|
||||
// title: '列配置',
|
||||
// type: 'JsonEdit',
|
||||
// val: [
|
||||
// {
|
||||
// prop: 'date',
|
||||
// label: '第一列',
|
||||
// width: '120px',
|
||||
// fixed: false,
|
||||
// sortable: false,
|
||||
// 'show-overflow-tooltip': false
|
||||
// },
|
||||
// {
|
||||
// prop: 'name',
|
||||
// label: '第二列',
|
||||
// width: '120px',
|
||||
// fixed: false,
|
||||
// sortable: false,
|
||||
// 'show-overflow-tooltip': false
|
||||
// },
|
||||
// {
|
||||
// prop: 'address',
|
||||
// label: '第三列测试',
|
||||
// width: '280px',
|
||||
// fixed: false,
|
||||
// sortable: false,
|
||||
// 'show-overflow-tooltip': false
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// data: {
|
||||
// title: '表格数据',
|
||||
// type: 'JsonEdit',
|
||||
// val: [
|
||||
// {
|
||||
// date: '2016-05-03',
|
||||
// name: 'Tom',
|
||||
// address: 'No. 189, Grove St, Los Angeles'
|
||||
// },
|
||||
// {
|
||||
// date: '2016-05-02',
|
||||
// name: 'Tom',
|
||||
// address: 'No. 189, Grove St, Los Angeles'
|
||||
// },
|
||||
// {
|
||||
// date: '2016-05-04',
|
||||
// name: 'Tom',
|
||||
// address: 'No. 189, Grove St, Los Angeles'
|
||||
// },
|
||||
// {
|
||||
// date: '2016-05-01',
|
||||
// name: 'Tom',
|
||||
// address: 'No. 189, Grove St, Los Angeles'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// height: {
|
||||
// title: '高度',
|
||||
// type: 'InputNumber',
|
||||
// val: null
|
||||
// },
|
||||
// 'max-height': {
|
||||
// title: '最大高度',
|
||||
// type: 'InputNumber',
|
||||
// val: null
|
||||
// },
|
||||
// stripe: {
|
||||
// title: '斑马纹',
|
||||
// type: 'Switch',
|
||||
// val: false
|
||||
// },
|
||||
// border: {
|
||||
// title: '纵向边框',
|
||||
// type: 'Switch',
|
||||
// val: false
|
||||
// },
|
||||
// size: {
|
||||
// title: '尺寸',
|
||||
// type: 'Select',
|
||||
// val: 'default',
|
||||
// options: [
|
||||
// {
|
||||
// label: '大',
|
||||
// value: 'large'
|
||||
// },
|
||||
// {
|
||||
// label: '默认',
|
||||
// value: 'default'
|
||||
// },
|
||||
// {
|
||||
// label: '小',
|
||||
// value: 'small'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// fit: {
|
||||
// title: '列宽自撑开',
|
||||
// type: 'Switch',
|
||||
// val: false
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
// const import_model = ref(
|
||||
// JSON.stringify({
|
||||
// layout_center: {
|
||||
// x: 0,
|
||||
// y: 0
|
||||
// },
|
||||
// config: {
|
||||
// background_color: '#fff',
|
||||
// scale: 1,
|
||||
// position_center: {
|
||||
// x: -295,
|
||||
// y: -95
|
||||
// },
|
||||
// svg_position_center: {
|
||||
// x: 50,
|
||||
// y: 50
|
||||
// }
|
||||
// },
|
||||
// done_json: [
|
||||
// {
|
||||
// id: 'circuit-breakerCuFTG7Iy6F',
|
||||
// x: 474,
|
||||
// y: 226,
|
||||
// client: {
|
||||
// x: 474,
|
||||
// y: 226
|
||||
// },
|
||||
// scale_x: 1,
|
||||
// scale_y: 1,
|
||||
// rotate: 0,
|
||||
// actual_bound: {
|
||||
// x: 23.1640625,
|
||||
// y: 19.375,
|
||||
// width: 61.201171875,
|
||||
// height: 64.033203125
|
||||
// },
|
||||
// point_coordinate: {
|
||||
// tl: {
|
||||
// x: 443.3994140625,
|
||||
// y: 193.9833984375
|
||||
// },
|
||||
// tc: {
|
||||
// x: 474,
|
||||
// y: 193.9833984375
|
||||
// },
|
||||
// tr: {
|
||||
// x: 504.6005859375,
|
||||
// y: 193.9833984375
|
||||
// },
|
||||
// l: {
|
||||
// x: 443.3994140625,
|
||||
// y: 226
|
||||
// },
|
||||
// r: {
|
||||
// x: 504.6005859375,
|
||||
// y: 226
|
||||
// },
|
||||
// bl: {
|
||||
// x: 443.3994140625,
|
||||
// y: 258.0166015625
|
||||
// },
|
||||
// bc: {
|
||||
// x: 474,
|
||||
// y: 258.0166015625
|
||||
// },
|
||||
// br: {
|
||||
// x: 504.6005859375,
|
||||
// y: 258.0166015625
|
||||
// }
|
||||
// },
|
||||
// name: 'circuit-breaker',
|
||||
// title: '断路器',
|
||||
// type: 'File',
|
||||
// config: {
|
||||
// can_zoom: true,
|
||||
// have_anchor: true,
|
||||
// actual_rect: true
|
||||
// },
|
||||
// display: true,
|
||||
// props: {},
|
||||
// state: {
|
||||
// OnOff: {
|
||||
// title: '开关',
|
||||
// default: false,
|
||||
// props: {
|
||||
// fill: {
|
||||
// openVal: '#00ff00',
|
||||
// closeVal: '#ff0000'
|
||||
// },
|
||||
// 'fill-opacity': {
|
||||
// openVal: '0',
|
||||
// closeVal: '1'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// id: 'traction-transformer9nzBE9dPxm',
|
||||
// x: 666,
|
||||
// y: 170,
|
||||
// client: {
|
||||
// x: 666,
|
||||
// y: 170
|
||||
// },
|
||||
// scale_x: 1,
|
||||
// scale_y: 1,
|
||||
// rotate: 0,
|
||||
// actual_bound: {
|
||||
// x: 35.416664123535156,
|
||||
// y: 22.916667938232422,
|
||||
// width: 26.858333587646484,
|
||||
// height: 54.16874313354492
|
||||
// },
|
||||
// point_coordinate: {
|
||||
// tl: {
|
||||
// x: 652.5708332061768,
|
||||
// y: 142.91562843322754
|
||||
// },
|
||||
// tc: {
|
||||
// x: 666,
|
||||
// y: 142.91562843322754
|
||||
// },
|
||||
// tr: {
|
||||
// x: 679.4291667938232,
|
||||
// y: 142.91562843322754
|
||||
// },
|
||||
// l: {
|
||||
// x: 652.5708332061768,
|
||||
// y: 170
|
||||
// },
|
||||
// r: {
|
||||
// x: 679.4291667938232,
|
||||
// y: 170
|
||||
// },
|
||||
// bl: {
|
||||
// x: 652.5708332061768,
|
||||
// y: 197.08437156677246
|
||||
// },
|
||||
// bc: {
|
||||
// x: 666,
|
||||
// y: 197.08437156677246
|
||||
// },
|
||||
// br: {
|
||||
// x: 679.4291667938232,
|
||||
// y: 197.08437156677246
|
||||
// }
|
||||
// },
|
||||
// name: 'traction-transformer',
|
||||
// title: '牵引变',
|
||||
// type: 'File',
|
||||
// config: {
|
||||
// can_zoom: true,
|
||||
// have_anchor: true,
|
||||
// actual_rect: true
|
||||
// },
|
||||
// display: true,
|
||||
// props: {
|
||||
// fill: {
|
||||
// title: '填充色',
|
||||
// type: 'Color',
|
||||
// val: '#ff0000'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
// );
|
||||
const router = useRouter();
|
||||
const onReturn = () => {
|
||||
console.log('点击了返回按钮');
|
||||
};
|
||||
const onPreview = (data_model: IDataModel) => {
|
||||
router.push({
|
||||
name: 'preview',
|
||||
params: { data_model: JSON.stringify(data_model) }
|
||||
});
|
||||
};
|
||||
const onSave = (data_model: IDataModel) => {
|
||||
console.log('点击了保存按钮，可以在此处将图存到数据库', data_model);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,33 +1,62 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import { defineConfig, UserConfigExport } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { resolve } from 'path';
|
||||
import eslintPlugin from 'vite-plugin-eslint';
|
||||
import WindiCSS from 'vite-plugin-windicss';
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
eslintPlugin({
|
||||
cache: false,
|
||||
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
||||
}),
|
||||
WindiCSS(),
|
||||
createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [
|
||||
resolve(process.cwd(), 'src/assets/svgs'),
|
||||
resolve(process.cwd(), 'src/assets/icons')
|
||||
],
|
||||
// 指定symbolId格式
|
||||
symbolId: 'svg-[name]',
|
||||
// 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
|
||||
svgoOptions: false
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
export default defineConfig(({ mode }) => {
|
||||
let config: UserConfigExport = {
|
||||
plugins: [
|
||||
vue(),
|
||||
eslintPlugin({
|
||||
cache: false,
|
||||
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
||||
}),
|
||||
WindiCSS(),
|
||||
createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [
|
||||
resolve(process.cwd(), 'src/assets/svgs'),
|
||||
resolve(process.cwd(), 'src/assets/icons')
|
||||
],
|
||||
// 指定symbolId格式
|
||||
symbolId: 'svg-[name]',
|
||||
// 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
|
||||
svgoOptions: false
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
}
|
||||
}
|
||||
};
|
||||
if (mode === 'lib') {
|
||||
config = {
|
||||
...config,
|
||||
...{
|
||||
build: {
|
||||
lib: {
|
||||
entry: resolve(__dirname, 'src/export.ts'),
|
||||
name: 'webtopo-svg-edit',
|
||||
fileName: (format) => `webtopo-svg-edit.${format}.ts`
|
||||
},
|
||||
rollupOptions: {
|
||||
// 确保外部化处理那些你不想打包进库的依赖
|
||||
external: ['vue', 'pinia'],
|
||||
output: {
|
||||
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
|
||||
globals: {
|
||||
vue: 'Vue',
|
||||
pinia: 'Pinia'
|
||||
},
|
||||
inlineDynamicImports: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue