From 8eee9def72d627d0b52c4e23bcb4e5d174eb659a Mon Sep 17 00:00:00 2001 From: zq <136432190602163.com> Date: Fri, 19 Dec 2025 16:21:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E3=80=81=E9=97=B4=E9=9A=94=E8=B7=9D=E7=A6=BB?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/theme/common.scss | 10 ++++++++++ src/views/elementGroups.vue | 1 + 2 files changed, 11 insertions(+) diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss index 05bee70..39391f5 100644 --- a/src/style/theme/common.scss +++ b/src/style/theme/common.scss @@ -101,6 +101,16 @@ body { gap: 12px; } +.gap20{ + display: flex; + gap: 20px; +} +.gap24{ + display: flex; + gap: 24px; +} + + .mt16 { margin-top: 16px; } diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue index 7471270..f4093a6 100644 --- a/src/views/elementGroups.vue +++ b/src/views/elementGroups.vue @@ -339,6 +339,7 @@ 强引导 弱引导 + 警示
From c0d3567a8051ad6c8ff753ba0c52ac1174ec3e77 Mon Sep 17 00:00:00 2001 From: zq <136432190602163.com> Date: Mon, 22 Dec 2025 18:25:05 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BE=A7=E8=BE=B9=E6=A0=8F=E3=80=81=E6=95=B4?= =?UTF-8?q?=E5=90=88=E5=90=8C=E7=B1=BB=E5=9E=8B=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.js | 5 + src/store/index.js | 101 ++++++ src/views/elementGroups.vue | 786 ++++++++++++++++++++++++-------------------- 3 files changed, 529 insertions(+), 363 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 7c90cd6..34dd576 100755 --- a/src/router/index.js +++ b/src/router/index.js @@ -642,6 +642,11 @@ router.beforeEach((to, from, next) => { store.commit('SET_SLIDER_MENU', 'rankMenuData'); } + if (to.path == '/ui') { //匹配包含此路径的 侧边栏数据 + store.commit('SET_CUSTOMIZE', true); + store.commit('SET_SLIDER_MENU', 'uiSliderData'); + } + if (to.path.includes('/super/paiban/')) { //匹配包含此路径的 侧边栏数据 store.commit('SET_SIDEBAR', false); } diff --git a/src/store/index.js b/src/store/index.js index d7beab7..a448347 100755 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,6 +24,107 @@ export default new Vuex.Store({ carryParam: true, //携带参数 componentsName: '', currentMenuItem: null, + uiSliderData: [ + { + name: 'UI组件库示例', + path: '/ui', + img: 'site/pay_trade.svg', + imgActive: require('@/assets/site/sitebase_active.svg'), + list: [{ + name: '输入&下拉组合', + desc: 'example1', + }, + { + name: '提示框', + desc: 'example2', + }, + { + name: '实时预览外层', + desc: 'example3', + }, + { + name: '状态标签', + desc: 'example4', + }, + { + name: '卡片&选中样式', + desc: 'example5', + }, + { + name: 'copy固定内容', + desc: 'example6', + }, + { + name: '手动copy', + desc: 'example7', + }, + { + name: '单选框{}+[]', + desc: 'example8', + }, + { + name: '下拉框{}+[]', + desc: 'example9', + }, + { + name: '表格', + desc: 'example10' + }, + { + name: '文本域相关', + desc: 'example11' + }, + { + name: '输入框相关', + desc: 'example12' + }, + { + name: '间隔表单', + desc: 'example13' + }, + { + name: '按钮', + desc: 'example14' + }, + { + name: '提示(自消版)', + desc: 'example15' + }, + { + name: '表单常见布局', + desc: 'example16' + }, + { + name: '开关集合', + desc: 'example17' + }, + { + name: 'input+drop', + desc: 'example18' + }, + { + name: '自定义消息位置', + desc: 'example19' + }, + { + name: '弹出框', + desc: 'example20' + }, + { + name: '加载动画', + desc: 'example21' + }, + { + name: 'tooltip提示', + desc: 'example22' + }, + { + name: '说明文档', + desc: 'example50' + } + ] + } + ],//整理的组件或者样式页面 slidermenu: [], // 第二种侧边栏--单项可跳转 rankMenuData: [{ diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue index f4093a6..6cfa05e 100644 --- a/src/views/elementGroups.vue +++ b/src/views/elementGroups.vue @@ -1,33 +1,41 @@
-
+
状态标签
状态标签
@@ -49,7 +57,7 @@
状态标签
状态标签
-
+
@@ -65,59 +73,69 @@ -
- - - 复制渝过田晴 - - - 点击复制: {{ content }} -
-
- - - - - - - -
-
- - +
+
+ + + 复制渝过田晴 + + + 点击复制: {{ content }} +
-
- - +
+
+ + + + + + + +
+
+
+ + +
+
+ + +
+
--------------------分割线------------------------------
-
- - -
- -

j卢卡斯就到啦

- -
-
- - -
-
- - +
+
+ + +
+ +

j卢卡斯就到啦

+ +
+
+
+ + +
+
+ + +
+ Submit -
+

表格：(表头自定义、自定义渲染、固定列)

全选按钮 -
-
-

表格(带气泡框),内容自定义：

- 点击一下跳转参照页面 - - +
+

表格(带气泡框),内容自定义：

+ 点击一下跳转参照页面 + + +
-
- - -
-
- - -
-
- - +
+
+ + +
+
+ + +
+
+ + +
+
--------------------分割线------------------------------
-
+ +
@@ -267,7 +289,7 @@
-
+
@@ -285,220 +307,274 @@ @change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true" value-key="id" />
- -
-
- - 选项一 - 选项二 +
--------------------分割线------------------------------
+
+
+ + 选项一 + 选项二 +
-
- - - 备选项 - 备选项 - 备选项 - -
-
- - 加盟并进入后台 - 准备完毕，验证自有域名 - 下一步 - 保存 - 新增站点 - 前往添加 -
-
- - - 默认 - 按钮 - 按钮 -
-
- - 按钮 - 按钮 - 按钮 -
-
- - 按钮 - 按钮 - 按钮 -
-
- - 按钮 - 按钮 - 按钮 -
-
- - 强引导 - 弱引导 - 警示 -
-
- - - - +
+ + + 备选项 + 备选项 + 备选项 + +
+
--------------------分割线------------------------------
-
- -
创建首个网站
-
- - -
- - 宽高自定义 +
+
+ + 加盟并进入后台 + 准备完毕，验证自有域名 + 下一步 + 保存 + 新增站点 + 前往添加 +
+
+ + + 默认 + 按钮 + 按钮 +
+
+ + 按钮 + 按钮 + 按钮 +
+
+ + 按钮 + 按钮 + 按钮 +
+
+ + 按钮 + 按钮 + 按钮 +
+
+ + 强引导 + 弱引导 + 警示 +
+
+ + + + + +
+
+ +
创建首个网站
+
+
+ + +
+ + + +
+ + 宽高自定义 +
+
--------------------分割线------------------------------
-
+ +
成功提示 失败提示 警告提示 +
--------------------分割线------------------------------
+
+
+

表单左右布局（直接使用封装好的input）

+ + +
-
-

表单左右布局（直接使用封装好的input）

- - -
- -
-

表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)

- +
+

表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)

