合并分支 'hsx' 到 'master'

src/router/modules/devStyle.js

 //样式主页
-const StylePages = () => import("@/components/devStyle/components/index.vue");
+const StylePages = () => import("@/styles/components/index.vue");
 
 const stylePagesRoutes = [
     // 智库系统的主要路由

src/styles/components/CommonPage/index.vue

+<script setup lang="ts">
+import { ElRow, ElCol } from 'element-plus';
+import '@/styles/common.scss'
+const span = 12
+</script>
+
+<template>
+    <el-row class="wrapper">
+        <el-col :span="span">
+            <pre>
+{{ `import '@/styles/common.scss';
+<template>
+    <div class="background-as-card"></div>
+</template>
+`}}
+</pre>
+            <div class="background-as-card">
+                <div v-for="item in [1, 2, 3, 4]" :key="item">
+                    {{ item }}
+                </div>
+            </div>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+    background-color: rgba(0, 0, 0, 0.068);
+    padding: 10px;
+}
+</style>
\ No newline at end of file

src/styles/components/RadioPage/index.vue

+<script setup lang="ts">
+import { ElRadioGroup, ElRadioButton, ElRow, ElCol } from 'element-plus';
+import { ref } from 'vue';
+import '@/styles/radio.scss';
+
+const radio = ref(1)
+const span = 12
+</script>
+
+<template>
+    <el-row>
+        <el-col :span="span">
+            <pre>
+{{ `import '@/styles/radio.scss';
+<template>
+    <el-radio-group class="radio-group-as-gap-btn">
+    </el-radio-group>
+</template>
+`}}
+</pre>
+            <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
+                <el-radio-button :value="1">选项1</el-radio-button>
+                <el-radio-button :value="2">选项2</el-radio-button>
+                <el-radio-button :value="3">选项3</el-radio-button>
+            </el-radio-group>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file

src/styles/components/TabsPage/index.vue

+<script setup lang="ts">
+import { ElTabs, ElTabPane, ElSpace, ElRow, ElCol } from 'element-plus';
+import { ref } from 'vue';
+import '@/styles/tabs.scss'
+const span = 12
+</script>
+
+<template>
+    <el-row>
+        <el-col :span="span">
+            <pre>
+{{ `import '@/styles/tabs.scss';
+<template>
+    <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
+    </el-tabs>
+</template>
+`}}
+</pre>
+            <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
+                <el-tab-pane label="tab1">tab1</el-tab-pane>
+                <el-tab-pane label="tab2">tab2</el-tab-pane>
+                <el-tab-pane label="tab3">tab3</el-tab-pane>
+            </el-tabs>
+        </el-col>
+    </el-row>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file

src/components/devStyle/components/index.vue → src/styles/components/index.vue

 <template>
     <el-scrollbar>
         <div class="common-page">
-            <el-space direction="vertical" :size="20" alignment="flex-start">
+            <el-space direction="vertical" :size="20" alignment="flex-start" fill>
                 <div class="text-title-0-show">开发样式</div>
                 <div class="text-title-1-show">样式变量</div>
                 <ConstStyle />
                 <div class="text-title-1-show">文字样式</div>
                 <TextStyle />
+                <div class="text-title-1-show">通用样式/组件</div>
+                <el-tabs tabPosition="left">
+                    <el-tab-pane label="通用" lazy>
+                        <common-page />
+                    </el-tab-pane>
+                    <el-tab-pane label="单选框" lazy>
+                        <radio-page />
+                    </el-tab-pane>
+                    <el-tab-pane label="选项卡" lazy>
+                        <tabs-page />
+                    </el-tab-pane>
+                </el-tabs>
             </el-space>
         </div>
     </el-scrollbar>
@@ -16,5 +28,10 @@
 import "@/styles/container.scss"
 import TextStyle from './textStyle.vue';
 import ConstStyle from './constStyle.vue';
+import { ElTabs, ElTabPane, ElSpace } from "element-plus";
+import RadioPage from './RadioPage/index.vue';
+import TabsPage from './TabsPage/index.vue';
+import CommonPage from './CommonPage/index.vue';
+</script>
 
-</script>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file