修改组件样式引入

packages/Breadcrumb/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between">
+  <div v-if="breadcrumbs.length > 0" class="guip-breadcrumb-container flex-between">
     <nav>
       <ol class="breadcrumb">
         <li
@@ -95,66 +95,4 @@ export default {
     }
   }
 };
-</script>
-<style scoped lang="scss">
-/* 保持之前的样式不变 */
-.breadcrumb-container {
-  padding: 16px 12px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  .breadRight{
-    a{
-      text-decoration: none;
-      color: #006AFF;
-    }
-  }
-}
-
-.home-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  height: 22px;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  cursor: pointer;
-}
-
-.router-link-active {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.breadcrumb-item a {
-  color: #626573;
-  text-decoration: none;
-
-  &:hover {
-    color: #006AFF;
-  }
-}
-
-.breadcrumb-item.active span {
-  color: #1E2226;
-  ;
-
-}
-
-.separator {
-  width: 12px;
-  height: 12px;
-}
-</style>
+</script>

packages/DevicePreview/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="preview-container">
+  <div class="guip-preview-container">
       <div class="preview_top flex-between">
           <b class="preview-title">实时预览</b>
           <div class="toggle-container">
@@ -29,7 +29,6 @@
 </template>
 
 <script>
-import './index.scss'
 export default {
   name: 'DevicePreview',
   props:{

packages/GuipSelect/src/index.vue

@@ -18,7 +18,7 @@ export default {
   props: {
     value: [String, Number, Array],
     options: {
-      type: Array,
+      type: [Array,Object],
       default: () => []
     },
     // 新增配置字段
@@ -58,9 +58,25 @@ export default {
     }
   },
   computed: {
-    // 处理options为空的情况
     processedOptions() {
+      // 处理options为空的情况
       let options = this.options || [];
+      // 如果是 [1,12,22] 格式
+      if (Array.isArray(options) && options.every(item => typeof item !== 'object')) {
+        return options.map((item, index) => ({
+          [this.valueKey]: index,
+          [this.labelKey]: item
+        }));
+      }
+      
+      // 如果是对象格式，转换为数组
+      if (options && !Array.isArray(options)) {
+        options = Object.keys(options).map(key => ({
+          [this.valueKey]: key,
+          [this.labelKey]: options[key]
+        }));
+      }
+
       // 当extraItem存在且不是空对象时，添加到options数组开头
       if (this.extraItem && Object.keys(this.extraItem).length > 0) {
         return [

packages/PromptText/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="prompt-text" :class="typeClass">
+  <div class="guip-prompt-text" :class="typeClass">
     <div class="flex-text">
       <div class="flex">
         <img class="prompt-icon" :src="typeIcon" alt="">

packages/SvgIcon1/src/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="svg-icon-wrapper" :style="wrapperStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
+  <div class="guip-svg-icon-wrapper" :style="wrapperStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
     <div class="svg-icon" v-html="svgContent" :style="{
       '--icon-color': (hoverEffect || isActive) ? activeColor : defaultColor,
       '--icon-hover-color': activeColor
@@ -143,33 +143,4 @@ export default {
     this.loadSvg()
   }
 }
-</script>
-
-<style scoped>
-.svg-icon-wrapper {
-  cursor: pointer;
-}
-
-
-.svg-icon {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--icon-color);
-  transition: color 0.3s;
-}
-
-.svg-icon:hover {
-  color: var(--icon-hover-color);
-}
-
-.svg-icon {
-  display: inline-flex;
-}
-
-.svg-icon>>>svg {
-  fill: currentColor;
-}
-</style>
+</script>

packages/index.js

@@ -11,6 +11,7 @@ import SvgIcon1 from './SvgIcon1'
 import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
 import './styles/index.css' // 全局引入
 import './styles/common.scss' // 全局引入
+import './styles/component.scss' // 全局引入
 
 const components = [
   GuipButton,

packages/styles/component.scss

@@ -1,107 +1,196 @@
 // 提示框组件
-// .prompt-text {
-//     padding: 8px 13px;
-//     border-radius: 4px;
-
-//     .flex-text {
-//         display: flex;
-//         align-items: center;
-//         align-self: stretch;
-//         justify-content: space-between;
-//         z-index: 1;
-//     }
-
-//     .prompt-icon {
-//         width: 16px;
-//         height: 16px;
-//         ;
-//         margin-right: 8px;
-//     }
-
-//     .prompt-desc {
-//         color: #1E2226;
-//         letter-spacing: 0.08em;
-//     }
-
-//     .prompt-extra {}
-// }
-
-// .prompt-text.info {
-//     background: #F2F7FF;
-//     border: 1px solid #BFDAFF;
-// }
-
-// .prompt-text.notice {
-//     background: #FEFCE8;
-//     border: 1px solid rgba(255, 140, 0, 0.3);
-// }
-
-// .prompt-text.warning {
-//     background: #FFF1F0;
-//     border: 1px solid #FFA39E;
-// }
-
-// // 实时预览外框组件
-// .preview-container {
-//     max-width: 800px;
-//     min-width: 300px;
-//     margin: 0 auto;
-//     padding: 24px;
-//     border-radius: 4px;
-//     background: #FAFAFA;
-
-//     .preview_top {
-//         margin-bottom: 20px;
-//     }
-
-//     .preview-title {
-//         text-align: center;
-//         color: #1E2226;
-//     }
-
-//     .toggle-container {
-//         display: flex;
-//         height: 26px;
-//         justify-content: center;
-//         align-items: center;
-//         padding: 3px 6px;
-//         border-radius: 4px;
-//         background: #F2F3F5;
-//     }
-
-//     .toggle-button {
-//         padding: 1px 12px;
-//         border-radius: 2px;
-//         box-sizing: border-box;
-//         cursor: pointer;
-//         transition: all 0.3s ease;
-//     }
-
-//     .toggle-button.active {
-//         color: #006AFF;
-//         background: #FFFFFF;
-//     }
-
-//     .toggle-button.active:after {
-//         /* content: '';
-//     position: absolute;
-//     bottom: -11px;
-//     left: 0;
-//     width: 100%;
-//     height: 2px;
-//     background-color: #1890ff; */
-//     }
-
-//     .content-container {
-//         /* min-height: 300px;
-//     padding: 20px;
-//     border: 2px solid #ffd700;
-//     border-radius: 4px;
-//     background-color: #fff; */
-//     }
-
-//     .desktop-view,
-//     .mobile-view {
-//         width: 100%;
-//     }
-// }
+.guip-prompt-text {
+    padding: 8px 13px;
+    border-radius: 4px;
+
+    .flex-text {
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        justify-content: space-between;
+        z-index: 1;
+    }
+
+    .prompt-icon {
+        width: 16px;
+        height: 16px;
+        ;
+        margin-right: 8px;
+    }
+
+    .prompt-desc {
+        color: #1E2226;
+        letter-spacing: 0.08em;
+    }
+
+    .prompt-extra {}
+}
+
+.guip-prompt-text.info {
+    background: #F2F7FF;
+    border: 1px solid #BFDAFF;
+}
+
+.guip-prompt-text.notice {
+    background: #FEFCE8;
+    border: 1px solid rgba(255, 140, 0, 0.3);
+}
+
+.guip-prompt-text.warning {
+    background: #FFF1F0;
+    border: 1px solid #FFA39E;
+}
+
+// 实时预览外框组件
+.guip-preview-container {
+    max-width: 800px;
+    min-width: 300px;
+    margin: 0 auto;
+    padding: 24px;
+    border-radius: 4px;
+    background: #FAFAFA;
+
+    .preview_top {
+        margin-bottom: 20px;
+    }
+
+    .preview-title {
+        text-align: center;
+        color: #1E2226;
+    }
+
+    .toggle-container {
+        display: flex;
+        height: 26px;
+        justify-content: center;
+        align-items: center;
+        padding: 3px 6px;
+        border-radius: 4px;
+        background: #F2F3F5;
+    }
+
+    .toggle-button {
+        padding: 1px 12px;
+        border-radius: 2px;
+        box-sizing: border-box;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .toggle-button.active {
+        color: #006AFF;
+        background: #FFFFFF;
+    }
+
+    .toggle-button.active:after {
+        /* content: '';
+    position: absolute;
+    bottom: -11px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #1890ff; */
+    }
+
+    .content-container {
+        /* min-height: 300px;
+    padding: 20px;
+    border: 2px solid #ffd700;
+    border-radius: 4px;
+    background-color: #fff; */
+    }
+
+    .desktop-view,
+    .mobile-view {
+        width: 100%;
+    }
+}
+
+// 面包屑组件
+.guip-breadcrumb-container {
+    padding: 16px 12px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+
+    .breadRight {
+        a {
+            text-decoration: none;
+            color: #006AFF;
+        }
+    }
+
+    .home-icon {
+        width: 16px;
+        height: 16px;
+    }
+
+    .breadcrumb {
+        display: flex;
+        flex-wrap: wrap;
+        height: 22px;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    .breadcrumb-item {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        cursor: pointer;
+    }
+
+    .router-link-active {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    .breadcrumb-item a {
+        color: #626573;
+        text-decoration: none;
+
+        &:hover {
+            color: #006AFF;
+        }
+    }
+
+    .breadcrumb-item.active span {
+        color: #1E2226;
+        ;
+
+    }
+
+    .separator {
+        width: 12px;
+        height: 12px;
+    }
+}
+
+//  图标组件
+.guip-svg-icon-wrapper {
+    cursor: pointer;
+
+    .svg-icon {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--icon-color);
+        transition: color 0.3s;
+    }
+
+    .svg-icon:hover {
+        color: var(--icon-hover-color);
+    }
+
+    .svg-icon {
+        display: inline-flex;
+    }
+
+    .svg-icon>>>svg {
+        fill: currentColor;
+    }
+}