Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 移除了N-Layout系列组件依赖 #91

Merged
merged 5 commits into from
Sep 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions examples/App.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,20 @@
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { NGlobalStyle, NLoadingBarProvider } from 'naive-ui'
import { useCanvasState } from 'open-data-v/designer'
import { computed, provide, readonly, ref } from 'vue'
import { computed, provide, readonly } from 'vue'
import { RouterView, useRouter } from 'vue-router'

import ConfigProvider from '@/components/provider/ConfigProvider.vue'
import { useProjectSettingStoreWithOut } from '@/store/modules/projectSetting'

const canvasState = useCanvasState()
const projectStore = useProjectSettingStoreWithOut()
provide('DarkTheme', readonly(computed(() => projectStore.darkTheme)))
const overflow = ref<string>(
(() => {
if (!canvasState.isEditMode) {
return 'hidden'
} else {
return 'auto'
}
})()
)
const { currentRoute } = useRouter()
</script>

<template>
<ConfigProvider>
<n-loading-bar-provider>
<RouterView :key="currentRoute.path" :style="{ overflow }" />
<RouterView :key="currentRoute.path" />
<n-global-style />
</n-loading-bar-provider>
</ConfigProvider>
Expand All @@ -39,6 +26,5 @@ body,
#app {
height: 100vh;
width: 100vw;
// overflow: hidden;
}
</style>
8 changes: 1 addition & 7 deletions src/data/rest/Pane.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<o-input-group>
<o-input v-model:value="formData.url" style="flex: 1" readonly>
<template #prefix>
<span class="success-text" style="font-weight: 800">
<span class="accent-green-500" style="font-weight: 800">
{{ formData.method }}
</span>
</template>
Expand Down Expand Up @@ -145,9 +145,3 @@ watch(
{ immediate: true }
)
</script>

