@smartos-lib/components 1.7.0-beta.0

package/src/pages/index/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="size-screen p-3" un:grid="~ rows-[auto_1fr] gap-3">
+    <!-- 操作区 -->
+    <n-space justify="space-between" item-style="position: relative">
+      <!-- 左侧组件相关功能 -->
+      <n-space>
+        <n-select
+          v-model:value="componentsSelectValue"
+          class="!w-72"
+          :options="componentsOptions" :render-label="renderOptionLabel" :consistent-menu-width="false"
+          placeholder="请选择组件" clearable
+        />
+        <n-button type="primary" :disabled="!componentsSelectValue" @click="createTab(componentsSelectValue)">新增</n-button>
+        <template v-if="componentsSelectValue">
+          <router-link class="no-underline!" :to="{ name: 'Frame/Component', params: { name: componentsSelectValue } }" target="_blank">
+            <n-button type="primary">新窗口打开</n-button>
+          </router-link>
+        </template>
+      </n-space>
+      <!-- 右侧项目相关信息 -->
+      <n-space class="absolute -top-1 -right-1 <xs:hidden!" :wrap="false">
+        <Logo />
+        <div class="h-full flex-(~ col items-center justify-around) [&>*]-(text-lg op-60 transition-all duration-300) [&>*:hover]-(text-primary op-100)">
+          <!-- 切换深色模式 -->
+          <button title="切换暗色模式" @click="theme.toggle()">
+            <i-mdi-theme-light-dark v-if="theme.value === 'auto'" />
+            <i-ph-moon v-else-if="theme.value === 'dark'" />
+            <i-ic-outline-wb-sunny v-else />
+          </button>
+          <!-- 跳转到 Github -->
+          <button>
+            <a class="c-inherit!" href="https://github.com/MoomFE-Starter-Template/Web-Components-Editor" target="_blank" rel="noopener noreferrer">
+              <i-mdi-github />
+            </a>
+          </button>
+        </div>
+      </n-space>
+    </n-space>
+
+    <!-- 组件展示区 -->
+    <div ref="tabsWrapRef" class="size-full overflow-hidden">
+      <n-tabs
+        v-model:value="activeTabId"
+        :class="{ 'hidden-tabs-pad-border': tabs.length }"
+        type="card" closable animated
+        @close="closeTab"
+      >
+        <!-- 所有的组件预览区 -->
+        <template v-if="tabs.length">
+          <template v-for="tab in tabs" :key="tab.id!">
+            <n-tab-pane class="tab-pane-shadow !p-3" :name="tab.id!" :tab="renderTabTitle(tab.component)" :style="{ height: tabPaneHeight }" display-directive="show:lazy">
+              <iframe class="size-full" src="/frame" :name="tab.id!" frameborder="0" />
+            </n-tab-pane>
+          </template>
+        </template>
+        <!-- 无组件预览时 -->
+        <n-tab-pane v-else name="noop" tab="无组件预览" :closable="false" disabled />
+        <!-- 组件测试数据选择 -->
+        <template v-if="activeTabData" #suffix>
+          <!-- 使用函数返回测试数据时, 重新运行函数生成测试数据 -->
+          <n-tooltip v-if="activeTab!.data && isFunction(activeTabData[activeTab!.data])">
+            <template #trigger>
+              <i class="cursor-pointer mr-2" un:i-mdi-reload @click="dataReload" />
+            </template>
+            <div un:text="sm">当前测试数据由函数返回, 点击重新运行函数生成测试数据</div>
+          </n-tooltip>
+          <!-- 组件测试数据选择下拉框 -->
+          <n-select v-model:value="activeTab!.data" class="!w-36" size="small" placeholder="选择测试数据" :options="genTabDataOptions(activeTabData)" clearable />
+        </template>
+      </n-tabs>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { isFunction } from 'mixte';
+  import { useTabsManage } from './composables/useTabsManage';
+  import { genTabDataOptions, renderOptionLabel, renderTabTitle, useTabPaneHeight } from './utils';
+  import { componentsOptions } from '@/shared/components';
+
+  const theme = useThemeStore();
+
+  /** 选项卡容器 */
+  const tabsWrapRef = ref<HTMLElement>();
+
+  /** 选项卡管理 */
+  const { activeTab, activeTabId, activeTabData, tabs, createTab, closeTab } = useTabsManage();
+  /** 选项卡面板的高度 */
+  const tabPaneHeight = useTabPaneHeight(tabsWrapRef);
+
+  /** 操作区选中的组件列表 */
+  const componentsSelectValue = ref();
+
+  /** 重载数据 */
+  function dataReload() {
+    activeTab.value!.dataReloadCount = (activeTab.value!.dataReloadCount ?? 0) + 1;
+  }
+</script>
+
+<route lang="yaml">
+name: Index
+</route>
+
+<style lang="scss" scoped>
+  .hidden-tabs-pad-border :deep(.n-tabs-pad){
+    border-bottom: 0 !important;
+  }
+  .tab-pane-shadow{
+    box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2);
+  }
+</style>

