themeColorPicker.B3974X6v.js 3.7 KB

1234
  1. /*!
  2. Build based on gin-vue-admin
  3. Time : 1757946830000 */
  4. import{_ as e,a,U as r,g as o,c as l,o as d,b as s,F as t,I as n,f as c,a0 as g,C as i,n as m,d as b,w as u,v as y,au as x}from"./index.DlqNVRUO.js";const f={class:"font-inter"},p={class:"bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 shadow-sm"},k={class:"mb-8"},v={class:"grid grid-cols-3 gap-4"},h=["onClick"],w={key:0,class:"absolute inset-0 flex items-center justify-center text-white text-base",style:{"text-shadow":"0 1px 2px rgba(0, 0, 0, 0.3)"}},V={class:"min-w-0 flex-1"},C={class:"block text-sm font-semibold text-gray-900 dark:text-white"},_={class:"flex items-center justify-between p-5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl mb-6 shadow-sm"},j={class:"bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl p-5 shadow-sm"},E={class:"flex items-center justify-between"},I={class:"flex items-center gap-3"},P={class:"text-sm font-mono bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-500"},U=e(Object.assign({name:"ThemeColorPicker"},{__name:"themeColorPicker",props:{modelValue:{type:String,default:"#3b82f6"}},emits:["update:modelValue"],setup(e,{emit:U}){const z=e,F=U,O=a(z.modelValue),S=[{color:"#4E80EE",name:"默认"},{color:"#8bb5d1",name:"晨雾蓝"},{color:"#a8c8a8",name:"薄荷绿"},{color:"#d4a5a5",name:"玫瑰粉"},{color:"#c8a8d8",name:"薰衣草"},{color:"#f0c674",name:"暖阳黄"},{color:"#b8b8b8",name:"月光银"},{color:"#d8a8a8",name:"珊瑚橙"},{color:"#a8d8d8",name:"海雾青"},{color:"#c8c8a8",name:"橄榄绿"},{color:"#d8c8a8",name:"奶茶棕"},{color:"#a8a8d8",name:"梦幻紫"},{color:"#c8d8a8",name:"抹茶绿"}],T=e=>{e&&F("update:modelValue",e)};return r(()=>z.modelValue,e=>{O.value=e}),(a,r)=>{const U=o("el-icon"),z=o("el-color-picker");return d(),l("div",f,[s("div",p,[s("div",k,[r[1]||(r[1]=s("p",{class:"text-base font-semibold text-gray-700 dark:text-gray-300 mb-5"},"精选色彩",-1)),s("div",v,[(d(),l(t,null,n(S,a=>s("div",{key:a.color,class:m(["flex items-center gap-4 p-4 bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer transition-all duration-150 ease-in-out hover:transform hover:-translate-y-1 hover:shadow-lg",{"ring-2 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-800 transform -translate-y-1 shadow-lg":e.modelValue===a.color}]),style:g(e.modelValue===a.color?{borderColor:a.color,ringColor:a.color+"40"}:{}),onClick:e=>{return r=a.color,O.value=r,void F("update:modelValue",r);var r}},[s("div",{class:"relative w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-500 flex-shrink-0 shadow-sm",style:g({backgroundColor:a.color})},[e.modelValue===a.color?(d(),l("div",w,[c(U,null,{default:u(()=>[c(y(x))]),_:1})])):b("",!0)],4),s("div",V,[s("span",C,i(a.name),1)])],14,h)),64))])]),s("div",_,[r[2]||(r[2]=s("div",{class:"flex-1"},[s("h4",{class:"text-base font-semibold text-gray-900 dark:text-white"},"自定义颜色"),s("p",{class:"text-sm text-gray-500 dark:text-gray-400 mt-1"},"选择任意颜色作为主题色")],-1)),c(z,{modelValue:O.value,"onUpdate:modelValue":r[0]||(r[0]=e=>O.value=e),size:"large",predefine:S.map(e=>e.color),onChange:T,class:"custom-color-picker"},null,8,["modelValue","predefine"])]),s("div",j,[s("div",E,[r[3]||(r[3]=s("span",{class:"text-base font-semibold text-gray-700 dark:text-gray-300"},"当前主题色",-1)),s("div",I,[s("div",{class:"w-6 h-6 rounded-lg border border-gray-300 dark:border-gray-500 shadow-sm",style:g({backgroundColor:e.modelValue})},null,4),s("code",P,i(e.modelValue),1)])])])])])}}}),[["__scopeId","data-v-3e46e213"]]);export{U as default};