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

@smartos-lib/components 1.7.0-beta.0

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,
+  };
+}