重构了main.html的主函数

重构了大量的页面的sidebar
优化了代码结构

web/css/main.css

@@ -0,0 +1,157 @@
+/* 主页面样式 - 从 main.html 分离 */
+.sidebar-section-title {
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    color: rgba(191, 203, 217, 0.7);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.nav-link:hover {
+    background-color: rgba(0, 21, 41, 0.2);
+}
+.sidebar-item-active {
+    background-color: rgba(24, 144, 255, 0.1);
+    color: #1890ff;
+    border-left: 4px solid #1890ff;
+}
+.table-row-hover:hover {
+    background-color: #f9fafb;
+    transition: background-color 0.2s;
+}
+.table-header-bg {
+    background-color: #fafafa !important;
+}
+.card-radio {
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.card-radio.active {
+    border-color: #1890ff;
+    background-color: rgba(24, 144, 255, 0.05);
+}
+.card-radio:hover {
+    border-color: #d1d5db;
+}
+.form-input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    transition: border-color 0.2s, outline 0.2s;
+}
+.form-input:focus {
+    border-color: #1890ff;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.form-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 0.25rem;
+}
+.form-select {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    transition: border-color 0.2s, outline 0.2s;
+    appearance: none;
+    background-color: white;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+}
+.form-select:focus {
+    border-color: #1890ff;
+    outline: none;
+}
+.icon-option {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.icon-option:hover {
+    border-color: #1890ff;
+    background-color: rgba(24, 144, 255, 0.05);
+}
+.icon-option.selected {
+    border-color: #1890ff;
+    background-color: rgba(24, 144, 255, 0.1);
+}
+.tab-active {
+    background-color: rgba(24, 144, 255, 0.1);
+    color: #1890ff;
+    font-weight: 500;
+}
+.radio-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: transparent;
+    transition: all 0.2s;
+}
+.upload-area:hover,
+.upload-area.drag-over {
+    border-color: #1890ff;
+    background-color: rgba(24, 144, 255, 0.05);
+}
+.bg-primary {
+    background-color: #1890ff;
+}
+.text-primary {
+    color: #1890ff;
+}
+.border-primary {
+    border-color: #1890ff;
+}
+.text-danger {
+    color: #f5222d;
+}
+.hover\:bg-primary\/90:hover {
+    background-color: rgba(24, 144, 255, 0.9);
+}
+:root {
+    --primary: #1890ff;
+    --danger: #f5222d;
+    --success: #52c41a;
+}
+
+/* 侧边栏滑块动画 */
+.sidebar-slider {
+    position: absolute;
+    width: 4px;
+    height: 0;
+    background-color: var(--primary);
+    border-radius: 0 2px 2px 0;
+    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+    z-index: 10;
+}
+
+/* 菜单项相对定位 */
+.nav-item-wrapper {
+    position: relative;
+}
+
+/* 选中项背景动画 */
+.nav-link {
+    position: relative;
+    z-index: 1;
+}