From c51f389a14b633bd410e17abc0aad9b67c5a6681 Mon Sep 17 00:00:00 2001 From: Guwan Date: Sun, 20 Jul 2025 22:03:13 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20vue2=E8=AF=AD=E6=B3=95=E5=AD=A6=E4=B9=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 5 + src/App.vue | 37 +- src/components/AutoSyncHub.vue | 742 ++++++++++++++++++++++++ src/components/Calculator.vue | 252 ++++++++ src/components/CssAnimation.vue | 955 +++++++++++++++++++++++++++++++ src/components/CssBasics.vue | 719 +++++++++++++++++++++++ src/components/CssLayout.vue | 876 ++++++++++++++++++++++++++++ src/components/DynamicStyles.vue | 523 +++++++++++++++++ src/components/FormValidator.vue | 313 ++++++++++ src/components/VuexDemo.vue | 471 +++++++++++++++ src/router/index.js | 35 ++ src/store/index.js | 63 +- src/store/modules/calculator.js | 51 ++ src/store/modules/form.js | 23 + src/store/modules/styles.js | 31 + src/views/AboutView.vue | 115 +++- src/views/HomeView.vue | 292 +++++++++- 17 files changed, 5485 insertions(+), 18 deletions(-) create mode 100644 src/components/AutoSyncHub.vue create mode 100644 src/components/Calculator.vue create mode 100644 src/components/CssAnimation.vue create mode 100644 src/components/CssBasics.vue create mode 100644 src/components/CssLayout.vue create mode 100644 src/components/DynamicStyles.vue create mode 100644 src/components/FormValidator.vue create mode 100644 src/components/VuexDemo.vue create mode 100644 src/store/modules/calculator.js create mode 100644 src/store/modules/form.js create mode 100644 src/store/modules/styles.js diff --git a/.gitignore b/.gitignore index 403adbc..2cc52f6 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,8 @@ pnpm-debug.log* *.njsproj *.sln *.sw? + +package-lock.json +yarn.lock + +**/cert/ diff --git a/src/App.vue b/src/App.vue index 240acf4..b6fc4be 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,32 @@ + + \ No newline at end of file diff --git a/src/components/Calculator.vue b/src/components/Calculator.vue new file mode 100644 index 0000000..205c90b --- /dev/null +++ b/src/components/Calculator.vue @@ -0,0 +1,252 @@ + + + + + \ No newline at end of file diff --git a/src/components/CssAnimation.vue b/src/components/CssAnimation.vue new file mode 100644 index 0000000..49892cb --- /dev/null +++ b/src/components/CssAnimation.vue @@ -0,0 +1,955 @@ + + + + + \ No newline at end of file diff --git a/src/components/CssBasics.vue b/src/components/CssBasics.vue new file mode 100644 index 0000000..6b51be4 --- /dev/null +++ b/src/components/CssBasics.vue @@ -0,0 +1,719 @@ + + + + + \ No newline at end of file diff --git a/src/components/CssLayout.vue b/src/components/CssLayout.vue new file mode 100644 index 0000000..947ba94 --- /dev/null +++ b/src/components/CssLayout.vue @@ -0,0 +1,876 @@ + + + + + \ No newline at end of file diff --git a/src/components/DynamicStyles.vue b/src/components/DynamicStyles.vue new file mode 100644 index 0000000..2f9efdb --- /dev/null +++ b/src/components/DynamicStyles.vue @@ -0,0 +1,523 @@ + + + + + \ No newline at end of file diff --git a/src/components/FormValidator.vue b/src/components/FormValidator.vue new file mode 100644 index 0000000..39ecc10 --- /dev/null +++ b/src/components/FormValidator.vue @@ -0,0 +1,313 @@ + + + + + \ No newline at end of file diff --git a/src/components/VuexDemo.vue b/src/components/VuexDemo.vue new file mode 100644 index 0000000..5c39b4e --- /dev/null +++ b/src/components/VuexDemo.vue @@ -0,0 +1,471 @@ + + + + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index f09f254..685e1d1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -19,6 +19,41 @@ const routes = [ component: function () { return import(/* webpackChunkName: "about" */ '../views/AboutView.vue') } + }, + { + path: '/vuex-demo', + name: 'vuex-demo', + component: function () { + return import(/* webpackChunkName: "vuex-demo" */ '../components/VuexDemo.vue') + } + }, + { + path: '/auto-sync', + name: 'auto-sync', + component: function () { + return import(/* webpackChunkName: "auto-sync" */ '../components/AutoSyncHub.vue') + } + }, + { + path: '/css-basics', + name: 'css-basics', + component: function () { + return import(/* webpackChunkName: "css-basics" */ '../components/CssBasics.vue') + } + }, + { + path: '/css-layout', + name: 'css-layout', + component: function () { + return import(/* webpackChunkName: "css-layout" */ '../components/CssLayout.vue') + } + }, + { + path: '/css-animation', + name: 'css-animation', + component: function () { + return import(/* webpackChunkName: "css-animation" */ '../components/CssAnimation.vue') + } } ] diff --git a/src/store/index.js b/src/store/index.js index ceffa8e..dc15320 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,17 +1,64 @@ import Vue from 'vue' import Vuex from 'vuex' +import calculator from './modules/calculator' +import form from './modules/form' +import styles from './modules/styles' Vue.use(Vuex) export default new Vuex.Store({ - state: { - }, - getters: { - }, - mutations: { - }, - actions: { - }, modules: { + calculator, + form, + styles + }, + // 根级别的getters，用于兼容旧代码 + getters: { + // 计算器相关的getter + calculatorHistory: state => state.calculator.history, + calculatorInitialValue: state => state.calculator.initialValue, + calculatorPrecision: state => state.calculator.precision, + calculatorLastResult: state => state.calculator.lastResult, + + // 表单相关的getter + formSubmittedData: state => state.form.submittedData, + formSubmissionCount: state => state.form.submissionCount, + + // 动态样式相关的getter + buttonClickData: state => state.styles.buttonClickData, + buttonClickCount: state => state.styles.clickCount, + currentTheme: state => state.styles.theme + }, + // 根级别的actions，用于兼容旧代码 + actions: { + // 计算器相关的actions + addCalculationHistory({ dispatch }, operation) { + dispatch('calculator/addHistory', operation); + }, + clearCalculationHistory({ dispatch }) { + dispatch('calculator/clearHistory'); + }, + setCalculatorInitialValue({ dispatch }, value) { + dispatch('calculator/setInitialValue', value); + }, + setCalculatorPrecision({ dispatch }, precision) { + dispatch('calculator/setPrecision', precision); + }, + handleCalculation({ dispatch }, data) { + dispatch('calculator/handleCalculation', data); + }, + + // 表单相关的actions + submitFormData({ dispatch }, data) { + dispatch('form/submitData', data); + }, + + // 动态样式相关的actions + recordButtonClick({ dispatch }, data) { + dispatch('styles/recordButtonClick', data); + }, + toggleTheme({ dispatch }) { + dispatch('styles/toggleTheme'); + } } }) diff --git a/src/store/modules/calculator.js b/src/store/modules/calculator.js new file mode 100644 index 0000000..8140b6c --- /dev/null +++ b/src/store/modules/calculator.js @@ -0,0 +1,51 @@ +// 计算器模块 +export default { + namespaced: true, + state: { + initialValue: 10, + precision: 2, + history: ['初始值: 10'], + lastResult: 10 + }, + getters: { + history: state => state.history, + initialValue: state => state.initialValue, + precision: state => state.precision, + lastResult: state => state.lastResult + }, + mutations: { + ADD_HISTORY(state, operation) { + state.history.push(operation); + }, + CLEAR_HISTORY(state) { + state.history = []; + }, + SET_INITIAL_VALUE(state, value) { + state.initialValue = value; + }, + SET_PRECISION(state, precision) { + state.precision = precision; + }, + SET_RESULT(state, result) { + state.lastResult = result; + } + }, + actions: { + addHistory({ commit }, operation) { + commit('ADD_HISTORY', operation); + }, + clearHistory({ commit }) { + commit('CLEAR_HISTORY'); + }, + setInitialValue({ commit }, value) { + commit('SET_INITIAL_VALUE', value); + }, + setPrecision({ commit }, precision) { + commit('SET_PRECISION', precision); + }, + handleCalculation({ commit }, data) { + commit('ADD_HISTORY', data.operation); + commit('SET_RESULT', data.result); + } + } +} \ No newline at end of file diff --git a/src/store/modules/form.js b/src/store/modules/form.js new file mode 100644 index 0000000..a6d73f6 --- /dev/null +++ b/src/store/modules/form.js @@ -0,0 +1,23 @@ +// 表单模块 +export default { + namespaced: true, + state: { + submittedData: null, + submissionCount: 0 + }, + getters: { + submittedData: state => state.submittedData, + submissionCount: state => state.submissionCount + }, + mutations: { + SUBMIT_DATA(state, data) { + state.submittedData = data; + state.submissionCount++; + } + }, + actions: { + submitData({ commit }, data) { + commit('SUBMIT_DATA', data); + } + } +} \ No newline at end of file diff --git a/src/store/modules/styles.js b/src/store/modules/styles.js new file mode 100644 index 0000000..0981195 --- /dev/null +++ b/src/store/modules/styles.js @@ -0,0 +1,31 @@ +// 样式模块 +export default { + namespaced: true, + state: { + buttonClickData: null, + clickCount: 0, + theme: 'light' // 全局主题：light或dark + }, + getters: { + buttonClickData: state => state.buttonClickData, + clickCount: state => state.clickCount, + theme: state => state.theme + }, + mutations: { + RECORD_BUTTON_CLICK(state, data) { + state.buttonClickData = data; + state.clickCount++; + }, + TOGGLE_THEME(state) { + state.theme = state.theme === 'light' ? 'dark' : 'light'; + } + }, + actions: { + recordButtonClick({ commit }, data) { + commit('RECORD_BUTTON_CLICK', data); + }, + toggleTheme({ commit }) { + commit('TOGGLE_THEME'); + } + } +} \ No newline at end of file diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue index 3fa2807..bd79a43 100644 --- a/src/views/AboutView.vue +++ b/src/views/AboutView.vue @@ -1,5 +1,118 @@ + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index e8d96d7..b3b3ef1 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,18 +1,298 @@ + +