@gx-design-vue/pro-layout-components 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 gx12358
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+<div align="center"><a name="readme-top"></a>
+
+<img height="180" src="https://gx12358.cn/resource/img/favicon.ico">
+
+<h1>Pro Layout Components</h1>
+
+</div>
+
+## ✨ Features
+
+- 🌈 Enterprise-class UI designed for web applications.
+- 📦 A set of high-quality Vue3 components out of the box.
+- 🛡 Written in TypeScript with predictable static types.
+- ⚙️ Whole package of design resources and development tools.
+- 🌍 Internationalization support for dozens of languages.
+- 🎨 Powerful theme customization based on CSS-in-JS.
+
+## 🖥 Environment Support
+
+- Modern browsers
+- Server-side Rendering
+- [Electron](https://www.electronjs.org/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 📦 Install
+
+```bash
+npm install @gx-design-vue/pro-layout-components
+```
+
+```bash
+yarn add @gx-design-vue/pro-layout-components
+```
+
+```bash
+pnpm add @gx-design-vue/pro-layout-components
+```
+
+```bash
+bun add @gx-design-vue/pro-layout-components
+```
+
+## Acknowledgements
+
+Antdv Next is inspired by and built upon the following open-source projects.
+
+- [Ant Design](https://ant.design/)
+- [Vue.js](https://vuejs.org/)
+- [Vite](https://vitejs.dev/)
+
+## Maintainer
+
+[@gx12358](https://github.com/gx12358/vue3-antd-admin)
+
+## Contributors
+
+<a href="https://github.com/gx12358/vue3-antd-admin/graphs/contributors">
+  <img alt="Contributors" src="https://contrib.rocks/image?repo=gx12358/vue3-antd-admin" />
+</a>
+
+## Special Thanks
+
+Thanks to the [vbenjs/vue-vben-admin](https://github.com/gx12358/vue3-antd-admin) project for providing inspiration and reference implementation.
+
+## License
+
+[MIT © gx12358-2021](./LICENSE)
+
+## `Star`
+
+Thank you very much for the stars from kind-hearted people, thank you for your support :heart:
+
+[![Stargazers repo roster for @gx12358/vue3-antd-admin](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=gx12358&repo=vue3-antd-admin)](https://github.com/gx12358/vue3-antd-admin/stargazers)

package/dist/AppsLogoComponents/AppLogoList.d.ts

@@ -0,0 +1,24 @@
+import { AppListProps, AppsLogoComponentsProps } from "./props.js";
+import * as vue6 from "vue";
+import * as ant_design_vue_es__util_type0 from "ant-design-vue/es/_util/type";
+
+//#region src/AppsLogoComponents/AppLogoList.d.ts
+declare const AppsLogoList: vue6.DefineComponent<vue6.ExtractPropTypes<{
+  appList: {
+    type: vue6.PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: vue6.PropType<AppsLogoComponentsProps["onItemClick"]>;
+}>, () => ant_design_vue_es__util_type0.VueNode, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, "itemClick"[], "itemClick", vue6.PublicProps, Readonly<vue6.ExtractPropTypes<{
+  appList: {
+    type: vue6.PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: vue6.PropType<AppsLogoComponentsProps["onItemClick"]>;
+}>> & Readonly<{
+  onItemClick?: (...args: any[]) => any;
+}>, {
+  appList: AppListProps;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { AppsLogoList as default };

package/dist/AppsLogoComponents/AppLogoList.js

@@ -0,0 +1,43 @@
+import props_default from "./props.js";
+import { DefaultContent } from "./DefaultContent.js";
+import { SimpleContent } from "./SimpleContent.js";
+import { genAppLogoListStyle } from "./style/index.js";
+import { createVNode, defineComponent } from "vue";
+import { useProStyle } from "@gx-design-vue/pro-provider";
+import { getPrefixCls } from "@gx-design-vue/pro-utils";
+
+//#region src/AppsLogoComponents/AppLogoList.tsx
+const AppsLogoList = /* @__PURE__ */ defineComponent({
+	props: props_default,
+	emits: ["itemClick"],
+	setup(props) {
+		const baseClassName = getPrefixCls({
+			suffixCls: "layout-app",
+			isPor: true
+		});
+		const { wrapSSR, hashId } = useProStyle("AppsLogoList", [genAppLogoListStyle], baseClassName);
+		const cloneItemClick = (app) => {
+			props.onItemClick?.(app);
+		};
+		return () => {
+			if (props.appList?.some((app) => {
+				return !app?.desc;
+			})) return wrapSSR(createVNode(SimpleContent, {
+				"hashId": hashId.value,
+				"appList": props.appList,
+				"onItemClick": props.onItemClick ? cloneItemClick : void 0,
+				"baseClassName": `${baseClassName}-simple`
+			}, null));
+			return wrapSSR(createVNode(DefaultContent, {
+				"hashId": hashId.value,
+				"appList": props.appList,
+				"onItemClick": props.onItemClick ? cloneItemClick : void 0,
+				"baseClassName": `${baseClassName}-default`
+			}, null));
+		};
+	}
+});
+var AppLogoList_default = AppsLogoList;
+
+//#endregion
+export { AppLogoList_default as default };

package/dist/AppsLogoComponents/AppsLogo.d.ts

@@ -0,0 +1,10 @@
+import { FunctionalComponent } from "vue";
+
+//#region src/AppsLogoComponents/AppsLogo.d.ts
+/**
+ * 默认的应用列表的图标
+ *
+ */
+declare const AppsLogo: FunctionalComponent;
+//#endregion
+export { AppsLogo };

package/dist/AppsLogoComponents/AppsLogo.js

@@ -0,0 +1,12 @@
+import { createVNode } from "vue";
+import { AppstoreOutlined } from "@ant-design/icons-vue";
+
+//#region src/AppsLogoComponents/AppsLogo.tsx
+/**
+* 默认的应用列表的图标
+*
+*/
+const AppsLogo = () => createVNode(AppstoreOutlined, null, null);
+
+//#endregion
+export { AppsLogo };

package/dist/AppsLogoComponents/DefaultContent.d.ts

@@ -0,0 +1,27 @@
+import { AppItemProps, AppListProps } from "./props.js";
+import * as vue0 from "vue";
+import { PropType } from "vue";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/AppsLogoComponents/DefaultContent.d.ts
+declare const DefaultContent: vue0.DefineComponent<vue0.ExtractPropTypes<{
+  hashId: PropType<string>;
+  baseClassName: PropType<string>;
+  appList: {
+    type: PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: PropType<(item: AppItemProps, popoverRef?: HTMLSpanElement | undefined) => void>;
+}>, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
+  hashId: PropType<string>;
+  baseClassName: PropType<string>;
+  appList: {
+    type: PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: PropType<(item: AppItemProps, popoverRef?: HTMLSpanElement | undefined) => void>;
+}>> & Readonly<{}>, {
+  appList: AppListProps;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { DefaultContent };

package/dist/AppsLogoComponents/DefaultContent.js

@@ -0,0 +1,43 @@
+import props_default from "./props.js";
+import { DefaultRenderLogo } from "./index.js";
+import { createVNode, defineComponent } from "vue";
+
+//#region src/AppsLogoComponents/DefaultContent.tsx
+const DefaultContent = /* @__PURE__ */ defineComponent({
+	props: {
+		hashId: String,
+		baseClassName: String,
+		appList: props_default.appList,
+		onItemClick: props_default.onItemClick
+	},
+	setup(props) {
+		return () => {
+			return createVNode("div", { "class": `${props.baseClassName}-content ${props.hashId}`.trim() }, [createVNode("ul", { "class": `${props.baseClassName}-content-list ${props.hashId}`.trim() }, [props.appList?.map((app, index) => {
+				if (app?.children?.length) return createVNode("div", {
+					"key": index,
+					"class": `${props.baseClassName}-content-list-item-group ${props.hashId}`.trim()
+				}, [createVNode("div", { "class": `${props.baseClassName}-content-list-item-group-title ${props.hashId}`.trim() }, [app.title]), createVNode(DefaultContent, {
+					"hashId": props.hashId,
+					"onItemClick": props.onItemClick,
+					"appList": app?.children,
+					"baseClassName": props.baseClassName
+				}, null)]);
+				return createVNode("li", {
+					"key": index,
+					"class": `${props.baseClassName}-content-list-item ${props.hashId}`.trim(),
+					"onClick": (e) => {
+						e.stopPropagation();
+						props.onItemClick?.(app);
+					}
+				}, [createVNode("a", {
+					"href": props.onItemClick ? void 0 : app.url,
+					"target": app.target,
+					"rel": "noreferrer"
+				}, [createVNode(DefaultRenderLogo, { "logo": app.icon }, null), createVNode("div", null, [createVNode("div", null, [app.title]), app.desc ? createVNode("span", null, [app.desc]) : null])])]);
+			})])]);
+		};
+	}
+});
+
+//#endregion
+export { DefaultContent };

package/dist/AppsLogoComponents/SimpleContent.d.ts

@@ -0,0 +1,38 @@
+import { AppItemProps, AppListProps } from "./props.js";
+import * as vue17 from "vue";
+import { PropType } from "vue";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/AppsLogoComponents/SimpleContent.d.ts
+/**
+ * simple 模式渲染logo的方式
+ *
+ * @param logo
+ * @param title
+ * @returns
+ */
+declare function renderLogo(logo: AppItemProps['icon'], title?: CustomRender): string | number | boolean | void | vue17.VNode<vue17.RendererNode, vue17.RendererElement, {
+  [key: string]: any;
+}> | vue17.VNodeArrayChildren | vue17.Slot | ((...props: any[]) => vue17.VNode);
+declare const SimpleContent: vue17.DefineComponent<vue17.ExtractPropTypes<{
+  hashId: PropType<string>;
+  baseClassName: PropType<string>;
+  appList: {
+    type: PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: PropType<(item: AppItemProps, popoverRef?: HTMLSpanElement | undefined) => void>;
+}>, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue17.ComponentOptionsMixin, vue17.ComponentOptionsMixin, {}, string, vue17.PublicProps, Readonly<vue17.ExtractPropTypes<{
+  hashId: PropType<string>;
+  baseClassName: PropType<string>;
+  appList: {
+    type: PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: PropType<(item: AppItemProps, popoverRef?: HTMLSpanElement | undefined) => void>;
+}>> & Readonly<{}>, {
+  appList: AppListProps;
+}, {}, {}, {}, string, vue17.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { SimpleContent, renderLogo };

package/dist/AppsLogoComponents/SimpleContent.js

@@ -0,0 +1,63 @@
+import props_default from "./props.js";
+import { createVNode, defineComponent } from "vue";
+import { isUrl } from "@gx-design-vue/pro-utils";
+
+//#region src/AppsLogoComponents/SimpleContent.tsx
+/**
+* simple 模式渲染logo的方式
+*
+* @param logo
+* @param title
+* @returns
+*/
+function renderLogo(logo, title) {
+	if (logo && typeof logo === "string" && isUrl(logo)) return createVNode("img", {
+		"src": logo,
+		"alt": "logo"
+	}, null);
+	if (typeof logo === "function") return logo();
+	if (logo && typeof logo === "string") return createVNode("div", { "id": "avatarLogo" }, [logo]);
+	if (!logo && title && typeof title === "string") {
+		const symbol = title.substring(0, 1);
+		return createVNode("div", { "id": "avatarLogo" }, [symbol]);
+	}
+	return logo;
+}
+const SimpleContent = /* @__PURE__ */ defineComponent({
+	props: {
+		hashId: String,
+		baseClassName: String,
+		appList: props_default.appList,
+		onItemClick: props_default.onItemClick
+	},
+	setup(props) {
+		return () => {
+			return createVNode("div", { "class": `${props.baseClassName}-content ${props.hashId}`.trim() }, [createVNode("ul", { "class": `${props.baseClassName}-content-list ${props.hashId}`.trim() }, [props.appList?.map((app, index) => {
+				if (app?.children?.length) return createVNode("div", {
+					"key": index,
+					"class": `${props.baseClassName}-content-list-item-group ${props.hashId}`.trim()
+				}, [createVNode("div", { "class": `${props.baseClassName}-content-list-item-group-title ${props.hashId}`.trim() }, [app.title]), createVNode(SimpleContent, {
+					"hashId": props.hashId,
+					"onItemClick": props.onItemClick,
+					"appList": app?.children,
+					"baseClassName": props.baseClassName
+				}, null)]);
+				return createVNode("li", {
+					"key": index,
+					"class": `${props.baseClassName}-content-list-item ${props.hashId}`.trim(),
+					"onClick": (e) => {
+						e.stopPropagation();
+						props.onItemClick?.(app);
+					}
+				}, [createVNode("a", {
+					"href": props.onItemClick ? "javascript:;" : app.url,
+					"target": app.target,
+					"rel": "noreferrer"
+				}, [renderLogo(app.icon, app.title), createVNode("div", null, [createVNode("div", null, [app.title])])])]);
+			})])]);
+		};
+	}
+});
+
+//#endregion
+export { SimpleContent, renderLogo };

package/dist/AppsLogoComponents/index.d.ts

@@ -0,0 +1,32 @@
+import { AppItemProps, AppListProps, AppsLogoComponentsProps } from "./props.js";
+import * as vue37 from "vue";
+import { FunctionalComponent } from "vue";
+import * as ant_design_vue_es__util_type0 from "ant-design-vue/es/_util/type";
+
+//#region src/AppsLogoComponents/index.d.ts
+/**
+ * 默认渲染logo的方式，如果是个string，用img。否则直接返回
+ *
+ * @param logo
+ * @returns
+ */
+declare const DefaultRenderLogo: FunctionalComponent<{
+  logo: AppItemProps['icon'];
+}>;
+declare const AppsLogoIcon: vue37.DefineComponent<vue37.ExtractPropTypes<{
+  appList: {
+    type: vue37.PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: vue37.PropType<AppsLogoComponentsProps["onItemClick"]>;
+}>, () => ant_design_vue_es__util_type0.VueNode, {}, {}, {}, vue37.ComponentOptionsMixin, vue37.ComponentOptionsMixin, {}, string, vue37.PublicProps, Readonly<vue37.ExtractPropTypes<{
+  appList: {
+    type: vue37.PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: vue37.PropType<AppsLogoComponentsProps["onItemClick"]>;
+}>> & Readonly<{}>, {
+  appList: AppListProps;
+}, {}, {}, {}, string, vue37.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { DefaultRenderLogo, AppsLogoIcon as default };

package/dist/AppsLogoComponents/index.js

@@ -0,0 +1,71 @@
+import props_default from "./props.js";
+import { genAppLogoIcon } from "./style/index.js";
+import AppLogoList_default from "./AppLogoList.js";
+import { AppsLogo } from "./AppsLogo.js";
+import { Fragment, createVNode, defineComponent, ref } from "vue";
+import { useState } from "@gx-design-vue/pro-hooks";
+import { useProStyle } from "@gx-design-vue/pro-provider";
+import { classNames, getPrefixCls } from "@gx-design-vue/pro-utils";
+import { Popover } from "ant-design-vue";
+
+//#region src/AppsLogoComponents/index.tsx
+/**
+* 默认渲染logo的方式，如果是个string，用img。否则直接返回
+*
+* @param logo
+* @returns
+*/
+const DefaultRenderLogo = ({ logo }) => {
+	if (typeof logo === "string") return createVNode("img", {
+		"width": "auto",
+		"height": 22,
+		"src": logo,
+		"alt": "logo"
+	}, null);
+	if (typeof logo === "function") return logo();
+	return logo;
+};
+const AppsLogoIcon = /* @__PURE__ */ defineComponent({
+	name: "AppsLogoIcon",
+	inheritAttrs: false,
+	props: props_default,
+	setup(props) {
+		const baseClassName = getPrefixCls({
+			suffixCls: "layout-app",
+			isPor: true
+		});
+		const { wrapSSR, hashId } = useProStyle("AppsLogoIcon", [genAppLogoIcon], baseClassName);
+		const [open, setOpen] = useState(false);
+		const rootRef = ref();
+		const popoverRef = ref();
+		return () => {
+			return wrapSSR(createVNode(Fragment, null, [createVNode("div", {
+				"ref": rootRef,
+				"onClick": (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+				}
+			}, null), createVNode(Popover, {
+				"placement": "bottomRight",
+				"trigger": ["click"],
+				"arrow": false,
+				"destroyTooltipOnHide": true,
+				"open": open.value,
+				"onOpenChange": setOpen,
+				"overlayClassName": `${baseClassName}-popover ${hashId.value}`.trim(),
+				"content": createVNode(AppLogoList_default, props, null),
+				"getPopupContainer": () => rootRef.value || document.body
+			}, { default: () => [createVNode("span", {
+				"ref": popoverRef,
+				"onClick": (e) => {
+					e.stopPropagation();
+				},
+				"class": classNames(`${baseClassName}-icon`, hashId.value, { [`${baseClassName}-icon-active`]: open.value })
+			}, [createVNode(AppsLogo, null, null)])] })]));
+		};
+	}
+});
+var AppsLogoComponents_default = AppsLogoIcon;
+
+//#endregion
+export { DefaultRenderLogo, AppsLogoComponents_default as default };

package/dist/AppsLogoComponents/props.d.ts

@@ -0,0 +1,26 @@
+import { PropType } from "vue";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+
+//#region src/AppsLogoComponents/props.d.ts
+interface AppItemProps {
+  title: CustomRender;
+  desc?: CustomRender;
+  icon?: CustomRender | (() => CustomRender);
+  url?: string;
+  target?: string;
+  children?: Omit<AppItemProps, 'children'>[];
+}
+type AppListProps = AppItemProps[];
+interface AppsLogoComponentsProps {
+  appList?: AppListProps;
+  onItemClick?: (item: AppItemProps, popoverRef?: HTMLSpanElement | undefined) => void;
+}
+declare const appsLogoComponentsProps: {
+  appList: {
+    type: PropType<AppListProps>;
+    default: any;
+  };
+  onItemClick: PropType<AppsLogoComponentsProps["onItemClick"]>;
+};
+//#endregion
+export { AppItemProps, AppListProps, AppsLogoComponentsProps, appsLogoComponentsProps as default };

package/dist/AppsLogoComponents/props.js

@@ -0,0 +1,12 @@
+//#region src/AppsLogoComponents/props.ts
+const appsLogoComponentsProps = {
+	appList: {
+		type: Array,
+		default: void 0
+	},
+	onItemClick: Function
+};
+var props_default = appsLogoComponentsProps;
+
+//#endregion
+export { props_default as default };

package/dist/AppsLogoComponents/style/default.d.ts

@@ -0,0 +1,6 @@
+import { GenerateStyle } from "@gx-design-vue/pro-provider";
+
+//#region src/AppsLogoComponents/style/default.d.ts
+declare const genAppsLogoComponentsDefaultListStyle: GenerateStyle;
+//#endregion
+export { genAppsLogoComponentsDefaultListStyle };

package/dist/AppsLogoComponents/style/default.js

@@ -0,0 +1,70 @@
+import { resetComponent } from "@gx-design-vue/pro-provider";
+
+//#region src/AppsLogoComponents/style/default.ts
+const genAppsLogoComponentsDefaultListStyle = (token) => {
+	return { "&-content": {
+		maxHeight: "calc(100vh - 48px)",
+		overflow: "auto",
+		"&-list": {
+			boxSizing: "content-box",
+			maxWidth: 656,
+			marginBlock: 0,
+			marginInline: 0,
+			paddingBlock: 0,
+			paddingInline: 0,
+			listStyle: "none",
+			"&-item": {
+				position: "relative",
+				display: "inline-block",
+				width: 328,
+				height: 72,
+				paddingInline: 16,
+				paddingBlock: 16,
+				verticalAlign: "top",
+				listStyleType: "none",
+				transition: "transform 0.2s cubic-bezier(0.333, 0, 0, 1)",
+				borderRadius: token.borderRadius,
+				"&-group": {
+					marginBottom: 16,
+					"&-title": {
+						margin: "16px 0 8px 12px",
+						fontWeight: 600,
+						color: "rgba(0, 0, 0, 0.88)",
+						fontSize: 16,
+						opacity: .85,
+						lineHeight: 1.5,
+						"&:first-child": { marginTop: 12 }
+					}
+				},
+				"&:hover": { backgroundColor: token.colorBgTextHover },
+				"* div": resetComponent?.(token),
+				a: {
+					display: "flex",
+					height: "100%",
+					fontSize: 12,
+					textDecoration: "none",
+					"& > img": {
+						width: 40,
+						height: 40
+					},
+					"& > div": {
+						marginInlineStart: 14,
+						color: token.colorTextHeading,
+						fontSize: 14,
+						lineHeight: "22px",
+						whiteSpace: "nowrap",
+						textOverflow: "ellipsis"
+					},
+					"& > div > span": {
+						color: token.colorTextSecondary,
+						fontSize: 12,
+						lineHeight: "20px"
+					}
+				}
+			}
+		}
+	} };
+};
+
+//#endregion
+export { genAppsLogoComponentsDefaultListStyle };

package/dist/AppsLogoComponents/style/index.d.ts

@@ -0,0 +1,7 @@
+import { GenerateStyle } from "@gx-design-vue/pro-provider";
+
+//#region src/AppsLogoComponents/style/index.d.ts
+declare const genAppLogoListStyle: GenerateStyle;
+declare const genAppLogoIcon: GenerateStyle;
+//#endregion
+export { genAppLogoIcon, genAppLogoListStyle };

package/dist/AppsLogoComponents/style/index.js

@@ -0,0 +1,60 @@
+import { genAppsLogoComponentsDefaultListStyle } from "./default.js";
+import { genAppsLogoComponentsSimpleListStyle } from "./simple.js";
+import { getTokenLayoutTheme } from "@gx-design-vue/pro-layout";
+import { getAlphaColor } from "ant-design-vue/es/theme/themes/dark/colorAlgorithm";
+
+//#region src/AppsLogoComponents/style/index.ts
+const genAppLogoListStyle = (token) => {
+	return { [token.componentCls]: {
+		"&-simple": genAppsLogoComponentsSimpleListStyle(token),
+		"&-default": genAppsLogoComponentsDefaultListStyle(token)
+	} };
+};
+const genAppLogoIcon = (token) => {
+	const { theme } = getTokenLayoutTheme(token);
+	return { [token.componentCls]: {
+		"&-icon": {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			paddingInline: 4,
+			paddingBlock: 0,
+			fontSize: 18,
+			lineHeight: "14px",
+			height: 28,
+			width: 28,
+			cursor: "pointer",
+			color: theme === "dark" ? token.colorWhite : token.layout?.colorTextAppListIcon,
+			borderRadius: token.borderRadius,
+			"&:hover": {
+				color: theme === "dark" ? token.colorWhite : token.layout?.colorTextAppListIconHover,
+				backgroundColor: theme === "dark" ? getAlphaColor("#fff", .12) : token.layout?.colorBgAppListIconHover
+			},
+			[`&-active${token.proComponentsCls}-layout-app-icon`]: {
+				fontSize: 18,
+				color: theme === "dark" ? token.colorWhite : token.layout?.colorTextAppListIconHover,
+				backgroundColor: theme === "dark" ? getAlphaColor("#fff", .12) : token.layout?.colorBgAppListIconHover
+			}
+		},
+		"&-item-title": {
+			marginInlineStart: "16px",
+			marginInlineEnd: "8px",
+			marginBlockStart: 0,
+			marginBlockEnd: "12px",
+			fontWeight: 600,
+			color: "rgba(0, 0, 0, 0.88)",
+			fontSize: 16,
+			opacity: .85,
+			lineHeight: 1.5,
+			"&:first-child": { marginBlockStart: 12 }
+		},
+		"&-popover": {
+			width: "max-content",
+			maxWidth: "100vw",
+			[`${token.antCls}-popover-arrow`]: { display: "none" }
+		}
+	} };
+};
+
+//#endregion
+export { genAppLogoIcon, genAppLogoListStyle };

package/dist/AppsLogoComponents/style/simple.d.ts

@@ -0,0 +1,6 @@
+import { GenerateStyle } from "@gx-design-vue/pro-provider";
+
+//#region src/AppsLogoComponents/style/simple.d.ts
+declare const genAppsLogoComponentsSimpleListStyle: GenerateStyle;
+//#endregion
+export { genAppsLogoComponentsSimpleListStyle };