@xilonglab/vue-main 1.6.3 → 1.6.6

package/dist/page/setting.vue

@@ -48,7 +48,7 @@ const confirm = async () => {
                 <el-form-item label="请确认" prop="repeatPassword" :error="error.repeatPassword">
                     <xl-input type="password" v-model="data.repeatPassword" placeholder="" style="width:100%"/>
                 </el-form-item>
-                <xl-button type="primary" @click="confirm">确定</xl-button>
+                <xl-button l="确定" type="primary" @click="confirm"/>
             </el-form>
         </div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xilonglab/vue-main",
-  "version": "1.6.3",
+  "version": "1.6.6",
   "description": "xilong vue main",
   "main": "packages/index.js",
   "scripts": {

package/packages/button/XlButton.vue

@@ -1,3 +1,235 @@
+<<<<<<< HEAD
+<script setup>
+defineOptions({ name: "XlButton" })
+
+const props = defineProps({
+    type: {},
+    l: {
+        type: String,
+        default: ''
+    },
+    size: {},
+    disabled: {},
+    loading: {},
+    icon: {},
+    trigger: {
+        type: Function,
+        default: null
+    }
+});
+
+function handleClick(event) {
+    if (props.trigger) {
+        props.trigger();
+    }
+}
+</script>
+
+
+<template>
+    <el-button
+        class="xl-button"
+        :size="size"
+        :type="type"
+        :disabled="disabled"
+        :loading="loading?.value ?? loading ?? false"
+        :icon="icon"
+        @click="handleClick"
+    >
+        <span>{{ l }}</span>
+        <slot />
+    </el-button>
+</template>
+
+
+<style lang="less">
+.xl-button {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 5px;
+  font-weight: 500;
+  
+  // 默认按钮科技感样式
+  &.el-button--default {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 1px solid #dee2e6;
+    color: #495057;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    
+    &:hover {
+      background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+  
+  // 主要按钮科技感样式
+  &.el-button--primary {
+    background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
+    border: 1px solid #409eff;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #337ecc 0%, #2b6cb0 100%);
+      box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+    }
+  }
+  
+  // 成功按钮科技感样式
+  &.el-button--success {
+    background: linear-gradient(135deg, #67c23a 0%, #529b2e 100%);
+    border: 1px solid #67c23a;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #529b2e 0%, #4a7c59 100%);
+      box-shadow: 0 4px 16px rgba(103, 194, 58, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
+    }
+  }
+  
+  // 警告按钮科技感样式
+  &.el-button--warning {
+    background: linear-gradient(135deg, #e6a23c 0%, #d4941e 100%);
+    border: 1px solid #e6a23c;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #d4941e 0%, #b8860b 100%);
+      box-shadow: 0 4px 16px rgba(230, 162, 60, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
+    }
+  }
+  
+  // 危险按钮科技感样式
+  &.el-button--danger {
+    background: linear-gradient(135deg, #f56c6c 0%, #e53e3e 100%);
+    border: 1px solid #f56c6c;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+      box-shadow: 0 4px 16px rgba(245, 108, 108, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
+    }
+  }
+  
+  // 信息按钮科技感样式
+  &.el-button--info {
+    background: linear-gradient(135deg, #909399 0%, #73767a 100%);
+    border: 1px solid #909399;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
+    
+    &:hover {
+      background: linear-gradient(135deg, #73767a 0%, #5a5c5e 100%);
+      box-shadow: 0 4px 16px rgba(144, 147, 153, 0.4);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
+    }
+  }
+  
+  // 禁用状态
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+    
+    &:hover {
+      transform: none !important;
+      box-shadow: none !important;
+    }
+  }
+  
+  // 加载状态
+  &.is-loading {
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      animation: shimmer 1.5s infinite;
+    }
+  }
+  
+  // 发光效果（用于特殊场景）
+  &.xl-button--glow {
+    &::after {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      background: inherit;
+      border-radius: inherit;
+      filter: blur(4px);
+      opacity: 0.3;
+      z-index: -1;
+    }
+  }
+}
+
+// 闪烁动画
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .xl-button {
+    font-size: 14px;
+    padding: 8px 16px;
+  }
+}
+</style>
+=======
 <script setup>
 defineOptions({ name: "XlButton" })
 
@@ -228,3 +460,4 @@ function handleClick(event) {
   }
 }
 </style>
+>>>>>>> 10f1033bebbe3355872fa734591c08b3ae78df9d

package/packages/main/XlLoadingView.vue

@@ -17,7 +17,6 @@ defineOptions({ name: "XlLoadingView" })
   display: flex;
   align-items: center;
   justify-content: center;
-  background: radial-gradient(circle at 10% 20%, rgb(0, 93, 133) 0%, rgb(0, 181, 149) 90%);
   height: 100%;
   width: 100%;
 

package/packages/main/XlTabsNav.vue

@@ -1,147 +1,148 @@
-<script setup>
-defineOptions({ name: "XlTabsNav" })
-
-const props = defineProps({
-  /** 当前激活 tab 的背景色，默认淡绿色 */
-  activeBgColor: {
-    type: String,
-    default: 'rgb(66, 185, 131)'
-  }
-})
-
-import { useRouter } from 'vue-router'
-import { inject } from 'vue'
-import ContextMenu from '@imengyu/vue3-context-menu'
-
-const router = useRouter()
-const store = inject('store')
-
-const switchTab = (tab) => {
-  router.push(tab.fullPath)
-  store.setActiveTab(tab.fullPath, tab.query)
-}
-
-const closeTab = (path) => {
-  store.closeTab(path, router)
-}
-
-const closeOtherTabs = (currentPath) => {
-  store.closeOtherTabs(currentPath, router)
-}
-
-const closeLeftTabs = (currentPath) => {
-  store.closeLeftTabs(currentPath, router)
-}
-
-const closeRightTabs = (currentPath) => {
-  store.closeRightTabs(currentPath, router)
-}
-
-const showContextMenu = (event, tab) => {
-  event.preventDefault()
-  
-  const currentIndex = store.state.tabs.findIndex(t => t.fullPath === tab.fullPath)
-  const hasLeftTabs = currentIndex > 0
-  const hasRightTabs = currentIndex >= 0 && currentIndex < store.state.tabs.length - 1
-  
-  const menuItems = []
-  
-  if (hasLeftTabs) {
-    menuItems.push({
-      label: '关闭左侧标签页',
-      onClick: () => closeLeftTabs(tab.fullPath)
-    })
-  }
-  
-  if (hasRightTabs) {
-    menuItems.push({
-      label: '关闭右侧标签页',
-      onClick: () => closeRightTabs(tab.fullPath)
-    })
-  }
-  
-  if (store.state.tabs.length > 1) {
-    menuItems.push({
-      label: '关闭其它标签页',
-      onClick: () => closeOtherTabs(tab.fullPath)
-    })
-  }
-  
-  if (menuItems.length > 0) {
-    ContextMenu.showContextMenu({
-      x: event.x,
-      y: event.y,
-      items: menuItems
-    })
-  }
-}
-</script>
-
-
-<template>
-    <div class="xl-tabs-nav">
-      <div
-        v-for="tab in store.state.tabs"
-        :key="tab.path"
-        class="tab-item"
-        :class="{ active: tab.fullPath === store.state.activeTab }"
-        :style="tab.fullPath === store.state.activeTab ? { background: props.activeBgColor } : undefined"
-        @click="switchTab(tab)"
-        @contextmenu="showContextMenu($event, tab)"
-      >
-        <span>{{ tab.title }}</span>
-        <span class="close-icon" @click.stop="closeTab(tab.fullPath)">&times;</span>
-      </div>
-    </div>
-  </template>
-  
- 
-  <style lang="less">
-  .xl-tabs-nav {
-    display: flex;
-    padding: 4px 4px 0;
-  
-    .tab-item {
-      height:20px;
-
-      padding: 5px 10px;
-      background: #fff;
-      color:rgb(100,100,100);
-      margin-right: 3px;
-      // border: 1px solid #d9d9d9;
-      /* border-bottom: none; */
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      color:rgb(100,100,100);
-      /* gap: 8px; */
-    }
-    
-    .tab-item.active {
-      /* background 由 props.activeBgColor 通过内联 style 控制，默认淡绿色 */
-      color:#fff;
-    }
-    
-    .close-icon {
-      font-size: 14px;
-      width: 16px;
-      height: 16px;
-      line-height: 16px;
-      text-align: center;
-      border-radius: 50%;
-    }
-    
-    .close-icon:hover {
-      background: #ccc;
-    }
-    
-    .tabs-content {
-      flex: 1;
-      display: flex;
-      flex-flow: column;
-      overflow: auto;
-    }
-  }
+<script setup>
+defineOptions({ name: "XlTabsNav" })
+
+import { useRouter } from 'vue-router'
+import { inject } from 'vue'
+import ContextMenu from '@imengyu/vue3-context-menu'
+
+const props = defineProps({
+  /** 当前激活 tab 的背景色，默认淡绿色 */
+  activeBgColor: {
+    type: String,
+    default: 'rgb(66, 185, 131)'
+  }
+})
+
+const router = useRouter()
+const store = inject('store')
+
+const switchTab = (tab) => {
+  router.push(tab.fullPath)
+  store.setActiveTab(tab.fullPath, tab.query)
+}
+
+const closeTab = (path) => {
+  store.closeTab(path, router)
+}
+
+const closeOtherTabs = (currentPath) => {
+  store.closeOtherTabs(currentPath, router)
+}
+
+const closeLeftTabs = (currentPath) => {
+  store.closeLeftTabs(currentPath, router)
+}
+
+const closeRightTabs = (currentPath) => {
+  store.closeRightTabs(currentPath, router)
+}
+
+const showContextMenu = (event, tab) => {
+  event.preventDefault()
+  
+  const currentIndex = store.state.tabs.findIndex(t => t.fullPath === tab.fullPath)
+  const hasLeftTabs = currentIndex > 0
+  const hasRightTabs = currentIndex >= 0 && currentIndex < store.state.tabs.length - 1
+  
+  const menuItems = []
+  
+  if (hasLeftTabs) {
+    menuItems.push({
+      label: '关闭左侧标签页',
+      onClick: () => closeLeftTabs(tab.fullPath)
+    })
+  }
+  
+  if (hasRightTabs) {
+    menuItems.push({
+      label: '关闭右侧标签页',
+      onClick: () => closeRightTabs(tab.fullPath)
+    })
+  }
+  
+  if (store.state.tabs.length > 1) {
+    menuItems.push({
+      label: '关闭其它标签页',
+      onClick: () => closeOtherTabs(tab.fullPath)
+    })
+  }
+  
+  if (menuItems.length > 0) {
+    ContextMenu.showContextMenu({
+      x: event.x,
+      y: event.y,
+      items: menuItems
+    })
+  }
+}
+</script>
+
+
+<template>
+    <div class="xl-tabs-nav">
+      <div
+        v-for="tab in store.state.tabs"
+        :key="tab.path"
+        class="tab-item"
+        :class="{ active: tab.fullPath === store.state.activeTab }"
+        :style="tab.fullPath === store.state.activeTab ? { background: props.activeBgColor } : undefined"
+        @click="switchTab(tab)"
+        @contextmenu="showContextMenu($event, tab)"
+      >
+        <span>{{ tab.title }}</span>
+        <span class="close-icon" @click.stop="closeTab(tab.fullPath)">&times;</span>
+      </div>
+    </div>
+  </template>
+  
+ 
+  <style lang="less">
+  .xl-tabs-nav {
+    display: flex;
+    padding: 4px 4px 0;
+  
+    .tab-item {
+      height:20px;
+
+      padding: 5px 10px;
+      background: #fff;
+      color:rgb(100,100,100);
+      margin-right: 3px;
+      // border: 1px solid #d9d9d9;
+      /* border-bottom: none; */
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color:rgb(100,100,100);
+      /* gap: 8px; */
+    }
+    
+    .tab-item.active {
+      /* background 由 props.activeBgColor 通过内联 style 控制，默认淡绿色 */
+      /* background 由 props.activeBgColor 通过内联 style 控制，默认淡绿色 */
+      color:#fff;
+    }
+    
+    .close-icon {
+      font-size: 14px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      border-radius: 50%;
+    }
+    
+    .close-icon:hover {
+      background: #ccc;
+    }
+    
+    .tabs-content {
+      flex: 1;
+      display: flex;
+      flex-flow: column;
+      overflow: auto;
+    }
+  }
   </style>