npm - @smartos-lib/components - Versions diffs - 1.7.0-beta.0 - Mend

@smartos-lib/components 1.7.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "@smartos-lib/components",
+  "type": "module",
+  "version": "1.7.0-beta.0",
+  "packageManager": "pnpm@8.14.3",
+  "author": "Wei Zhang <https://github.com/Zhang-Wei-666>",
+  "devDependencies": {
+    "@rollup/pluginutils": "^5.1.0",
+    "@types/prompts": "^2.4.9",
+    "pinia": "^2.1.7",
+    "prompts": "^2.4.2",
+    "vite-plugin-inspect": "^0.8.2",
+    "vite-plugin-pages": "^0.32.0",
+    "vite-plugin-vue-layouts": "^0.11.0",
+    "vue-router": "^4.2.5"
+  },
+  "scripts": {
+    "dev": "pnpm install && vite --host",
+    "build": "cd ../../ && pnpm build:components-prompts",
+    "build:editor": "pnpm install && vite build:components-prompts",
+    "preview": "pnpm install && vite build && vite preview --host"
+  }
+}

package/public/favicon.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<svg width="234" height="234" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M187.197 10h46.797L117.001 224.805.008 10h89.5L117 59.81 143.91 10h43.287Z" fill="#41B883"/>
+  <path d="M.008 10 117 224.805 233.994 10h-46.797l-70.196 128.883L46.221 10H.007Z" fill="#41B883"/>
+  <path d="M46.219 10 117 139.506 187.196 10h-43.288L117 59.81 89.506 10H46.22Z" fill="#35495E"/>
+  <path d="M210.562 138.833v14.557h-78.124v-14.557h78.124Zm0-7.278h-78.124c-2.073 0-4.06.767-5.525 2.131-1.465 1.365-2.288 3.217-2.288 5.147v14.557c0 1.93.823 3.781 2.288 5.146 1.465 1.365 3.452 2.132 5.525 2.132h78.124c2.073 0 4.06-.767 5.525-2.132 1.465-1.365 2.288-3.216 2.288-5.146v-14.557c0-1.93-.823-3.782-2.288-5.147-1.465-1.364-3.452-2.131-5.525-2.131Zm-62.5 43.67v36.391h-15.624v-36.391h15.624Zm0-7.279h-15.624c-2.073 0-4.06.767-5.525 2.132-1.465 1.365-2.288 3.216-2.288 5.147v36.391c0 1.93.823 3.782 2.288 5.147 1.465 1.365 3.452 2.131 5.525 2.131h15.624c2.073 0 4.06-.766 5.525-2.131 1.465-1.365 2.288-3.217 2.288-5.147v-36.391c0-1.931-.823-3.782-2.288-5.147-1.465-1.365-3.452-2.132-5.525-2.132Zm62.5 7.279v36.391H171.5v-36.391h39.062Zm0-7.279H171.5c-2.072 0-4.059.767-5.524 2.132-1.465 1.365-2.288 3.216-2.288 5.147v36.391c0 1.93.823 3.782 2.288 5.147 1.465 1.365 3.452 2.131 5.524 2.131h39.062c2.073 0 4.06-.766 5.525-2.131 1.465-1.365 2.288-3.217 2.288-5.147v-36.391c0-1.931-.823-3.782-2.288-5.147-1.465-1.365-3.452-2.132-5.525-2.132Z" fill="#000"/>
+</svg>

package/scripts/components.vite.config.ts ADDED Viewed