+ +
+
+

自定义 表单内容

+ + + + + 跳转一下 自定义右侧 + + + + +
+
--------------------分割线------------------------------
-
-

自定义 表单内容

- - - - - 跳转一下 自定义右侧 - - - - +
+
+ + + + + +
+
+ + + + +
+
+ + + + + +

当前值switchValue2：{{ this.form.switchValue2 }}

+
+
--------------------分割线------------------------------
+
-
- - - - - -
-
- - - - -
-
- - - - - -

当前值switchValue2：{{ this.form.switchValue2 }}

-
-
- - -
- - - -
- {{ currentDomainItem.name }}
-
- - - - - - -
-
- - -
- - - -
- {{ currentDomainItem.name }}
-
- - - + + + + + + + + + +
+
+ + - - - -
-
- - - - - +
- -
- --------------------分割线0------------------------------
+
--------------------分割线------------------------------
-
+
@@ -581,29 +623,35 @@ 保存
-->
-
- +
+ 下方弹出消息提示 上方弹出消息提示 一直显示消息提示 - 动态更改提示文案 - 主动隐藏消息提示 + 动态更改提示文案 + +
+ +
+ 打开弹框（标题巨左、按钮居右） 打开弹框（标题巨中、按钮居中） 打开弹框-放弃原按钮，自定义 +
+
+ 展示加载动画 2s -
-
+
悬停查看提示 @@ -625,6 +673,10 @@
+ + @@ -679,6 +731,7 @@ import SvgIcon from '@/components/SvgIcon.vue'; import PromptText from "@/components/PromptText.vue"; import DevicePreview from "@/components/PreviewTab.vue"; import domainBind from "@/components/domainBind.vue"; +import GroupFormBtns from '@/components/GroupFormBtns.vue'; export default { @@ -699,7 +752,8 @@ export default { SvgIcon, GuipFormItem, DevicePreview, - CustomDropdown + CustomDropdown, + GroupFormBtns }, data() { return { @@ -1248,8 +1302,6 @@ export default { target: this.$refs[el], // 可以是DOM元素或选择器 position: pos // 或 'bottom' }) // 3秒后自动隐藏（可选） - - console.log(this.tooltip,'tooltip',el,pos); }, @@ -1399,6 +1451,14 @@ export default { }