package/src/pages/index/type.ts

@@ -0,0 +1,13 @@
+/**
+ * 单个选项卡存储的信息
+ */
+export interface Tab {
+  /** ID */
+  id?: string
+  /** 选项卡内的组件 */
+  component: string
+  /** 当前选中的测试数据 */
+  data?: string
+  /** 重载数据使用 */
+  dataReloadCount?: number
+}

package/src/pages/index/utils/index.ts

@@ -0,0 +1,41 @@
+import { type Ref, type VNodeChild } from 'vue';
+import { type SelectOption } from 'naive-ui';
+import { components } from '@/shared/components';
+
+// @unocss-include
+
+/** 渲染下拉框 Label */
+export function renderOptionLabel(option: SelectOption): VNodeChild {
+  return [
+    h('span', { class: 'text-sm' }, option.label as string),
+    h('span', { class: 'text-xs color-gray-400 ml-1' }, `( ${option.value} )`),
+  ];
+}
+
+/**
+ * 渲染选项卡名称
+ * @param component 选项卡内的组件
+ */
+export function renderTabTitle(component: string) {
+  return () => renderOptionLabel({ label: components[component]?.info.name, value: component });
+}
+
+/** 选项卡面板的高度 */
+export function useTabPaneHeight(tabsWrapRef: Ref<HTMLElement | undefined>) {
+  /** 选项卡导航 */
+  const tabNav = computed(() => tabsWrapRef.value?.querySelector('.n-tabs-nav'));
+
+  /** 选项卡容器高度 */
+  const tabsWrapHeight = useElementSize(tabsWrapRef).height;
+  /** 选项卡导航高度 */ // @ts-expect-error xxx
+  const tabNavHeight = useElementSize(tabNav).height;
+
+  return computed(() => {
+    return `${tabsWrapHeight.value - tabNavHeight.value}px`;
+  });
+}
+
+/** 生成测试数据下拉框选项 */
+export function genTabDataOptions(data: any) {
+  return Object.keys(data).map(key => ({ label: key, value: key }));
+}

package/src/settings.ts

@@ -0,0 +1,9 @@
+import type { Settings } from '@/types';
+
+/**
+ * 项目配置
+ */
+export const settings: Settings = {
+  /** 项目名称 */
+  name: 'Web Components Editor',
+};

package/src/shared/components.ts

@@ -0,0 +1,52 @@
+import { formatComponentsGlob } from '@/utils/formatComponentsGlob';
+import { deepCloneESModule } from '@/utils/deepCloneESModule';
+
+/** 组件注册文件引用 */
+type ComponentsIndex = () => Promise<any>;
+
+/** 组件信息 */
+interface ComponentsInfo {
+  /** 组件名称 */
+  name: string
+  /** 组件标签名 */
+  tag: string
+}
+
+type Components = Record<string, {
+  /** 组件信息 */
+  info: ComponentsInfo
+  /** 组件注册文件引用 */
+  index: ComponentsIndex
+  /** 组件测试数据 */
+  data: any
+}>;
+
+/** 所有组件注册文件引用 */
+const componentsIndex: Record<string, ComponentsIndex> = formatComponentsGlob(import.meta.glob('@/web-components/*/index.(ts|tsx)'));
+/** 所有组件信息文件 */
+const componentsInfo: Record<string, ComponentsInfo> = formatComponentsGlob(import.meta.glob('@/web-components/*/info.ts', { eager: true }));
+/** 所有组件的测试数据 */
+const componentsData: Record<string, any> = formatComponentsGlob(import.meta.glob('@/web-components/*/data.ts', { eager: true }));
+
+/** 所有组件相关信息 */
+export const components: Components = {};
+
+// 保存所有的组件相关信息
+Object.entries(componentsInfo).forEach(([name, info]) => {
+  // index.ts 和 info.ts 必须同时存在, 才承认这是个组件
+  if (!componentsIndex[name]) return;
+
+  components[info.tag] = {
+    info: deepCloneESModule(info),
+    index: componentsIndex[name],
+    data: deepCloneESModule(componentsData[name]),
+  };
+});
+
+/** 所有组件相关信息 - 下拉框选项 */
+export const componentsOptions = Object.values(components).map(({ info }) => {
+  return {
+    label: info.name,
+    value: info.tag,
+  };
+});

package/src/shared/env.ts

@@ -0,0 +1,11 @@
+import type { LoadingBarProviderInst } from 'naive-ui';
+
+interface App {
+  /** 当前应用的加载条模块 */
+  loadingBar?: LoadingBarProviderInst
+}
+
+/** 当前应用的一些环境变量 */
+export const app: App = {
+
+};