@@ -0,0 +1,96 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { UserConfig } from 'vite';
+import { defineConfig } from 'vite';
+import Vue from '@vitejs/plugin-vue';
+import VueJsx from '@vitejs/plugin-vue-jsx';
+import React from '@vitejs/plugin-react';
+import Unocss from 'unocss/vite';
+import Components from 'unplugin-vue-components/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style';
+import ViteCommonPlugins from '../../.vitepress/vite.common.plugins';
+import { isCustomElementRE, viteCssConfig } from './shared';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export default (options: CreateViteBaseConfigOptions = {}) => {
+  const plugins = options.plugins || [];
+  return defineConfig({
+    plugins: [
+      ...plugins,
+      // Vue 3 支持
+      Vue({
+        customElement: [isCustomElementRE],
+        script: {
+          defineModel: true,
+        },
+        template: {
+          compilerOptions: {
+            isCustomElement: tag => tag.startsWith('smart-'),
+          },
+        },
+      }),
+      // Vue JSX 支持
+      {
+        ...VueJsx({
+          exclude: [/[/\\]components-react[\\/$]+/],
+        }),
+        enforce: 'pre',
+      },
+      {
+        config: () => ({
+          esbuild: {
+            include: /\.[jt]sx*$/,
+          },
+        }),
+      },
+      // React 支持
+      React(),
+      // 子组件样式支持
+      viteVueCESubStyle(),
+      // 原子化 CSS 引擎 ( 供 Web Components 使用 )
+      Unocss({
+        configFile: resolve(__dirname, '../unocss.config.ts'),
+        mode: 'vue-scoped',
+        content: {
+          pipeline: {
+            include: [isCustomElementRE],
+          },
+        },
+      }),
+      // 自动导入使用到的组件
+      Components({
+        dts: resolve(__dirname, '../types/components.d.ts'),
+        dirs: [
+          resolve(__dirname, '../src/components'),
+          resolve(__dirname, '../src/components-private'),
+        ],
+        resolvers: [
+          // 自动导入图标组件
+          IconsResolver({ prefix: 'i' }),
+          // 自动导入 Naive UI 组件
+          NaiveUiResolver(),
+          // 自动导入 Element Plus 组件
+          ElementPlusResolver({ importStyle: false }),
+        ],
+      }),
+      ...ViteCommonPlugins({
+        autoImportDirs: [
+          resolve(__dirname, '../src/composables'),
+          resolve(__dirname, '../src/stores'),
+        ],
+      }),
+    ],
+    css: viteCssConfig,
+  });
+};
+interface CreateViteBaseConfigOptions {
+  /** 需要额外插入的 vite 插件 */
+  plugins?: UserConfig['plugins']
+}

package/scripts/shared.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export const isCustomElementRE = /\/web-components\/.*\/.*\.vue$/;
+export const viteCssConfig = {
+  preprocessorOptions: {
+    scss: {
+      additionalData: '@use "~/styles/element.scss" as *;',
+    },
+  },
+};

package/src/App.vue ADDED Viewed

@@ -0,0 +1,28 @@
+<template>
+  <!-- 全局化配置 ( 主题 ) -->
+  <NConfigProvider :theme="theme" :theme-overrides="themeOverrides" :locale="zhCN" :date-locale="dateZhCN" abstract>
+    <!-- 加载条 ( 页面加载进度 ) -->
+    <NLoadingBarProvider>
+      <router-view />
+      <GetAppEnv />
+    </NLoadingBarProvider>
+    <!-- 全局样式 ( 写入一些样式至 body 层 ) -->
+    <NGlobalStyle />
+  </NConfigProvider>
+</template>
+<script lang="ts" setup>
+  import { useLoadingBar } from 'naive-ui';
+  import { app } from '@/shared/env';
+  import { settings } from '@/settings';
+  /** 主题相关 */
+  const { theme, themeOverrides, zhCN, dateZhCN } = useNaiveTheme();
+  /** 获取当前应用的一些环境变量 */
+  function GetAppEnv() {
+    app.loadingBar = useLoadingBar();
+  }
+  useTitle(settings.name);
+</script>

package/src/components/Logo/index.vue ADDED Viewed

@@ -0,0 +1,15 @@
+<template>
+  <div class="relative" :class="props.size">
+    <i-logos-vue class="size-full" />
+    <i-carbon-template class="size-1/2 absolute right-0 bottom-0" />
+  </div>
+</template>
+<script lang="ts" setup>
+  const props = defineProps({
+    size: {
+      type: String,
+      default: 'size-12',
+    },
+  });
+</script>

package/src/components-private/.gitkeep ADDED Viewed

File without changes

package/src/composables/useElementStyle.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/indent */
+import elementPlusStyle from 'element-plus/theme-chalk/src/index.scss?inline';
+/**
+ * 挂载 Element Plus UI 的样式到 web components 组件中
+ */
+export function useElementStyle() {
+  const el = useCurrentElement();
+  onMounted(() => {
+    const shadowRoot = el.value!.parentNode!;
+    const style = document.createElement('style');
+          style.setAttribute('namespace', 'smart');
+    // 添加 element-plus 的样式到组件中
+    shadowRoot.appendChild(style).textContent = elementPlusStyle;
+    // 添加 element-plus 的样式到 document.head 中
+    // 因为 MessageBox、Notification 等组件是挂载在 document.body 上的, 否则样式不生效
+    document.querySelector('style[namespace="smart"]') || (document.head.appendChild(style.cloneNode()).textContent = elementPlusStyle);
+  });
+}

