新增：管理后台前端页面，以及openspec内容。

openspec/changes/fix-frontend-issues/implementation.md

@@ -0,0 +1,130 @@
+# Fix Frontend Issues - Implementation Details
+
+## 1. Theme Store Initialization Order Fix
+
+### Problem
+The application encountered a `ReferenceError: Cannot access 'themeStore' before initialization` error. This occurred because:
+1. The themeStore was being used in Element Plus configuration
+2. But Pinia was not yet initialized when the themeStore was accessed
+
+### Solution
+Reorder the initialization sequence in `main.js` to:
+1. Initialize Pinia first
+2. Then use the themeStore
+3. Finally configure Element Plus with the themeStore value
+
+### Code Changes
+```javascript
+// Before (incorrect)
+app.use(ElementPlus, {
+  locale: zhCn,
+  dark: themeStore.isDark // ❌ themeStore not initialized yet
+})
+app.use(pinia)
+const themeStore = useThemeStore()
+
+// After (correct)
+app.use(pinia) // ✅ Initialize Pinia first
+const themeStore = useThemeStore() // ✅ Then create store instance
+themeStore.initTheme() // ✅ Initialize theme
+app.use(ElementPlus, {
+  locale: zhCn,
+  dark: themeStore.isDark // ✅ Now themeStore is properly initialized
+})
+```
+
+### Best Practice
+Always initialize Pinia before using any stores. The correct initialization order for Vue applications is:
+1. Create Vue app instance
+2. Initialize Pinia (if using)
+3. Initialize any stores needed for configuration
+4. Configure plugins (like Element Plus) with store values
+5. Initialize Vue Router
+6. Mount the app
+
+## 2. Sass @import Deprecation Warnings Fix
+
+### Problem
+Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. The build process was showing warning messages:
+```
+Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+```
+
+### Solution
+Replace all `@import` rules with `@use` rules in SCSS files. The `@use` rule is the recommended way to include Sass files in modern Sass.
+
+### Code Changes
+```scss
+// Before (deprecated)
+@import './variables.scss';
+@import './responsive.scss';
+
+// After (recommended)
+@use './variables.scss' as *;
+@use './responsive.scss' as *;
+```
+
+### Best Practice
+- Always use `@use` instead of `@import` for including Sass files
+- Use `as *` to import all variables, mixins, and functions into the current scope
+- **Important**: Each file must explicitly import the variables it uses. Variables are not automatically shared between files when using @use
+- For larger projects, consider using namespace imports to avoid naming conflicts
+- Example: If responsive.scss uses variables from variables.scss, it must include `@use './variables.scss' as *` at the top
+
+## 3. Additional Frontend Best Practices
+
+### Store Management
+- Always initialize Pinia before using any stores
+- Keep store initialization separate from plugin configuration
+- Use descriptive names for store actions and mutations
+
+### SCSS/Sass
+- Use `@use` instead of `@import` for including Sass files
+- Define variables in a central location (like variables.scss)
+- Use descriptive names for variables and mixins
+- Organize SCSS files by functionality (variables, mixins, components, etc.)
+
+### Plugin Configuration
+- Configure plugins after all dependencies are initialized
+- Use store values for plugin configuration only after stores are initialized
+- Keep plugin configuration minimal and focused
+
+### Build Process
+- Always run `npm run build` to verify no warnings or errors before committing
+- Fix all deprecation warnings promptly
+- Monitor build output for new issues
+
+## 4. Verification
+
+### Build Verification
+Run `npm run build` to verify that no warnings or errors appear during the build process:
+```bash
+npm run build
+```
+
+Expected output should show no deprecation warnings:
+```
+vite v7.3.0 building client environment for production...
+✓ 1515 modules transformed.
+dist/index.html                                0.46 kB │ gzip:   0.29 kB
+...
+```
+
+### Functionality Verification
+1. Start the development server: `npm run dev`
+2. Access the application at http://localhost:5173
+3. Verify that:
+   - No console errors appear in the browser
+   - Theme switching works correctly
+   - All pages load properly
+   - API calls function correctly
+
+## 5. Conclusion
+
+By following these best practices, we can ensure that our frontend applications are:
+- More maintainable
+- Less error-prone
+- Compatible with future versions of dependencies
+- Free of deprecation warnings
+
+These changes will help us build better frontend applications and avoid common pitfalls in future development.

openspec/changes/fix-frontend-issues/proposal.md

@@ -0,0 +1,18 @@
+# Change: Fix Frontend Issues and Add Best Practices
+
+## Why
+The frontend project has some issues that need to be fixed, including:
+1. Sass @import rules deprecation warnings (will be removed in Dart Sass 3.0.0)
+2. Theme store initialization order error causing `ReferenceError: Cannot access 'themeStore' before initialization`
+
+This change aims to fix these issues and establish best practices to avoid similar problems in future frontend development.
+
+## What Changes
+- Fix theme store initialization order by initializing Pinia first before using stores
+- Replace Sass @import rules with @use rules to eliminate deprecation warnings
+- Add best practices documentation for frontend development
+
+## Impact
+- Affected specs: frontend-integration
+- Affected code: admin-web/src/main.js, admin-web/src/styles/main.scss
+- Dependencies: None

openspec/changes/fix-frontend-issues/tasks.md

@@ -0,0 +1,17 @@
+## 1. Fix Theme Store Initialization Order
+- [x] 1.1 Initialize Pinia before using themeStore in main.js
+- [x] 1.2 Verify that the `ReferenceError: Cannot access 'themeStore' before initialization` error is resolved
+
+## 2. Fix Sass @import Deprecation Warnings
+- [x] 2.1 Replace @import with @use in main.scss for variables.scss
+- [x] 2.2 Replace @import with @use in main.scss for responsive.scss
+- [x] 2.3 Verify that no Sass deprecation warnings appear during build
+
+## 3. Add Best Practices Documentation
+- [x] 3.1 Create implementation.md with best practices for frontend development
+- [x] 3.2 Document the importance of store initialization order
+- [x] 3.3 Document the use of @use instead of @import for Sass files
+
+## 4. Verification
+- [x] 4.1 Run build command to verify no warnings or errors
+- [x] 4.2 Test application functionality to ensure no regressions