【底座】底座开放改动跟部分组件升级

snowy-admin-web/src/components/ColorPicker/README.md

@@ -0,0 +1,193 @@
+# ColorPicker 颜色选择器
+
+基于 vue3-colorpicker 封装的颜色选择器组件，支持纯色、渐变色选择，并提供智能文字颜色适配功能。
+
+## 功能特性
+
+- 🎨 支持纯色、渐变色、混合模式选择
+- 🔧 多种颜色格式支持（hex、rgb）
+- 🎯 圆形/方形选择器形状
+- 📍 颜色值显示位置可配置（内联/底部）
+- 🎭 智能文字颜色适配（根据背景色自动调整文字颜色）
+- 🚫 可选择禁用透明度通道
+
+## 安装依赖
+
+```bash
+npm install vue3-colorpicker
+```
+
+## 基础用法
+
+```vue
+<template>
+  <ColorPicker v-model:value="color" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+const color = ref('#1677FF')
+</script>
+```
+
+## 属性配置
+
+| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
+|--------|------|--------|--------|------|
+| `value` | String | `'#1677FF'` | - | 颜色值，支持双向绑定 |
+| `useType` | String | `'pure'` | `'pure'` \| `'gradient'` \| `'both'` | 颜色选择类型 |
+| `valuePosition` | String | `'inline'` | `'inline'` \| `'bottom'` | 颜色值显示位置 |
+| `format` | String | `'hex'` | `'hex'` \| `'rgb'` | 颜色格式 |
+| `shape` | String | `'square'` | `'circle'` \| `'square'` | 选择器形状 |
+| `disableAlpha` | Boolean | `true` | `true` \| `false` | 是否禁用透明度通道 |
+
+## 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `update:value` | `(value: string)` | 颜色值变化时触发，统一处理纯色和渐变色 |
+
+## 使用示例
+
+### 基础纯色选择器
+
+```vue
+<template>
+  <ColorPicker 
+    v-model:value="pureColor" 
+    useType="pure"
+    format="hex"
+    shape="square"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+const pureColor = ref('#FF5722')
+</script>
+```
+
+### 渐变色选择器
+
+```vue
+<template>
+  <ColorPicker 
+    v-model:value="gradientColor" 
+    useType="gradient"
+    @update:value="handleColorChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+const gradientColor = ref('linear-gradient(90deg, #FF5722 0%, #2196F3 100%)')
+
+const handleColorChange = (value) => {
+  console.log('颜色变化:', value)
+}
+</script>
+```
+
+### 混合模式（纯色+渐变）
+
+```vue
+<template>
+  <ColorPicker 
+    v-model:value="mixedColor" 
+    useType="both"
+    valuePosition="bottom"
+    @update:value="handleColorChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+const mixedColor = ref('#9C27B0')
+
+const handleColorChange = (value) => {
+  console.log('颜色变化:', value)
+  // 根据 useType 配置，这里可能接收到纯色值或渐变色值
+  // 组件会根据用户的选择自动返回对应类型的颜色值
+}
+</script>
+```
+
+### 圆形选择器 + RGB 格式
+
+```vue
+<template>
+  <ColorPicker 
+    v-model:value="rgbColor" 
+    format="rgb"
+    shape="circle"
+    :disableAlpha="false"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+const rgbColor = ref('rgb(33, 150, 243)')
+</script>
+```
+
+## 高级功能
+
+### 智能文字颜色适配
+
+组件会根据选择的背景色自动调整文字颜色，确保文字在任何背景下都有良好的可读性：
+
+- 浅色背景：使用黑色文字
+- 深色背景：使用白色文字
+- 渐变色背景：使用白色文字
+
+### 颜色值显示位置
+
+- `inline`：颜色值显示在选择器内部
+- `bottom`：颜色值显示在选择器底部
+
+## 样式定制
+
+组件提供了以下 CSS 类名供样式定制：
+
+```less
+.snowy-color-picker {
+  width: 100%;
+  
+  .vc-color-wrap {
+    width: 100%;
+  }
+  
+  .current-color {
+    padding: 0 10px;
+  }
+  
+  .remark {
+    font-size: 12px;
+    color: #6c6c6c;
+    padding: 0 2px;
+  }
+}
+```
+
+## 注意事项
+
+1. 组件基于 `vue3-colorpicker` 库，请确保已正确安装依赖
+2. 渐变色功能仅在 `useType` 为 `'gradient'` 或 `'both'` 时可用
+3. 组件会自动生成唯一 ID，避免多个实例冲突
+4. 智能文字颜色适配功能依赖于 `@/utils/color` 工具函数
+
+## 依赖
+
+- `vue3-colorpicker`: 核心颜色选择器库
+- `@/utils/tool`: 工具函数（UUID 生成）
+- `@/utils/color`: 颜色处理工具函数

snowy-admin-web/src/components/ColorPicker/index.vue

@@ -5,8 +5,10 @@
 			:format="props.format"
 			:shape="props.shape"
 			:disable-alpha="props.disableAlpha"