<style lang="less" scoped>
.success-text {
color: #18a058;
}
</style>
46 changes: 14 additions & 32 deletions src/data/rest/RestDataView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,23 @@
<div class="rest-data">
<slot name="data-select"></slot>
</div>
<div class="api">
<o-select
v-model:value="formData['method']"
:options="requestMethodOptions"
class="method"
:show-arrow="true"
@update-value="formChange"
/>
<o-input v-model:value="formData['url']" class="url" @update-value="formChange" />
<o-space>
<div class="flex flex-row mt-1">
<div class="w-1/4">
<o-select
v-model:value="formData['method']"
:options="requestMethodOptions"
:show-arrow="true"
@update-value="formChange"
/>
</div>
<div class="flex-1">
<o-input v-model:value="formData['url']" @update-value="formChange" />
</div>
<div>
<o-button-group class="send">
<o-button type="primary" @click="send">调试</o-button>
</o-button-group>
</o-space>
</div>
</div>
<div class="config">
<o-tabs type="line" animated>
Expand Down Expand Up @@ -70,7 +73,6 @@ import {
ODivider,
OInput,
OSelect,
OSpace,
OTabPane,
OTabs
} from 'open-data-v/ui'
Expand Down Expand Up @@ -173,26 +175,6 @@ const formChange = () => {
</script>

<style scoped lang="less">
.rest-data {
display: flex;
margin-bottom: 5px;
.selected {
flex: 4;
}
.title {
flex: 8;
}
}
.api {
display: flex;
.method {
min-width: 110px;
flex: 8;
}
.url {
flex: 90;
}
}
.response {
.resp-fail {
color: #f76560;
Expand Down
45 changes: 6 additions & 39 deletions src/data/websocket/WebsocketView.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<template>
<o-card>
<div class="rest-data">
<div class="flex">
<slot name="data-select"></slot>
</div>
<div class="api">
<o-input v-model:value="formData['url']" class="url" @update-value="formChange" />
<o-space>
<div class="flex flex-row">
<o-input v-model:value="formData['url']" class="flex-1" @update-value="formChange" />
<div>
<o-button-group class="send">
<o-button type="primary" @click="connect">链接</o-button>
<o-button @click="send">发送</o-button>
</o-button-group>
</o-space>
</div>
</div>
<div class="config">
<o-tabs type="line" animated>
Expand All @@ -31,7 +31,7 @@
</o-card>
</template>
<script setup lang="ts">
import { OButton, OButtonGroup, OCard, OInput, OSpace, OTabPane, OTabs } from 'open-data-v/ui'
import { OButton, OButtonGroup, OCard, OInput, OTabPane, OTabs } from 'open-data-v/ui'
import { onUnmounted, reactive, ref } from 'vue'

import { dataLogger } from '../utils'
Expand Down Expand Up @@ -101,36 +101,3 @@ onUnmounted(() => {
close()
})
</script>

<style scoped lang="less">
.rest-data {
display: flex;
margin-bottom: 5px;
.selected {
flex: 4;
}
.title {
flex: 8;
}
}
.api {
display: flex;
.method {
min-width: 110px;
flex: 8;
}
.url {
flex: 90;
}
}
.response {
.resp-fail {
color: #f76560;
margin-left: 10px;
}
.resp-code.resp-success {
color: #18a058;
margin-left: 10px;
}
}
</style>
11 changes: 10 additions & 1 deletion src/designer/Pane/LeftSideBar/Component/ComponentList.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="components">
<o-menu :options="menuOptions" :accordion="false" />
<o-menu :options="menuOptions" :accordion="false" :collapsed="!iscollapsed" />
</div>
</template>

Expand All @@ -14,6 +14,15 @@ import { computed, getCurrentInstance, h } from 'vue'

import ComponentItem from './ComponentItem.vue'

withDefaults(
defineProps<{
iscollapsed?: boolean
}>(),
{
iscollapsed: true
}
)

const canvasState = useCanvasState()
const instance = getCurrentInstance()
const XIcon = instance!.appContext.components['XIcon']
Expand Down
4 changes: 2 additions & 2 deletions src/designer/Pane/LeftSideBar/SideBar.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<o-tabs
v-if="!iscollapsed"
v-if="iscollapsed"
v-model:value="activeKey"
type="line"
animated
Expand Down Expand Up @@ -40,7 +40,7 @@
<template #tab>
<x-icon name="components" @click="switchTab('layer')" />
</template>
<ComponentList />
<ComponentList :iscollapsed="iscollapsed" />
</o-tab-pane>
<o-tab-pane v-else-if="activeKey === 'layer'" name="layer" display-directive="show:lazy">
<template #tab>
Expand Down
17 changes: 13 additions & 4 deletions src/designer/Pane/RightSideBar/SideBar.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div v-if="!iscollapsed">
<div v-if="iscollapsed">
<o-tabs
v-if="curComponent"
v-model:value="activeKey"
Expand Down Expand Up @@ -62,7 +62,7 @@
</o-tabs>
</div>
<div v-else>
<o-menu :options="menuOptions" />
<o-menu :options="menuOptions" :collapsed="!iscollapsed" />
</div>
</template>

Expand Down Expand Up @@ -134,7 +134,17 @@ const menuOptions = computed<MenuOption[]>(() => {
key: '1',
icon: () =>
h(XIcon, {
name: 'page'
name: 'page',
onClick: () => collapsedTabPane('canvas')
})
},
{
label: '数据',
key: '2',
icon: () =>
h(XIcon, {
name: 'data',
onClick: () => collapsedTabPane('data')
})
}
]
Expand All @@ -150,6 +160,5 @@ const collapsedTabPane = (key: string) => {
.attr-list {
@apply overflow-auto p-1 pt-0 h-full;
backdrop-filter: blur(50px);
//margin-right: 10px;
}
</style>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<ToolBar v-if="toolbars.length > 0" :bars="toolbars">
<ToolBar v-if="toolbars.length > 0" :bars="toolbars" class="w-full">
<div class="tool-bar-title">{{ canvasState.name }}</div>
</ToolBar>
</template>
Expand Down
File renamed without changes.
10 changes: 10 additions & 0 deletions src/designer/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@ import type { ToolBarItemType } from './components'
import { CodeEditor, Group, ToolBar, ToolBarItem, XIcon } from './components'
import DemoDataPlugin from './data/DemoData'
import type { StoreComponentData } from './db'
import Editor from './Editor'
import Shape from './Editor/Shape'
import { ComponentGroupList, DataMode, EditMode, GroupType, PixelEnum } from './enum'
import useComponentPlugin from './loadPlugin'
import useEmpty from './modules/Empty'
import Container from './modules/form/Container'
import Canvas from './pages/designer/Canvas.vue'
import Designer from './pages/designer/Designer.vue'
import Previewer from './pages/perviewer/viewer.vue'
import LeftSideBar from './Pane/LeftSideBar'
import RightSideBar from './Pane/RightSideBar'
import ToolsBar from './Pane/Toolsbar'
import Directive from './plugins/directive'
import type { ContextmenuItem } from './plugins/directive/contextmenu'
import {
Expand All @@ -35,6 +40,7 @@ import type {
import { createComponent, handleLogger } from './utils'

export {
Canvas,
CodeEditor,
ComponentGroupList,
Container,
Expand All @@ -45,18 +51,22 @@ export {
Designer,
Directive,
EditMode,
Editor,
exportCanvas,
Group,
GroupType,
handleLogger,
importCanvas,
LeftSideBar,
PixelEnum,
Previewer,
recoveryDraft,
RightSideBar,
setShowEm,
Shape,
ToolBar,
ToolBarItem,
ToolsBar,
undo,
useActionState,
useCanvasState,
Expand Down
10 changes: 4 additions & 6 deletions src/designer/modules/backItem/BackItem.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<o-space vertical style="width: 100%">
<o-select v-model:value="selectOption" :options="options" />
<div class="flex flex-col flex-nowrap">
<o-select v-model:value="selectOption" :options="options" class="pb-2.5" />

<o-color-picker
v-if="selectOption === 'backgroundColor'"
Expand All @@ -16,13 +16,13 @@
<div v-else-if="selectOption === 'backgroundGradient'">
<linear-gradient v-model:value="backgroundGradient" @update:value="changeBackgroundImage" />
</div>
</o-space>
</div>
</template>

<script lang="ts" setup>
import { isNumber } from 'lodash-es'
import type { SelectOption } from 'open-data-v/ui'
import { OColorPicker, OSelect, OSpace } from 'open-data-v/ui'
import { OColorPicker, OSelect } from 'open-data-v/ui'
import { onMounted, ref } from 'vue'

import { GlobalColorSwatches } from '../enum'
Expand Down Expand Up @@ -113,5 +113,3 @@ onMounted(() => {
}
})
</script>

<style lang="less" scoped></style>
2 changes: 1 addition & 1 deletion src/designer/modules/ruler/sketch-ruler/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const paletteCpu = computed<PaletteType>(() => {
<style lang="less">
.style-ruler {
position: absolute;
z-index: 3; /* 需要比resizer高 */
//z-index: 3; /* 需要比resizer高 */
width: 100%; /* scrollbar width */
height: 100%;
overflow: hidden;
Expand Down
Loading