package/src/composables/useNaiveStyle.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { uniqueKeyCustomizer } from 'mixte';
+/**
+ * 挂载 Naive UI 的样式到 web components 组件中
+ * @param classPrefix 自定义组件的类的前缀, 默认为随机字符串
+ * @example
+ *
+ * // js
+ * const classPrefix = useNaiveStyle();
+ *
+ * // template
+ * <n-config-provider :cls-prefix="classPrefix">
+ *   <n-select />
+ * </n-config-provider>
+ */
+export function useNaiveStyle(classPrefix = uniqueKeyCustomizer()) {
+  const el = useCurrentElement();
+  const selectors = `style[cssr-id^="${classPrefix}-"]`;
+  onMounted(() => {
+    // Naive UI 的样式是动态插入到 document.head 中的
+    // 所以监听 document.head 中样式的变化, 并将同样前缀的样式其插入到组件中
+    function insertStyle() {
+      const shadowRoot = el.value!.parentNode!;
+      shadowRoot.querySelectorAll(selectors).forEach((style) => {
+        shadowRoot.removeChild(style);
+      });
+      Array.from(document.querySelectorAll(selectors)).forEach((style) => {
+        shadowRoot.appendChild(style.cloneNode()).textContent = style.textContent;
+      });
+    }
+    useMutationObserver(document.head, insertStyle, {
+      childList: true,
+    });
+    insertStyle();
+  });
+  return classPrefix;
+}

package/src/composables/useNaiveTheme.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
+import { deepMerge } from 'mixte';
+import { colors, fontFamily } from '@/shared/unocss.theme';
+/** 通用主题变量覆盖 */
+export const commonOverrides: GlobalThemeOverrides = {
+  common: {
+    // 默认字体
+    fontFamily: fontFamily.sans,
+    // 等宽字体
+    fontFamilyMono: fontFamily.mono,
+    // Primary 颜色
+    primaryColor: colors.primary,
+    primaryColorHover: colors['primary-hover'],
+    primaryColorPressed: colors['primary-active'],
+    primaryColorSuppl: colors.primary,
+    // Info 颜色
+    infoColor: colors.info,
+    infoColorHover: colors['info-hover'],
+    infoColorPressed: colors['info-active'],
+    infoColorSuppl: colors.info,
+    // Success 颜色
+    successColor: colors.success,
+    successColorHover: colors['success-hover'],
+    successColorPressed: colors['success-active'],
+    successColorSuppl: colors.success,
+    // Warning 颜色
+    warningColor: colors.warning,
+    warningColorHover: colors['warning-hover'],
+    warningColorPressed: colors['warning-active'],
+    warningColorSuppl: colors.warning,
+    // Error 颜色
+    errorColor: colors.error,
+    errorColorHover: colors['error-hover'],
+    errorColorPressed: colors['error-active'],
+    errorColorSuppl: colors.error,
+  },
+};
+/** 亮色主题变量覆盖 */
+export const lightThemeOverrides: GlobalThemeOverrides = deepMerge({}, commonOverrides, {
+});
+/** 深色主题变量覆盖 */
+export const darkThemeOverrides: GlobalThemeOverrides = deepMerge({}, commonOverrides, {
+  Button: {
+    textColorPrimary: '#FFF',
+    textColorHoverPrimary: '#FFF',
+    textColorPressedPrimary: '#FFF',
+    textColorFocusPrimary: '#FFF',
+    textColorDisabledPrimary: '#FFF',
+  },
+});
+export const useNaiveTheme = createSharedComposable(() => {
+  const themeStore = useThemeStore();
+  /** 当前 Naive UI 主题 */
+  const theme = computed(() => themeStore.dark ? darkTheme : null);
+  /** 对当前 NaiveUI 主题的变量覆盖 */
+  const themeOverrides = computed(() => themeStore.dark ? darkThemeOverrides : lightThemeOverrides);
+  return {
+    theme,
+    themeOverrides,
+    zhCN,
+    dateZhCN,
+  };
+});