+			:useType="props.useType"
 			:pureColor="props.value"
 			@update:pureColor="update"
+			@update:gradientColor="updateGradient"
 		/>
 		<div class="remark"></div>
 	</div>
@@ -23,6 +25,13 @@
 			type: String,
 			default: '#1677FF'
 		},
+		useType: {
+			type: String,
+			default: 'pure',
+			validator: (val) => {
+				return ['pure', 'gradient', 'both'].includes(val)
+			}
+		},
 		valuePosition: {
 			type: String,
 			default: 'inline',
@@ -57,6 +66,13 @@
 		showTxt(val)
 		emit('update:value', val)
 	}
+
+	const updateGradient = (val) => {
+		if (props.useType === 'both' || props.useType === 'gradient') {
+			showTxt(val)
+			emit('update:value', val)
+		}
+	}
 	onMounted(() => {
 		showTxt(props.value)
 	})
@@ -69,14 +85,29 @@
 				// 根据背景色 适配 文字颜色
 				let rgb
 				const backgroundColor = currentColor.style.backgroundColor
-				if (backgroundColor.startsWith('rgba')) {
-					rgb = [0, 0, 0]
-				} else if (backgroundColor.startsWith('rgb')) {
-					rgb = color.hexToRgb(color.rgbToHex(backgroundColor))
-				} else {
-					rgb = color.hexToRgb(backgroundColor)
+				// 检查是否为渐变色
+				if (val && val.includes('gradient')) {
+					// 渐变色使用白色文字
+					rgb = [255, 255, 255]
+					currentColor.style.color = '#fff'
+					return
+				}
+				if (backgroundColor && backgroundColor !== 'initial') {
+					if (backgroundColor.startsWith('rgba')) {
+						rgb = [0, 0, 0]
+					} else if (backgroundColor.startsWith('rgb')) {
+						rgb = color.hexToRgb(color.rgbToHex(backgroundColor))
+					} else if (backgroundColor.startsWith('#')) {
+						rgb = color.hexToRgb(backgroundColor)
+					} else {
+						// 默认使用黑色文字
+						rgb = [0, 0, 0]
+					}
+					currentColor.style.color = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 186 ? '#000' : '#fff'
+				} else {
+					// 默认使用黑色文字
+					currentColor.style.color = '#000'
 				}
-				currentColor.style.color = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 186 ? '#000' : '#fff'
 			}
 		}
 		// 底部：赋值

snowy-admin-web/src/components/XnIconSelector/index.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-	import { ref } from 'vue'
+	import { ref, watch, defineModel } from 'vue'
 	import config from '@/config/iconSelect'
 	import { SearchOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
 
@@ -95,11 +95,14 @@
 	const activeKey = ref(iconData.value[0]?.key || '')
 	const currentCategory = ref('default')
 
+	// 初始化时同步一次，且后续保持与外部 v-model 一致
+	selectedIcon.value = props.value
 	watch(
 		() => props.value,
 		(newVal) => {
 			selectedIcon.value = newVal
-		}
+		},
+		{ immediate: true }
 	)
 
 	const handleOpenChange = (isOpen) => {
@@ -113,6 +116,7 @@
 	}
 
 	const handleIconSelect = (icon) => {
+		selectedIcon.value = icon
 		emit('update:value', icon)
 		formRef.value?.validateFields('icon')
 		visible.value = false

snowy-admin-web/src/main.js

@@ -11,10 +11,10 @@ import './tailwind.css'
 
 const app = createApp(App)
 app.use(createPinia())
-app.use(router)
 app.use(Antd)
 app.use(i18n)
 app.use(snowy)
+app.use(router)
 
 // 挂载app
 app.mount('#app')

snowy-admin-web/src/router/whiteList.js

@@ -21,6 +21,10 @@ const constRouters = [
 	{
 		path: '/callback/:platform'
 	},
+	{
+		// 如果插件要放开前端，那么不需要再添加到白名单，直接用这个，例如/share/dashboard
+		path: '/share/:plugin'
+	},
 	{
 		path: '/other',
 		name: 'other',

snowy-admin-web/src/store/menu.js

@@ -115,7 +115,8 @@ export const useMenuStore = defineStore('menuStore', () => {
 			// 过滤白名单
 			if (
 				whiteList.filter((e) => e.path === route.path).length > 0 ||
-				routesData.filter((e) => e.path === route.path).length > 0
+				routesData.filter((e) => e.path === route.path).length > 0 ||
+				route.meta.routeType === 'plugin'
 			) {
 				return
 			}

snowy-web-app/src/main/java/vip/xiaonuo/core/config/GlobalConfigure.java

@@ -193,6 +193,9 @@ public class GlobalConfigure implements WebMvcConfigurer {
             "/iam/auth/source/render",
             "/iam/auth/source/callback/**",
             "/iam/id/source/eventCallback/**",
+
+            /* 仪表盘放行 */
+            "/dashboard/dashboardList/shareDetail",
     };
 
     /**