Skip to content

Commit

Permalink
feat: pages page
Browse files Browse the repository at this point in the history
  • Loading branch information
FliPPeDround committed Dec 3, 2024
1 parent 8ed2495 commit 2e61f6a
Show file tree
Hide file tree
Showing 19 changed files with 255 additions and 182 deletions.
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,24 @@
- [x] 使用tRPC
- [x] 适配uni-app trpc(仅适配支持websocket)
- [x] tab重构
- [ ] ~~封装小程序JS-SDK~~ 使用websocket传递数据
- [x] ~~封装小程序JS-SDK~~ 使用websocket传递数据
- [x] build时不执行plugin
- [x] 支持在浏览器打开页面
- [ ] ~~浏览器窗口数据传递~~ 使用websocket传递数据
- [x] ~~浏览器窗口数据传递~~ 使用websocket传递数据
- [x] 欢迎页面
- [x] overview页面
- [ ] pages页面
- [x] 区分tabBar Pages
- [x] 渲染页面
- [x] 页面跳转
- [x] 页面搜素
- [ ] 路由传参
- [x] 路由传参
- [x] 打开组件代码位置vscode
- [x] page配置信息显示
- [ ] 组件页面
- [x] 组件渲染
- [ ] 组件搜索
- [ ] 组件跳转代码位置vscode
- [x] 组件搜索
- [x] 组件跳转代码位置vscode
- [ ] 组件文件数据
- [x] 资源页面
- [x] 获取静态资源
Expand Down
4 changes: 3 additions & 1 deletion packages/client/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ declare module 'vue' {
IframeView: typeof import('./src/components/common/IframeView.vue')['default']
Navbar: typeof import('./src/components/common/Navbar.vue')['default']
NodeTag: typeof import('./src/components/basic/NodeTag.vue')['default']
PagePathItem: typeof import('./src/components/pages/PagePathItem.vue')['default']
PageTable: typeof import('./src/components/pages/PageTable.vue')['default']
PanelGrids: typeof import('./src/components/common/PanelGrids.vue')['default']
RootStateViewer: typeof import('./src/components/state/RootStateViewer.vue')['default']
RouteMetaDetail: typeof import('./src/components/pages/RouteMetaDetail.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
RoutesTable: typeof import('./src/components/pages/RoutesTable.vue')['default']
SectionBlock: typeof import('./src/components/common/SectionBlock.vue')['default']
SideNav: typeof import('./src/components/SideNav.vue')['default']
SideNavItem: typeof import('./src/components/SideNavItem.vue')['default']
Expand Down
60 changes: 60 additions & 0 deletions packages/client/src/components/pages/PagePathItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<script setup lang="ts">
import type { PageInfo } from '@uni-helper/devtools-types'
import { VueButton, VueDropdown, VueInput } from '@vue/devtools-ui'
const props = defineProps<{
page: PageInfo
}>()
const params = ref('')
function navigate() {
const url = `/${props.page.path}`
// @ts-expect-error uni在webview的js-sdk中有getEnv方法
uni.getEnv(({ h5 }) => {
if (h5) {
trpc.changeCurrentPage.mutate({
isTabBar: Boolean(props.page.tabBar),
page: params.value ? `${url}?${params.value}` : url,
})
}
else {
const path = props.page.path
uni[props.page.tabBar ? 'switchTab' : 'redirectTo']({
url: params.value ? `${path}?${params.value}` : path,
})
}
})
}
</script>

<template>
<VueDropdown>
<code cursor-pointer>
<span>
{{ `/${page.path}` }}
</span>
</code>
<template #popper="{ hide }">
<div p2>
<form flex="~ col" @submit.prevent="() => { navigate(); hide() }">
<div px2 text-sm op50>
Fill params and navigate:
</div>
<div flex="~" items-center p2 text-sm font-mono>
{{ `/${page.path}?` }}
<VueInput
v-model="params"
n-sm w-20
placeholder="params"
/>
</div>
<VueButton block type="primary">
Navigate
</VueButton>
</form>
</div>
</template>
</VueDropdown>
</template>
67 changes: 67 additions & 0 deletions packages/client/src/components/pages/PageTable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<script setup lang="ts">
import type { PageMeta } from '@uni-helper/devtools-types'
import { VueBadge } from '@vue/devtools-ui'
defineProps<{
routeInput: string
}>()
const pages = await trpc.getPages.query()
function metaToString(meta: PageMeta, num: number = 0) {
const metaStr = JSON.stringify(meta, null, num)
return metaStr === '{}' ? '-' : metaStr
}
</script>

<template>
<div>
<table w-full>
<thead border="b base" px-3>
<tr>
<th text-left />
<th text-left>
Page Path
</th>
<th text-left>
Page Meta
</th>
</tr>
</thead>
<tbody>
<tr v-for="page of pages" :key="page.path" class="group" h-7 border="b dashed transparent hover:base">
<td w-20 pr-1>
<div flex items-center justify-end>
<VueBadge
v-if="page.tabBar"
bg-green-400:10 text-green-400
>
tabBar
</VueBadge>
</div>
</td>
<td text-sm>
<div flex="inline gap3" items-center>
<PagePathItem
:page="page"
:class="page.path.includes(routeInput) && routeInput !== '' ? 'text-green-400' : ''"
/>
<div op0 group-hover:op100 flex="~ gap1">
<button
text-sm op40 hover="op100 text-primary-400"
title="Open in editor"
@click="openInEditor(page.filePath)"
>
<div i-carbon-script-reference />
</button>
</div>
</div>
</td>
<td w-80 ws-nowrap pr-1 text-left text-sm font-mono op50 hover="text-primary op100">
<span inline-block w-80 cursor-pointer overflow-hidden text-ellipsis :title="metaToString(page.meta, 2)" @click="() => $emit('selectMeta', page.meta)">{{ metaToString(page.meta) }}</span>

Check warning on line 61 in packages/client/src/components/pages/PageTable.vue

View workflow job for this annotation

GitHub Actions / lint

The "selectMeta" event has been triggered but not declared on `defineEmits`
</td>
</tr>
</tbody>
</table>
</div>
</template>
22 changes: 22 additions & 0 deletions packages/client/src/components/pages/RouteMetaDetail.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script setup lang="ts">
import type { PageMeta } from '@uni-helper/devtools-types'
import { VueCodeBlock } from '@vue/devtools-ui'
defineProps<{
meta: PageMeta
}>()
defineEmits<{
close: []
}>()
</script>

<template>
<div p-2>
<div class="flex items-center justify-between">
<span class="font-500">Page meta detail</span>
<div class="i-carbon-close cursor-pointer p1 $ui-text" @click="$emit('close')" />
</div>
<VueCodeBlock :code="JSON.stringify(meta, null, 2)" lang="json" lines />
</div>
</template>
83 changes: 0 additions & 83 deletions packages/client/src/components/pages/RoutesTable.vue

This file was deleted.

2 changes: 1 addition & 1 deletion packages/client/src/components/tree/TreeViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function select(id: string) {
v-if="item.file"
v-tooltip="'Open in Editor'"
title="Open in Editor"
icon="i-material-symbols:my-location-outline-rounded"
icon="i-carbon-script-reference"

action mr3 flex-none op-0 group-focus:op50 group-hover:op-50
:class="{ 'op-100!': selectedNodeId === item.id }"
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { createMemoryHistory, createRouter } from 'vue-router/auto'
import App from './App.vue'

import '@unocss/reset/tailwind.css'
import './styles/main.css'
import 'uno.css'
import 'floating-vue/dist/style.css'
import '@vue/devtools-ui/style.css'
import './styles/main.css'

/** uni JS-SDK */
import './utils/uniJs.js'
Expand Down
69 changes: 21 additions & 48 deletions packages/client/src/pages/pages.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,15 @@
<script setup lang="ts">
import { VueBadge, VueInput } from '@vue/devtools-ui'
import type { PageMeta } from '@uni-helper/devtools-types'
import { VueInput } from '@vue/devtools-ui'
import { Pane, Splitpanes } from 'splitpanes'
const { currentPage: _currentPage } = useInitState()
// const params = new URLSearchParams(window.location.search)
const currentPage = toRaw(_currentPage)
const routeInput = ref(currentPage)
const pages = await trpc.getPages.query()
const pageCount = pages.length
function handlePush(page: typeof pages[number]) {
const url = `/${page.path}`
// @ts-expect-error uni在webview的js-sdk中有getEnv方法
uni.getEnv(({ h5 }) => {
if (h5) {
trpc.changeCurrentPage.mutate({
isTabBar: Boolean(page.tabBar),
page: url,
})
}
else {
uni[page.tabBar ? 'switchTab' : 'redirectTo']({
url: `/${page.path}`,
})
}
})
}
const selectedMeta = ref<PageMeta>()
</script>

<template>
Expand All @@ -42,34 +25,24 @@ function handlePush(page: typeof pages[number]) {
class="text-green!"
/>
</div>
<SectionBlock
icon="i-carbon-tree-view-alt"
text="All Pages"
:description="`${pageCount} Pages registered in your application`"
:padding="false"
>
<div cursor-pointer px4 space-y-2>
<div
v-for="page in pages"
:key="page.path"
@click="handlePush(page)"
<Splitpanes class="of-hidden">
<Pane size="70" class="of-auto!">
<SectionBlock
icon="i-carbon-tree-view-alt"
text="All Pages"
:description="`${pageCount} Pages registered in your application`"
:padding="false"
>
<VueBadge
v-if="page.tabBar"
mr2 bg-green-400:10 text-green-400
>
tabBar
</VueBadge>
<span
flex="inline gap3"
items-center
:class="page.path.includes(routeInput) ? 'text-green-400' : ''"
>
{{ `/${page.path}` }}
</span>
</div>
</div>
</SectionBlock>
<PageTable
:route-input="routeInput"
@select-meta="(meta: PageMeta) => selectedMeta = meta"
/>
</SectionBlock>
</Pane>
<Pane v-if="!!selectedMeta" size="30" class="of-auto!">
<RouteMetaDetail :meta="selectedMeta" @close="selectedMeta = undefined" />
</Pane>
</Splitpanes>
</div>
</PanelGrids>
</template>
2 changes: 1 addition & 1 deletion packages/client/src/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ body::-webkit-scrollbar {
.v-popper--theme-tooltip .v-popper__arrow-inner,
.v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible;
--uno: 'border-white dark:border-hex-121212';
--uno: 'border-white dark:border-#121212';
}

.v-popper--theme-tooltip .v-popper__arrow-outer,
Expand Down
Loading

0 comments on commit 2e61f6a

Please sign in to comment.