feat: 增加 styles 样式文件

sau_frontend/src/styles/index.scss

@@ -0,0 +1,121 @@
+// 导入重置样式
+@use './reset.scss';
+
+// 导入变量
+@use './variables.scss' as *;
+
+// 全局样式
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  color: $text-primary;
+  background-color: $bg-color-page;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+// 通用工具类
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+// 间距工具类
+.m-0 { margin: 0; }
+.mt-0 { margin-top: 0; }
+.mr-0 { margin-right: 0; }
+.mb-0 { margin-bottom: 0; }
+.ml-0 { margin-left: 0; }
+
+.m-1 { margin: $spacing-xs; }
+.mt-1 { margin-top: $spacing-xs; }
+.mr-1 { margin-right: $spacing-xs; }
+.mb-1 { margin-bottom: $spacing-xs; }
+.ml-1 { margin-left: $spacing-xs; }
+
+.m-2 { margin: $spacing-sm; }
+.mt-2 { margin-top: $spacing-sm; }
+.mr-2 { margin-right: $spacing-sm; }
+.mb-2 { margin-bottom: $spacing-sm; }
+.ml-2 { margin-left: $spacing-sm; }
+
+.m-3 { margin: $spacing-md; }
+.mt-3 { margin-top: $spacing-md; }
+.mr-3 { margin-right: $spacing-md; }
+.mb-3 { margin-bottom: $spacing-md; }
+.ml-3 { margin-left: $spacing-md; }
+
+.m-4 { margin: $spacing-lg; }
+.mt-4 { margin-top: $spacing-lg; }
+.mr-4 { margin-right: $spacing-lg; }
+.mb-4 { margin-bottom: $spacing-lg; }
+.ml-4 { margin-left: $spacing-lg; }
+
+.p-0 { padding: 0; }
+.pt-0 { padding-top: 0; }
+.pr-0 { padding-right: 0; }
+.pb-0 { padding-bottom: 0; }
+.pl-0 { padding-left: 0; }
+
+.p-1 { padding: $spacing-xs; }
+.pt-1 { padding-top: $spacing-xs; }
+.pr-1 { padding-right: $spacing-xs; }
+.pb-1 { padding-bottom: $spacing-xs; }
+.pl-1 { padding-left: $spacing-xs; }
+
+.p-2 { padding: $spacing-sm; }
+.pt-2 { padding-top: $spacing-sm; }
+.pr-2 { padding-right: $spacing-sm; }
+.pb-2 { padding-bottom: $spacing-sm; }
+.pl-2 { padding-left: $spacing-sm; }
+
+.p-3 { padding: $spacing-md; }
+.pt-3 { padding-top: $spacing-md; }
+.pr-3 { padding-right: $spacing-md; }
+.pb-3 { padding-bottom: $spacing-md; }
+.pl-3 { padding-left: $spacing-md; }
+
+.p-4 { padding: $spacing-lg; }
+.pt-4 { padding-top: $spacing-lg; }
+.pr-4 { padding-right: $spacing-lg; }
+.pb-4 { padding-bottom: $spacing-lg; }
+.pl-4 { padding-left: $spacing-lg; }

sau_frontend/src/styles/reset.scss

@@ -0,0 +1,119 @@
+/* CSS Reset - 删除浏览器默认样式 */
+
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin and padding */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* 3. Allow percentage-based heights in the application */
+html, body {
+  height: 100%;
+}
+
+/* 4. Add accessible line-height and improve text rendering */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+}
+
+/* 5. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 6. Remove built-in form typography styles */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 8. Create a root stacking context */
+#root, #__next, #app {
+  isolation: isolate;
+}
+
+/* 9. Remove list styles */
+ul, ol {
+  list-style: none;
+}
+
+/* 10. Remove default button styles */
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* 11. Remove default link styles */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* 12. Remove default table styles */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* 13. Remove default fieldset styles */
+fieldset {
+  border: none;
+}
+
+/* 14. Remove default legend styles */
+legend {
+  display: table;
+}
+
+/* 15. Remove default details/summary styles */
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+/* 16. Remove default hr styles */
+hr {
+  border: none;
+  height: 1px;
+  background: #ccc;
+}
+
+/* 17. Remove default blockquote styles */
+blockquote {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after {
+  content: '';
+  content: none;
+}
+
+/* 18. Remove default cite styles */
+cite {
+  font-style: normal;
+}
+
+/* 19. Remove default address styles */
+address {
+  font-style: normal;
+}

sau_frontend/src/styles/variables.scss

@@ -0,0 +1,54 @@
+// 颜色变量
+$primary-color: #409eff;
+$success-color: #67c23a;
+$warning-color: #e6a23c;
+$danger-color: #f56c6c;
+$info-color: #909399;
+
+// 文字颜色
+$text-primary: #303133;
+$text-regular: #606266;
+$text-secondary: #909399;
+$text-placeholder: #c0c4cc;
+
+// 边框颜色
+$border-base: #dcdfe6;
+$border-light: #e4e7ed;
+$border-lighter: #ebeef5;
+$border-extra-light: #f2f6fc;
+
+// 背景颜色
+$bg-color: #ffffff;
+$bg-color-page: #f2f3f5;
+$bg-color-overlay: #ffffff;
+
+// 字体大小
+$font-size-extra-large: 20px;
+$font-size-large: 18px;
+$font-size-medium: 16px;
+$font-size-base: 14px;
+$font-size-small: 13px;
+$font-size-extra-small: 12px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 圆角
+$border-radius-base: 4px;
+$border-radius-small: 2px;
+$border-radius-round: 20px;
+$border-radius-circle: 50%;
+
+// 阴影
+$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+// 层级
+$z-index-normal: 1;
+$z-index-top: 1000;
+$z-index-popper: 2000;