package/src/composables/useSmart.ts ADDED Viewed

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/indent */
+import { version } from '@@/package.json';
+/**
+ * SmartOS 相关组件的公用处理逻辑
+ */
+export function useSmart() {
+  const el = useCurrentElement();
+  onMounted(() => {
+    const shadowRoot = el.value!.parentNode!; // @ts-expect-error
+    const { tailwindResetStyle, elementPlusStyle } = globalThis.SmartCore?.[version] ?? {};
+    // 挂载 Tailwind Reset 的样式
+    if (tailwindResetStyle)
+      shadowRoot.appendChild(document.createElement('style')).textContent = tailwindResetStyle;
+    // 挂载 Element Plus UI 的样式
+    if (elementPlusStyle) {
+      const style = document.createElement('style');
+            style.setAttribute('namespace', 'smart');
+      // 添加 element-plus 的样式到组件中
+      shadowRoot.appendChild(style).textContent = elementPlusStyle;
+      // 添加 element-plus 的样式到 document.head 中
+      // 因为 MessageBox、Notification 等组件是挂载在 document.body 上的, 否则样式不生效
+      document.querySelector('style[namespace="smart"]') || (document.head.appendChild(style.cloneNode()).textContent = elementPlusStyle);
+    }
+  });
+  return {
+    classPrefix: useNaiveStyle(),
+  };
+}

package/src/layouts/default.vue ADDED Viewed

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/src/main.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { isString } from 'mixte';
+import App from './App.vue';
+import type { UserModule } from './types';
+import router from '@/modules/router/install';
+import '@unocss/reset/tailwind.css';
+import 'uno.css';
+import '@/styles/styles.scss';
+// 修复 Naive UI 和 Tailwind Reset 的样式冲突
+document.head.insertAdjacentHTML('beforeend', '<meta name="naive-ui-style" />');
+const app = createApp(App);
+app.use(router);
+Object.values(import.meta.glob<{ install: UserModule }>('./modules/**/index.ts', { eager: true })).forEach(m => m.install?.({ app, router }));
+router.isReady().then(() => {
+  app.mount('#app');
+});
+const { warn, info } = console;
+console.warn = (message?: any, ...optionalParams: any[]) => {
+  if (isString(message) && message.startsWith('[Vue warn]: Extraneous non-props attributes (data')) return;
+  warn.call(console, message, ...optionalParams);
+};
+console.info = (message?: any, ...optionalParams: any[]) => { // eslint-disable-line no-console
+  if (isString(message) && message.includes('Download the React DevTools')) return;
+  info.call(console, message, ...optionalParams);
+};

package/src/modules/pinia/index.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { createPinia } from 'pinia';
+import type { UserModule } from '@/types';
+export const install: UserModule = ({ app }) => {
+  const pinia = createPinia();
+  app.use(pinia);
+};

package/src/modules/progress/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { UserModule } from '@/types';
+import { app } from '@/shared/env';
+export const install: UserModule = ({ router }) => {
+  router.beforeEach(() => {
+    app.loadingBar?.start();
+  });
+  router.afterEach(() => {
+    app.loadingBar?.finish();
+  });
+};

package/src/modules/router/install.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import routes from './routes';
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;

package/src/modules/router/routes.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import type { RouteComponent, RouteRecordRaw } from 'vue-router';
+import { isESModule, isFunction, isPlainObject, leastRun } from 'mixte';
+import { camelCase, upperFirst } from 'lodash-es';
+import { setupLayouts } from 'virtual:generated-layouts';
+import generatedRoutes from 'virtual:generated-pages';
+/** 定义页面组件名称为路由名称 */
+function defineComponentName(route: RouteRecordRaw, component: RouteComponent) {
+  if (component.name) return component;
+  return Object.assign({}, component, {
+    name: upperFirst(camelCase(route.name as string)),
+  });
+}
+/** 遍历路由 */
+function eachRoutes(routes: RouteRecordRaw[]) {
+  routes.forEach((route) => {
+    const component = route.component;
+    // 对象形式的页面组件
+    if (isPlainObject(component)) {
+      route.component = defineComponentName(route, component);
+    }
+    // 页面组件是一个方法
+    else if (isFunction(component)) {
+      // @ts-expect-error
+      route.component = () => leastRun(0, component).then((m) => {
+        return defineComponentName(route, isESModule(m) ? m.default : m);
+      });
+    }
+    // 存在子路由
+    if (route.children)
+      eachRoutes(route.children);
+  });
+}
+eachRoutes(generatedRoutes);
+export default setupLayouts(generatedRoutes);

package/src/pages/[...all].vue ADDED Viewed

@@ -0,0 +1,21 @@
+<template>
+  <div class="px-4 py-10 text-center">
+    <div class="text-5xl">
+      <i-bx-message-alt-x class="inline-block" />
+    </div>
+    <div class="mt-1">
+      未找到页面
+    </div>
+    <div class="mt-6">
+      <NButton type="primary" @click="router.back()">
+        返回
+      </NButton>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  const router = useRouter();
+</script>

package/src/pages/frame/component/[name].vue ADDED Viewed

