From f8963da889a873b3ed730f38c959dc91af857ff6 Mon Sep 17 00:00:00 2001 From: ZhangAo Date: Mon, 22 Sep 2025 17:30:00 +0800 Subject: [PATCH] u --- code/base-project/App.vue | 162 ----------- code/base-project/base-uniapp/.gitignore | 24 ++ .../base-uniapp/.vscode/extensions.json | 3 + code/base-project/base-uniapp/README.md | 5 + code/base-project/base-uniapp/index.html | 13 + code/base-project/base-uniapp/package.json | 58 ++++ code/base-project/base-uniapp/public/vite.svg | 1 + code/base-project/base-uniapp/src/App.vue | 30 ++ .../base-uniapp/src/assets/vue.svg | 1 + .../base-uniapp/src/components/HelloWorld.vue | 41 +++ code/base-project/base-uniapp/src/main.ts | 5 + code/base-project/base-uniapp/src/style.css | 79 ++++++ .../base-uniapp/src/vite-env.d.ts | 1 + code/base-project/base-uniapp/tsconfig.json | 36 +++ code/base-project/base-uniapp/vite.config.ts | 7 + .../ao-design/src/collapse/collapse-group.tsx | 129 +++++++++ .../ao-design/src/collapse/collapse.tsx | 258 ++++++++++++++++++ .../ao-design/src/collapse/context.ts | 15 + .../packages/ao-design/src/collapse/demo.vue | 31 +++ .../ao-design/src/collapse/index.scss | 86 +++++- .../packages/ao-design/src/components.ts | 3 +- .../src/descriptions/descriptions-group.tsx | 25 ++ .../descriptions.tsx} | 4 +- .../ao-design/src/descriptions/index.scss | 7 + .../packages/ao-design/src/tag/context.ts | 1 - .../packages/ao-design/src/tag/tag-group.tsx | 1 - code/base-project/base-vue/src/App.vue | 43 +-- .../base-project/base-vue/src/components.d.ts | 2 + 28 files changed, 863 insertions(+), 208 deletions(-) delete mode 100644 code/base-project/App.vue create mode 100644 code/base-project/base-uniapp/.gitignore create mode 100644 code/base-project/base-uniapp/.vscode/extensions.json create mode 100644 code/base-project/base-uniapp/README.md create mode 100644 code/base-project/base-uniapp/index.html create mode 100644 code/base-project/base-uniapp/package.json create mode 100644 code/base-project/base-uniapp/public/vite.svg create mode 100644 code/base-project/base-uniapp/src/App.vue create mode 100644 code/base-project/base-uniapp/src/assets/vue.svg create mode 100644 code/base-project/base-uniapp/src/components/HelloWorld.vue create mode 100644 code/base-project/base-uniapp/src/main.ts create mode 100644 code/base-project/base-uniapp/src/style.css create mode 100644 code/base-project/base-uniapp/src/vite-env.d.ts create mode 100644 code/base-project/base-uniapp/tsconfig.json create mode 100644 code/base-project/base-uniapp/vite.config.ts create mode 100644 code/base-project/base-vue/packages/ao-design/src/collapse/collapse-group.tsx create mode 100644 code/base-project/base-vue/packages/ao-design/src/collapse/collapse.tsx create mode 100644 code/base-project/base-vue/packages/ao-design/src/collapse/context.ts create mode 100644 code/base-project/base-vue/packages/ao-design/src/collapse/demo.vue create mode 100644 code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions-group.tsx rename code/base-project/base-vue/packages/ao-design/src/{collapse/index.tsx => descriptions/descriptions.tsx} (86%) create mode 100644 code/base-project/base-vue/packages/ao-design/src/descriptions/index.scss diff --git a/code/base-project/App.vue b/code/base-project/App.vue deleted file mode 100644 index 3a94ebbd..00000000 --- a/code/base-project/App.vue +++ /dev/null @@ -1,162 +0,0 @@ - - - - - diff --git a/code/base-project/base-uniapp/.gitignore b/code/base-project/base-uniapp/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/code/base-project/base-uniapp/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/code/base-project/base-uniapp/.vscode/extensions.json b/code/base-project/base-uniapp/.vscode/extensions.json new file mode 100644 index 00000000..a7cea0b0 --- /dev/null +++ b/code/base-project/base-uniapp/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar"] +} diff --git a/code/base-project/base-uniapp/README.md b/code/base-project/base-uniapp/README.md new file mode 100644 index 00000000..33895ab2 --- /dev/null +++ b/code/base-project/base-uniapp/README.md @@ -0,0 +1,5 @@ +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` + + diff --git a/code/base-project/base-uniapp/package.json b/code/base-project/base-uniapp/package.json new file mode 100644 index 00000000..aafd1c02 --- /dev/null +++ b/code/base-project/base-uniapp/package.json @@ -0,0 +1,58 @@ +{ + "name": "base-uniapp", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vue-tsc -b && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@dcloudio/uni-app": "3.0.0-4070620250821001", + "@dcloudio/uni-app-harmony": "3.0.0-4070620250821001", + "@dcloudio/uni-app-plus": "3.0.0-4070620250821001", + "@dcloudio/uni-components": "3.0.0-4070620250821001", + "@dcloudio/uni-h5": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-alipay": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-baidu": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-harmony": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-jd": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-kuaishou": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-lark": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-qq": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-toutiao": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001", + "@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001", + "@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001", + "pinia": "2.0.36", + "pinia-plugin-persistedstate": "3.2.1", + "vue": "^3.5.21" + }, + "devDependencies": { + "@dcloudio/types": "^3.4.8", + "@dcloudio/uni-automator": "3.0.0-4070620250821001", + "@dcloudio/uni-cli-shared": "3.0.0-4070620250821001", + "@dcloudio/uni-stacktracey": "3.0.0-4070620250821001", + "@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001", + + "@uni-helper/plugin-uni": "0.1.0", + "@uni-helper/uni-env": "^0.1.8", + "@uni-helper/uni-types": "^1.0.0-alpha.6", + "@uni-helper/vite-plugin-uni-components": "0.2.0", + "@uni-helper/vite-plugin-uni-layouts": "0.1.11", + "@uni-helper/vite-plugin-uni-manifest": "^0.2.8", + "@uni-helper/vite-plugin-uni-platform": "^0.0.5", + + "@types/node": "^20.17.9", + "@vitejs/plugin-vue": "^6.0.1", + "@vue/tsconfig": "^0.8.1", + "typescript": "~5.8.3", + "vite": "^7.1.7", + "vue-tsc": "^3.0.7", + "sass": "1.77.8", + "postcss": "^8.4.49", + "postcss-html": "^1.8.0", + "postcss-scss": "^4.0.9" + } +} diff --git a/code/base-project/base-uniapp/public/vite.svg b/code/base-project/base-uniapp/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/code/base-project/base-uniapp/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/base-project/base-uniapp/src/App.vue b/code/base-project/base-uniapp/src/App.vue new file mode 100644 index 00000000..58b0f21b --- /dev/null +++ b/code/base-project/base-uniapp/src/App.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/code/base-project/base-uniapp/src/assets/vue.svg b/code/base-project/base-uniapp/src/assets/vue.svg new file mode 100644 index 00000000..770e9d33 --- /dev/null +++ b/code/base-project/base-uniapp/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/base-project/base-uniapp/src/components/HelloWorld.vue b/code/base-project/base-uniapp/src/components/HelloWorld.vue new file mode 100644 index 00000000..b58e52b9 --- /dev/null +++ b/code/base-project/base-uniapp/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/code/base-project/base-uniapp/src/main.ts b/code/base-project/base-uniapp/src/main.ts new file mode 100644 index 00000000..2425c0f7 --- /dev/null +++ b/code/base-project/base-uniapp/src/main.ts @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/code/base-project/base-uniapp/src/style.css b/code/base-project/base-uniapp/src/style.css new file mode 100644 index 00000000..f6913154 --- /dev/null +++ b/code/base-project/base-uniapp/src/style.css @@ -0,0 +1,79 @@ +:root { + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/code/base-project/base-uniapp/src/vite-env.d.ts b/code/base-project/base-uniapp/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/code/base-project/base-uniapp/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/code/base-project/base-uniapp/tsconfig.json b/code/base-project/base-uniapp/tsconfig.json new file mode 100644 index 00000000..b119cc89 --- /dev/null +++ b/code/base-project/base-uniapp/tsconfig.json @@ -0,0 +1,36 @@ +{ + "compilerOptions": { + "composite": true, + "lib": ["esnext", "dom"], + "baseUrl": ".", + "module": "ESNext", + "moduleResolution": "Node", + "paths": { + "@/*": ["./src/*"], + }, + "resolveJsonModule": true, + "types": [ + + ], + "allowJs": true, + "noImplicitThis": true, + "outDir": "dist", + "sourceMap": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true + }, + "vueCompilerOptions": { + "plugins": ["@uni-helper/uni-types/volar-plugin"] + }, + "include": [ + "package.json", + "src/**/*.ts", + "src/**/*.js", + "src/**/*.d.ts", + "src/**/*.tsx", + "src/**/*.jsx", + "src/**/*.vue", + "src/**/*.json" + ], + "exclude": ["node_modules", "dist"] +} diff --git a/code/base-project/base-uniapp/vite.config.ts b/code/base-project/base-uniapp/vite.config.ts new file mode 100644 index 00000000..bbcf80cc --- /dev/null +++ b/code/base-project/base-uniapp/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [vue()], +}) diff --git a/code/base-project/base-vue/packages/ao-design/src/collapse/collapse-group.tsx b/code/base-project/base-vue/packages/ao-design/src/collapse/collapse-group.tsx new file mode 100644 index 00000000..2e1e4e96 --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/collapse/collapse-group.tsx @@ -0,0 +1,129 @@ +import type { PropType, VNode } from 'vue' +import { defineComponent, provide, reactive, ref, watch } from 'vue' +import { getPrefixCls } from '../_utils/getPrefixCls' +import { collapseGroupKey } from './context' + +export default defineComponent({ + name: 'collapse', + props: { + activeKey: { + type: [String, Number, Boolean, Array] as PropType< + string | number | boolean | (string | number | boolean)[] + >, + default: undefined, + }, + defaultActiveKey: { + type: [String, Number, Boolean, Array] as PropType< + string | number | boolean | (string | number | boolean)[] + >, + default: undefined, + }, + borderLess: { + type: Boolean, + default: true, + }, + defaultExpandAll: { + type: Boolean, + default: true, + }, + disabled: { + type: Boolean, + default: false, + }, + accordion: { + type: Boolean, + default: true, + }, + expandIcon: { + type: [Boolean, String, Object, Function] as PropType< + boolean | string | VNode | ((args: { expanded: boolean }) => VNode) + >, + default: true, + }, + expandIconPlacement: { + type: String as PropType<'left' | 'right'>, + default: 'left', + }, + destroyOnHide: { + type: Boolean, + default: false, + }, + class: { + type: [String, Array, Object], + default: '', + }, + style: { + type: Object, + default: () => ({}), + }, + }, + emits: ['update:activeKey', 'change'], + setup(props, { slots, emit }) { + const prefixCls = getPrefixCls('collapse-group') + + const _activeKey = ref(props.activeKey ?? props.defaultActiveKey ?? (!props.accordion ? [] : undefined)) + + watch( + () => props.activeKey, + (newVal) => { + _activeKey.value = newVal ?? (!props.accordion ? [] : undefined) + }, + ) + + const handleChange = (val: string | number | boolean, e: Event) => { + // 外部 v-model 类型决定内部 value 的类型 + const isArrayMode = Array.isArray(_activeKey.value) + if (isArrayMode) { + const arr = [...(_activeKey.value as (string | number | boolean)[])] + const idx = arr.indexOf(val) + if (idx >= 0) { + arr.splice(idx, 1) + } + else { + if (props.accordion) + arr.length = 0 // 单选时只保留最后一个 + arr.push(val) + } + _activeKey.value = arr + emit('update:activeKey', arr) + emit('change', arr, e) + } + else { + // 非数组模式：单选或多选时非数组 v-model + const newVal = _activeKey.value === val ? undefined : val + _activeKey.value = newVal + emit('update:activeKey', newVal) + emit('change', newVal, e) + } + } + + provide( + collapseGroupKey, + reactive({ + name: 'AoCollapseGroup' as const, + activeKey: _activeKey, + disabled: props.disabled, + defaultExpandAll: props.defaultExpandAll, + expandIcon: props.expandIcon, + expandIconPlacement: props.expandIconPlacement, + destroyOnHide: props.destroyOnHide, + borderLess: props.borderLess, + slots, + handleChange, + }), + ) + + return () => ( +
+ { slots.default?.()} +
+ ) + }, +}) diff --git a/code/base-project/base-vue/packages/ao-design/src/collapse/collapse.tsx b/code/base-project/base-vue/packages/ao-design/src/collapse/collapse.tsx new file mode 100644 index 00000000..42cd6921 --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/collapse/collapse.tsx @@ -0,0 +1,258 @@ +import type { PropType, TransitionProps, VNode } from 'vue' +import type { CollapseGroupContext } from './context' +import { computed, defineComponent, inject, ref, Transition, watch } from 'vue' +import { getPrefixCls } from '../_utils/getPrefixCls' +import Icon from '../icon/index' + +import { collapseGroupKey } from './context' + +export default defineComponent({ + name: 'CollapseItem', + props: { + expanded: { + type: Boolean, + default: undefined, + }, + defaultExpanded: { + type: Boolean, + default: false, + }, + value: { + type: [String, Number, Boolean] as PropType, + required: true, + }, + disabled: { + type: Boolean, + default: false, + }, + modelValue: { + type: Boolean, + default: undefined, + }, + expandIcon: { + type: [Boolean, String, Object, Function] as PropType< + boolean | string | VNode | ((args: { expanded: boolean }) => VNode) + >, + default: true, + }, + expandIconPlacement: { + type: String as PropType<'left' | 'right'>, + }, + title: { + type: [String, Object, Function] as PropType VNode)>, + default: '', + }, + destroyOnHide: { + type: Boolean, + default: false, + }, + headerRightContent: { + type: [String, Object, Function] as PropType VNode)>, + }, + borderLess: { + type: Boolean, + default: undefined, + }, + class: { + type: [String, Array, Object], + default: '', + }, + style: { + type: Object, + default: () => ({}), + }, + }, + emits: ['change', 'update:modelValue', 'update:expanded'], + setup(props, { slots, emit }) { + const prefixCls = getPrefixCls('collapse') + + const collapseGroupCtx = inject(collapseGroupKey, undefined) + + const _expanded = ref(props.defaultExpanded) + + const inGroup = computed(() => !!collapseGroupCtx) + const isDisabled = computed(() => props.disabled || collapseGroupCtx?.disabled) + const isExpanded = computed(() => { + if (inGroup.value && collapseGroupCtx) { + const groupValue = collapseGroupCtx.activeKey + if (Array.isArray(groupValue)) { + return groupValue.includes(props.value) + } + return groupValue === props.value + } + return props.expanded ?? props.modelValue ?? _expanded.value + }) + const isDestroyOnHide = computed(() => props.destroyOnHide || collapseGroupCtx?.destroyOnHide) + const isBorderLess = computed(() => props.borderLess || collapseGroupCtx?.borderLess) + + const isMounted = ref(isDestroyOnHide.value ? isExpanded.value : true) + + watch(isExpanded, (isExpanded) => { + if (isExpanded && !isMounted.value) { + isMounted.value = true + } + }) + + const handleChange = (event: MouseEvent) => { + if (isDisabled.value) + return + + if (inGroup.value && collapseGroupCtx) { + collapseGroupCtx.handleChange(props.value, event) + } + else { + const newChecked = !isExpanded.value + if (props.expanded === undefined) + _expanded.value = newChecked + + emit('update:modelValue', newChecked) + emit('update:expanded', newChecked) + } + + emit('change', { value: props.value, event }) + } + + watch(() => props.expanded, (val) => { + if (val !== undefined) { + _expanded.value = val + } + }) + + const renderTitle = () => { + const content = slots.title ? slots.title() : (typeof props.title === 'function' ? props.title() : props.title) + + return
{content}
+ } + + const mergedExpandIcon = computed(() => { + if (props.expandIcon !== undefined) + return props.expandIcon + if (collapseGroupCtx?.expandIcon !== undefined) + return collapseGroupCtx.expandIcon + return true // 默认值 + }) + + const mergedExpandIconPlacement = computed<'left' | 'right'>(() => { + if (props.expandIconPlacement) + return props.expandIconPlacement + if (collapseGroupCtx?.expandIconPlacement) + return collapseGroupCtx.expandIconPlacement + return 'left' + }) + + const renderExpandIcon = () => { + const iconProp = mergedExpandIcon.value + const placement = mergedExpandIconPlacement.value + + // 插槽优先 + if (slots.expandIcon) { + return slots.expandIcon({ expanded: isExpanded.value }) + } + + if (typeof iconProp === 'boolean') { + if (!iconProp) + return null + return ( + + ) + } + + if (typeof iconProp === 'string') { + return ( + + ) + } + + if (typeof iconProp === 'function') { + return iconProp({ expanded: isExpanded.value }) + } + + return iconProp // VNode + } + + const renderHeaderRight = () => { + if (slots.headerRightContent) + return slots.headerRightContent() + const content = props.headerRightContent + return typeof content === 'function' ? content() : content + } + + const transitionEvents: TransitionProps = { + onEnter: (el: Element) => { + (el as HTMLDivElement).style.height = `${el.scrollHeight}px` + }, + onAfterEnter: (el: Element) => { + (el as HTMLDivElement).style.height = 'auto' + }, + onBeforeLeave: (el: Element) => { + (el as HTMLDivElement).style.height = `${el.scrollHeight}px` + }, + onLeave: (el: Element) => { + (el as HTMLDivElement).style.height = '0' + }, + onAfterLeave: () => { + if (isDestroyOnHide.value) { + isMounted.value = false + } + }, + } + + return () => { + const iconVNode = renderExpandIcon() + const titleVNode = renderTitle() + const headerRight = renderHeaderRight() + return ( +
+
+ {mergedExpandIconPlacement.value === 'left' + ? ( + <> + {iconVNode} + {titleVNode} + {headerRight} + + ) + : ( + <> + {titleVNode} + {headerRight} + {iconVNode} + + )} +
+ +
+ {isMounted.value && ( +
+ {slots.default?.()} +
+ )} +
+ + +
+ ) + } + }, +}) diff --git a/code/base-project/base-vue/packages/ao-design/src/collapse/context.ts b/code/base-project/base-vue/packages/ao-design/src/collapse/context.ts new file mode 100644 index 00000000..65502953 --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/collapse/context.ts @@ -0,0 +1,15 @@ +import type { InjectionKey, VNode } from 'vue' + +export interface CollapseGroupContext { + name: 'AoCollapseGroup' + activeKey: string | number | boolean | (string | number | boolean)[] | undefined + defaultExpandAll: boolean + disabled: boolean + expandIcon: boolean | string | VNode | ((args: { expanded: boolean }) => VNode) + expandIconPlacement: 'left' | 'right' + destroyOnHide: boolean + borderLess: boolean + handleChange: (value: string | number | boolean, e: Event) => void +} + +export const collapseGroupKey: InjectionKey = Symbol('CollapseGroup') diff --git a/code/base-project/base-vue/packages/ao-design/src/collapse/demo.vue b/code/base-project/base-vue/packages/ao-design/src/collapse/demo.vue new file mode 100644 index 00000000..f8dbabf5 --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/collapse/demo.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/code/base-project/base-vue/packages/ao-design/src/collapse/index.scss b/code/base-project/base-vue/packages/ao-design/src/collapse/index.scss index bb4a8249..e50ab128 100644 --- a/code/base-project/base-vue/packages/ao-design/src/collapse/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/collapse/index.scss @@ -2,18 +2,96 @@ @use 'sass:color'; $collapse-prefix: '#{$prefix}-collapse'; +$collapse-group-prefix: '#{$prefix}-collapse-group'; -.#{$collapse-prefix} { +.#{$collapse-group-prefix} { font-size: 14px; color: $text-color-base; box-sizing: border-box; margin: 0; padding: 0; list-style: none; - border: solid 1px $border-color; + border: solid 1px $border-color-component; border-bottom: 0; background: $bg-color-container; - - .#{$collapse-prefix}-panel { + &.#{$collapse-group-prefix}-border-less { + border: none; } } + +.#{$collapse-prefix} { + overflow: hidden; + + &.#{$collapse-prefix}-border-less { + border: none; + .#{$collapse-prefix}-header { + border-bottom: none; + } + .#{$collapse-prefix}-body { + background-color: $bg-color-container; + border-bottom: none; + } + } + + &.#{$collapse-prefix}-disabled { + .#{$collapse-prefix}-header { + cursor: not-allowed; + color: $text-color-disabled; + } + .#{$collapse-prefix}-body .#{$collapse-prefix}-content { + color: $text-color-disabled; + } + } + + .#{$collapse-prefix}-header { + padding: 12px 16px; + border-bottom: solid 1px $border-color-component; + font-size: 14px; + font-weight: 600; + display: flex; + align-items: center; + cursor: pointer; + .#{$collapse-prefix}-icon { + transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); + display: flex; + align-items: center; + justify-content: center; + + &.#{$collapse-prefix}-icon-left { + margin-right: 8px; + } + &.#{$collapse-prefix}-icon-right { + margin-left: 8px; + } + + &.#{$collapse-prefix}-icon-expanded { + } + &.#{$collapse-prefix}-icon-collapsed { + transform: rotate(-90deg); + } + } + .#{$collapse-prefix}-title { + flex: 1; + } + } + + .#{$collapse-prefix}-body { + border-bottom: solid 1px $border-color; + background: $bg-color-secondarycomponent; + overflow: inherit; + .#{$collapse-prefix}-content { + padding: 12px 16px 12px 40px; + color: $text-color-secondary; + } + } +} + +.collapse-slider-enter-from, +.collapse-slider-leave-to { + height: 0; +} + +.collapse-slider-enter-active, +.collapse-slider-leave-active { + transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); +} diff --git a/code/base-project/base-vue/packages/ao-design/src/components.ts b/code/base-project/base-vue/packages/ao-design/src/components.ts index c410abd0..9e95516d 100644 --- a/code/base-project/base-vue/packages/ao-design/src/components.ts +++ b/code/base-project/base-vue/packages/ao-design/src/components.ts @@ -4,7 +4,8 @@ export { default as Button } from './button' export { default as Card } from './card' export { default as Checkbox } from './checkbox/checkbox' export { default as CheckboxGroup } from './checkbox/checkbox-group' -export { default as Collapse } from './collapse' +export { default as Collapse } from './collapse/collapse' +export { default as CollapseGroup } from './collapse/collapse-group' export { default as Drawer } from './drawer' export { default as Group } from './group' export { default as Icon } from './icon' diff --git a/code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions-group.tsx b/code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions-group.tsx new file mode 100644 index 00000000..3e0cb57f --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions-group.tsx @@ -0,0 +1,25 @@ +import { defineComponent } from 'vue' +import { getPrefixCls } from '../_utils/getPrefixCls' + +export default defineComponent({ + name: 'DescriptionsGroup', + props: { + class: { + type: [String, Array, Object], + default: '', + }, + style: { + type: Object, + default: () => ({}), + }, + }, + emits: [], + setup(props, { slots, emit }) { + const prefixCls = getPrefixCls('descriptions-group') + return () => ( +
+ {slots.default?.()} +
+ ) + }, +}) diff --git a/code/base-project/base-vue/packages/ao-design/src/collapse/index.tsx b/code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions.tsx similarity index 86% rename from code/base-project/base-vue/packages/ao-design/src/collapse/index.tsx rename to code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions.tsx index 0fc2ec9e..9be17fe7 100644 --- a/code/base-project/base-vue/packages/ao-design/src/collapse/index.tsx +++ b/code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions.tsx @@ -2,7 +2,7 @@ import { defineComponent } from 'vue' import { getPrefixCls } from '../_utils/getPrefixCls' export default defineComponent({ - name: 'Collapse', + name: 'Descriptions', props: { class: { type: [String, Array, Object], @@ -15,7 +15,7 @@ export default defineComponent({ }, emits: [], setup(props, { slots, emit }) { - const prefixCls = getPrefixCls('collapse') + const prefixCls = getPrefixCls('descriptions') return () => (
{slots.default?.()} diff --git a/code/base-project/base-vue/packages/ao-design/src/descriptions/index.scss b/code/base-project/base-vue/packages/ao-design/src/descriptions/index.scss new file mode 100644 index 00000000..9ea737ca --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/descriptions/index.scss @@ -0,0 +1,7 @@ +@use '../_styles/_variables.scss' as *; +@use 'sass:color'; + +$descriptions-prefix: '#{$prefix}-descriptions'; + +.#{$descriptions-prefix} { +} \ No newline at end of file diff --git a/code/base-project/base-vue/packages/ao-design/src/tag/context.ts b/code/base-project/base-vue/packages/ao-design/src/tag/context.ts index 724a572a..50c85cc2 100644 --- a/code/base-project/base-vue/packages/ao-design/src/tag/context.ts +++ b/code/base-project/base-vue/packages/ao-design/src/tag/context.ts @@ -6,7 +6,6 @@ export interface TagGroupContext { disabled: boolean checkable: boolean slots: Slots - multiple: boolean handleChange: (value: string | number | boolean, e: Event) => void } diff --git a/code/base-project/base-vue/packages/ao-design/src/tag/tag-group.tsx b/code/base-project/base-vue/packages/ao-design/src/tag/tag-group.tsx index 0749bdd7..1a9bc2b6 100644 --- a/code/base-project/base-vue/packages/ao-design/src/tag/tag-group.tsx +++ b/code/base-project/base-vue/packages/ao-design/src/tag/tag-group.tsx @@ -91,7 +91,6 @@ export default defineComponent({ disabled: groupDisabled, slots, checkable: true, - multiple: props.multiple, handleChange, }), ) diff --git a/code/base-project/base-vue/src/App.vue b/code/base-project/base-vue/src/App.vue index a2004fc1..33e9e510 100644 --- a/code/base-project/base-vue/src/App.vue +++ b/code/base-project/base-vue/src/App.vue @@ -1,48 +1,17 @@ diff --git a/code/base-project/base-vue/src/components.d.ts b/code/base-project/base-vue/src/components.d.ts index 404b8a35..cbe446a3 100644 --- a/code/base-project/base-vue/src/components.d.ts +++ b/code/base-project/base-vue/src/components.d.ts @@ -13,6 +13,8 @@ declare module 'vue' { ACard: typeof import('@ao/ao-design')['Card'] ACheckbox: typeof import('@ao/ao-design')['Checkbox'] ACheckboxGroup: typeof import('@ao/ao-design')['CheckboxGroup'] + ACollapse: typeof import('@ao/ao-design')['Collapse'] + ACollapseGroup: typeof import('@ao/ao-design')['CollapseGroup'] AConfigProvider: typeof import('@ao/ao-design')['ConfigProvider'] ADrawer: typeof import('@ao/ao-design')['Drawer'] AGroup: typeof import('@ao/ao-design')['Group']