@@ -0,0 +1,14 @@
+<template>
+  <Index :component="name" />
+</template>
+<script lang="ts" setup>
+  import Index from '../index.vue';
+  const route = useRoute();
+  const name = computed(() => route.params.name as string);
+</script>
+<route lang="yaml">
+name: Frame/Component
+</route>

package/src/pages/frame/index.vue ADDED Viewed

@@ -0,0 +1,81 @@
+<template>
+  <div class="min-h-screen flex">
+    <div class="w-full flex-grow">
+      <template v-if="tab && isReady">
+        <component :is="tab.component" v-bind="finalData" />
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { isFunction } from 'mixte';
+  import { setConfigProvider } from '@smartos-lib/core';
+  import type { Tab } from '../index/type';
+  import { LOGIN_AJAX_CONFIG, createAxiosInstance } from '../../../../apis/test-utils/env';
+  import { components } from '@/shared/components';
+  interface Props {
+    /** 指定渲染的组件名称 */
+    component?: string
+  }
+  const props = defineProps<Props>();
+  /** 组件是否加载完成 */
+  const isReady = ref(false);
+  /** 所有的选项卡信息 */
+  const tabs = useLocalStorage<Tab[]>('st-tabs', []);
+  /** 当前选项卡信息 */
+  const tab = computed(() => props.component ? ({ component: props.component } as Tab) : tabs.value.find(tab => tab.id === window.name));
+  /** 当前选项卡测试数据 */
+  const data = computed(() => components[tab.value?.component as string]?.data?.[tab.value?.data as string] || {});
+  /** 最终使用的选项卡数据 - 支持使用函数返回测试数据 */
+  const finalData = computed(() => {
+    return isFunction(data.value) ? data.value({ reloadCount: tab.value?.dataReloadCount ?? 0 }) : data.value;
+  });
+  /** Token */
+  const token = ref('');
+  /** 创建一个新的 axios 实例 */
+  const request = createAxiosInstance('/', token);
+  /** 发起登录请求 */
+  const login = useRequest(() => {
+    return request(LOGIN_AJAX_CONFIG);
+  });
+  login.onSuccess(() => {
+    token.value = login.data.value?.access_token;
+  });
+  // 加载组件
+  watchEffect(async () => {
+    const name = tab.value?.component;
+    const component = components[name as string];
+    if (component) {
+      // SmartOS 组件库, 需要先加载 '@smartos-lib/core/componentsProvider' 依赖
+      if (name!.startsWith('smart-')) {
+        setConfigProvider({ request });
+        login.execute();
+        await import('@smartos-lib/core/componentsProvider');
+      }
+      component?.index().then(() => {
+        isReady.value = true;
+        // 云文档云服务页, 依赖这几个组件, 所以也需要加载过来
+        if (name === 'smart-docx-drive-page') {
+          components['smart-file-preview']?.index();
+          components['smart-docx-editor']?.index();
+        }
+      });
+    }
+  });
+</script>
+<route lang="yaml">
+name: Frame
+</route>

package/src/pages/index/composables/useTabsManage.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { uniqueKey } from 'mixte';
+import type { Tab } from '../type';
+import { components } from '@/shared/components';
+/** 选项卡管理 */
+export function useTabsManage() {
+  /** 所有的选项卡信息 */
+  const tabs = useLocalStorage<Tab[]>('st-tabs', []);
+  /** 当前激活的选项卡 ID */
+  const activeTabId = useLocalStorage<string>('st-active-tab-id', '');
+  /** 当前激活的选项卡 */
+  const activeTab = computed(() => tabs.value.find(tab => tab.id === activeTabId.value));
+  /** 当前激活的选项卡的测试数据 */
+  const activeTabData = computed(() => components[activeTab.value?.component as string]?.data);
+  /** 创建一个新选项卡 */
+  function createTab(component: string) {
+    const id = uniqueKey(tabs.value);
+    tabs.value.push({
+      id,
+      component,
+    });
+    activeTabId.value = id;
+  }
+  /** 关闭一个选项卡 */
+  function closeTab(id: string) {
+    const index = tabs.value.findIndex(tab => tab.id === id);
+    if (index > -1) {
+      tabs.value.splice(index, 1);
+      activeTabId.value === id && (activeTabId.value = tabs.value[Math.min(index, tabs.value.length - 1)]?.id);
+    }
+  }
+  return {
+    activeTab,
+    activeTabId,
+    activeTabData,
+    tabs,
+    createTab,
+    closeTab,
+  };
+}