[
{
"path": ".editorconfig",
"content": "[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]\ncharset = utf-8\nindent_size = 2\nindent_style = space\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true"
},
{
"path": ".eslintignore",
"content": "/dist\n/src-bex/www\n/src-capacitor\n/src-cordova\n/.quasar\n/node_modules\n.eslintrc.js\nbabel.config.js\n/src-ssr\n"
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy\n // This option interrupts the configuration hierarchy at this file\n // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)\n root: true,\n\n // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser\n // Must use parserOptions instead of \"parser\" to allow vue-eslint-parser to keep working\n // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted\n parserOptions: {\n parser: require.resolve('@typescript-eslint/parser'),\n extraFileExtensions: ['.vue'],\n ecmaVersion: 2015, // 与 tsconfig.json 的 target: \"es6\" 保持一致\n sourceType: 'module',\n },\n\n env: {\n browser: true,\n es6: true, // 与 tsconfig.json 的 target: \"es6\" 保持一致（改为 es6 替代 es2021）\n node: true,\n 'vue/setup-compiler-macros': true,\n },\n\n // Rules order is important, please avoid shuffling them\n extends: [\n // Base ESLint recommended rules\n 'eslint:recommended', // 启用基础推荐规则集\n\n // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage\n // ESLint typescript rules\n 'plugin:@typescript-eslint/recommended',\n\n // Uncomment any of the lines below to choose desired strictness,\n // but leave only one uncommented!\n // See https://eslint.vuejs.org/rules/#available-rules\n 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)\n // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)\n // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)\n\n // https://github.com/prettier/eslint-config-prettier#installation\n // usage with Prettier, provided by 'eslint-config-prettier'.\n 'prettier',\n ],\n\n plugins: [\n // required to apply rules which need type information\n '@typescript-eslint',\n\n // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files\n // required to lint *.vue files\n 'vue',\n\n // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674\n // Prettier has not been included as plugin to avoid performance impact\n // add it as an extension for your IDE\n ],\n\n globals: {\n ga: 'readonly', // Google Analytics\n cordova: 'readonly',\n __statics: 'readonly',\n __QUASAR_SSR__: 'readonly',\n __QUASAR_SSR_SERVER__: 'readonly',\n __QUASAR_SSR_CLIENT__: 'readonly',\n __QUASAR_SSR_PWA__: 'readonly',\n process: 'readonly',\n Capacitor: 'readonly',\n chrome: 'readonly',\n },\n\n // add your custom rules here\n rules: {\n 'prefer-promise-reject-errors': 'off',\n // TypeScript\n quotes: ['warn', 'single', { avoidEscape: true }],\n '@typescript-eslint/explicit-function-return-type': 'off',\n '@typescript-eslint/explicit-module-boundary-types': 'off',\n '@typescript-eslint/no-unsafe-member-access': 'off',\n '@typescript-eslint/no-unsafe-call': 'off',\n '@typescript-eslint/no-unsafe-argument': 'off',\n '@typescript-eslint/no-unsafe-assignment': 'off',\n '@typescript-eslint/restrict-plus-operands': 'off',\n '@typescript-eslint/no-floating-promises': 'off',\n 'no-empty-function': 'off',\n '@typescript-eslint/no-empty-function': 'off',\n '@typescript-eslint/no-unsafe-return': 'off',\n '@typescript-eslint/restrict-template-expressions': 'off',\n '@typescript-eslint/await-thenable': 'off',\n '@typescript-eslint/no-empty-interface': 'off',\n 'no-unused-vars': 'off', // 关闭基础规则，使用 TypeScript 版本\n // 检测未使用的变量和参数，允许以下划线开头的参数（常用于接口实现）\n '@typescript-eslint/no-unused-vars': [\n 'warn',\n {\n argsIgnorePattern: '^_', // 忽略以下划线开头的参数（如 _event, _props）\n varsIgnorePattern: '^_', // 忽略以下划线开头的变量\n args: 'after-used', // 只检查使用位置之后的参数\n ignoreRestSiblings: true, // 忽略解构中的 rest siblings\n },\n ],\n 'prefer-const': 'warn', // 启用，推荐使用 const\n 'require-await': 'off',\n '@typescript-eslint/require-await': 'off',\n '@typescript-eslint/no-misused-promises': 'off',\n '@typescript-eslint/no-for-in-array': 'off',\n // allow debugger during development only\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',\n // 禁用 tab\n 'no-tabs': 'off',\n // 禁止空格和 tab 的混合缩进\n 'no-mixed-spaces-and-tabs': 'warn',\n // 要求使用 === 和 !==\n eqeqeq: ['error', 'always'],\n '@typescript-eslint/class-name-casing': 'off',\n // 禁止使用 var\n 'no-var': 'error', // 启用，强制使用 let/const 替代 var\n // 禁止直接调用 Object.prototypes 的内置属性\n 'no-prototype-builtins': 'error',\n // 要求回调函数使用箭头函数\n 'prefer-arrow-callback': 'error',\n // 要求使用模板字面量而非字符串连接\n 'prefer-template': 'error',\n // 禁止修改 const 声明的变量\n 'no-const-assign': 'error',\n 'no-use-before-define': 'off',\n // 不允许无用的return\n 'no-useless-return': 'error',\n // 禁止类成员中出现重复的名称\n 'no-dupe-class-members': 'error',\n // 禁止console\n 'no-console': 'off',\n 'generator-star-spacing': 'off',\n '@typescript-eslint/no-inferrable-types': 'off',\n '@typescript-eslint/no-non-null-assert': 'off',\n '@typescript-eslint/no-non-null-assertion': 'off',\n 'vue/no-use-v-if-with-v-for': 'off',\n '@typescript-eslint/no-explicit-any': 'off',\n },\n};"
},
{
"path": ".gitignore",
"content": ".DS_Store\n.thumbs.db\nnode_modules\n\n# Quasar core related directories\n.quasar\n/dist\nquasar.config.js.temporary.compiled.*.mjs\n\n# Cordova related directories and files\n/src-cordova/node_modules\n/src-cordova/platforms\n/src-cordova/plugins\n/src-cordova/www\n\n# Capacitor related directories and files\n/src-capacitor/www\n/src-capacitor/node_modules\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n\n# local .env files\n.env.local*"
},
{
"path": ".npmrc",
"content": "# pnpm-related options\nshamefully-hoist=true\nstrict-peer-dependencies=false\n# to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463\nresolution-mode=highest"
},
{
"path": ".postcssrc.js",
"content": "/* eslint-disable */\n// https://github.com/michael-ciniawsky/postcss-load-config\n\nmodule.exports = {\n plugins: [\n // https://github.com/postcss/autoprefixer\n require('autoprefixer')({\n overrideBrowserslist: [\n 'last 4 Chrome versions',\n 'last 4 Firefox versions',\n 'last 4 Edge versions',\n 'last 4 Safari versions',\n 'last 4 Android versions',\n 'last 4 ChromeAndroid versions',\n 'last 4 FirefoxAndroid versions',\n 'last 4 iOS versions',\n ],\n }),\n\n // https://github.com/elchininet/postcss-rtlcss\n // If you want to support RTL css, then\n // 1. yarn/npm install postcss-rtlcss\n // 2. optionally set quasar.config.js > framework > lang to an RTL language\n // 3. uncomment the following line:\n // require('postcss-rtlcss')\n ],\n};\n"
},
{
"path": ".prettierrc",
"content": "{\n \"printWidth\": 200,\n \"tabWidth\": 2,\n \"semi\": true,\n \"singleQuote\": true,\n \"trailingComma\": \"es5\",\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": false\n}\n"
},
{
"path": ".vscode/settings.json",
"content": "{\n // ESLint 配置\n \"eslint.enable\": true,\n \"eslint.validate\": [\"javascript\", \"javascriptreact\", \"typescript\", \"typescriptreact\", \"vue\"],\n // 保存时自动修复 ESLint 错误（可修复的）\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\"\n },\n // TypeScript 配置\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"typescript.enablePromptUseWorkspaceTsdk\": true,\n // 保存时格式化（Prettier）\n \"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n // 文件类型对应的格式化器\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[vue]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[json]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[scss]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n // 保存时的操作顺序：先修复 ESLint，再格式化\n \"editor.codeActionsOnSaveTimeout\": 5000\n}\n"
},
{
"path": "README.md",
"content": "# Vue3 Typescript Template With Quasar framework\n\n---\n\n> ## **ENGLISH SUMMARY: ARCHITECTURE AND TECH STACK**\n>\n> ### Architecture Design and Tech Stack Summary: Hybrid Class and Composition API Paradigm\n>\n> This project adopts a highly optimized hybrid programming paradigm, aiming to combine the structural benefits of Class syntax with the flexibility of the Composition API, ensuring maintainability\n> and clarity in complex projects.\n>\n> ### I. Core Tech Stack and Paradigm\n>\n> | Module | Key Tool | Architectural Role |\n> | :-------------------- | :---------------------------- | :----------------------------------------------------------------------------------------------------- |\n> | **Class Syntax Core** | `vue-facing-decorator` | Used for implementing **business pages** and **Vuex modules**, providing an object-oriented structure. |\n> | **State Management** | `vuex-module-decorators` | Implements type-safe Class-based Vuex modules. |\n> | **Base Components** | Standard Vue 3 `setup` Syntax | Used for building general, loosely coupled base components (e.g., pagination, form inputs). |\n> | **Build Environment** | Webpack 5 | Responsible for handling the compilation and compatibility of Class structures and modern JavaScript. |\n>\n> ### II. Design Advantages and Maintainability\n>\n> 1. **Structure over Flatness:** In complex business pages, Class syntax provides a more organized and intuitive alternative to the raw Composition API `setup` logic.\n> 2. **Inheritance Model:** Component extension utilizes the clean **`extend` syntax** (instead of `mixin`), ensuring a clear inheritance chain and more reliable type inference.\n> 3. **Modular Design:** Base component libraries (e.g., `Pagination`) are modularly encapsulated, achieving high reusability.\n>\n> ### III. Business Code Organization (Class Area Segmentation)\n>\n> The Class structure enforced on business code mandates clear functional segmentation, significantly enhancing code readability and maintenance efficiency:\n>\n> | Class Member Area | Functional Description | Purpose |\n> | :---------------------------- | :---------------------------- | :------------------------------------------------------------------------------------- |\n> | `props` | External Interface Definition | Declares the component's external input data. |\n> | `get` / `set` | Computed Properties | Manages derived state and two-way binding logic. |\n> | `watch` | Reactive Side Effects | Centralizes logic for handling state change listeners. |\n> | `params` | Parameters & Configuration | Unifies the declaration of all required request parameters or internal configurations. |\n> | `event` (e.g., `handleClick`) | User Interaction Handling | Clearly defines methods triggered by user actions. |\n> | `http` (Async/Await) | Asynchronous Requests | Centralizes and executes all HTTP data fetching logic, optimizing data flow tracing. |\n\n---\n\n> ## **中文总结：架构设计与开发规范**\n>\n> ### 架构设计与开发规范总结：基于 Class 与 Composition API 的混合范式\n>\n> 该项目采用了一种高度优化的混合编程范式，旨在结合 Class 语法的结构优势和 Composition API 的灵活性，确保复杂项目的可维护性和清晰度。\n>\n> ### I. 核心技术栈与范式\n>\n> | 模块 | 关键工具 | 架构角色 |\n> | :----------------- | :----------------------- | :-------------------------------------------------------------- |\n> | **Class 语法核心** | `vue-facing-decorator` | 负责**业务页面**和**Vuex 模块**的实现，提供面向对象的代码结构。 |\n> | **状态管理** | `vuex-module-decorators` | 实现类型安全的 Class-based Vuex 模块。 |\n> | **基础组件** | 标准 Vue 3 `setup` 语法 | 用于构建通用、低耦合的组件库（如分页、表单输入）。 |\n> | **构建环境** | Webpack 5 | 负责处理所有 Class 结构和现代 JavaScript 的转译与兼容性。 |\n>\n> ### II. 设计优势与可维护性提升\n>\n> 1. **结构化优于扁平化：** 在复杂的业务页面中，Class 语法比 Composition API 的 `setup` 逻辑更直观、更具组织性。\n> 2. **继承模型：** 组件扩展使用清晰的 **`extend` 语法**，避免了 `mixin` 带来的隐式依赖和属性冲突问题。\n> 3. **模块化设计：** 基础组件库（例如 `Pagination`）采用模块化封装，实现高复用性。\n>\n> ### III. 业务代码组织规范 (Class 区域划分)\n>\n> 使用 Class 结构强制对业务逻辑进行清晰的分层，显著提升了代码的可读性和维护效率：\n>\n> | Class 成员区域 | 对应功能描述 | 作用 |\n> | :---------------------------- | :----------- | :------------------------------------------------- |\n> | `props` | 外部接口定义 | 声明组件的外部输入数据。 |\n> | `get` / `set` | 计算属性 | 负责派生状态和双向绑定逻辑。 |\n> | `watch` | 响应式副作用 | 集中处理状态变化时的监听逻辑。 |\n> | `params` | 参数与配置 | 统一声明组件所需的所有请求参数或内部配置。 |\n> | `event` (e.g., `handleClick`) | 事件处理 | 明确定义由用户交互触发的方法。 |\n> | `http` (Async/Await) | 异步请求 | 集中管理和执行所有 HTTP 数据请求，优化数据流追踪。 |\n\n---\n\n- Vue3 Class syntax online preview https://dirkhe1051931999.github.io/v3-admin\n\n- Vue2 Class syntax preview https://dirkhe1051931999.github.io/quasar\n\n> Login by typing in any username, code and password\n\n## Preview\n\n- Login\n\n![](\"https://hub.oolaf.top/wbimg?url=https://tvax1.sinaimg.cn/large/006rTftcly1i72g14ejzbj31o013iq4h.jpg\")
\n\n- Dashboard\n\n![](\"https://hub.oolaf.top/wbimg?url=https://tvax1.sinaimg.cn/large/006rTftcly1i72g14a05gj32t61eyqbk.jpg\")
\n\n- Table component\n\n![](\"https://hub.oolaf.top/wbimg?url=https://tvax1.sinaimg.cn/large/006rTftcly1i72g140d5fj32t61eyaiv.jpg\")
\n![](\"https://hub.oolaf.top/wbimg?url=https://tvax3.sinaimg.cn/large/006rTftcly1i72g13te7sj32t61eygug.jpg\")
\n![](\"https://hub.oolaf.top/wbimg?url=https://tvax1.sinaimg.cn/large/006rTftcly1i72g13lzmbj32t61ey466.jpg\")
\n\n## Install the dependencies (only support yarn)\n\n```bash\nyarn\n```\n\n### Start the app in development mode (hot-code reloading, error reporting, etc.)\n\n```bash\nyarn dev\n```\n\n### Lint the files\n\n```bash\nyarn lint\n# or\nnpm run lint\n```\n\n### Format the files\n\n```bash\nyarn format\n# or\nnpm run format\n```\n\n### generate svg\n\n```bash\nnpm run svg\n# will generate svg map file -> src/utils/custom-svg.ts\n```\n\n### Build the app for production\n\n```bash\nnpm run build\n```\n\n### Customize the configuration\n\nSee [Configuring quasar.config.js](https://quasar.dev/quasar-cli-webpack/quasar-config-file)."
},
{
"path": "babel.config.js",
"content": "/* eslint-disable */\n\nmodule.exports = (api) => {\n return {\n presets: [['@quasar/babel-preset-app', api.caller((caller) => caller && caller.target === 'node') ? { targets: { node: 'current' } } : {}]],\n plugins: [\n [\n 'prismjs',\n {\n languages: ['javascript', 'css', 'json', 'xml', 'html'],\n plugins: [],\n theme: 'coy',\n css: true,\n },\n ],\n ],\n };\n};\n"
},
{
"path": "check-version.js",
"content": "/* eslint-disable */\nconst execSync = require('child_process').execSync;\nlet nodeVersion = require('./package.json').itemVersion.node;\nlet yarnVersion = require('./package.json').itemVersion.yarn;\nfunction consoleError(msg) {\n console.error(`\\x1b[31m%s\\x1b[0m`, msg);\n}\nfunction consoleInfo(msg) {\n console.info(`\\x1b[36m%s\\x1b[0m`, msg);\n}\n// 获取yarn版本\nfunction getYarnVersion() {\n try {\n return execSync('yarn --version', { encoding: 'utf8' }).replace(/v/i, '').trim();\n } catch (error) {\n consoleError('Yarn is not installed.');\n process.exit(1);\n }\n}\n// 获取node版本\nfunction getNodeVersion() {\n try {\n return execSync('node --version', { encoding: 'utf8' }).replace(/v/i, '').trim();\n } catch (error) {\n consoleError('Node is not installed.');\n process.exit(1);\n }\n}\n// yarn.lock 文件是否存在\nfunction haveYarnLock() {\n const fs = require('fs');\n return fs.existsSync('yarn.lock');\n}\n\n// 1. yarn.lock 文件是否存在\nif (!haveYarnLock()) {\n consoleError('yarn.lock file does not exist.');\n process.exit(1);\n}\n// 2. yarn 是否安装\nconst currentYarnversion = getYarnVersion().replace(/\\./g, '');\nconst currentNodeVersion = getNodeVersion().replace(/\\./g, '');\nconst _nodeVersion = nodeVersion.replace(/\\./g, '').split(' ')[1];\nconst _yarnVersion = yarnVersion.replace(/\\./g, '').split(' ')[1];\n\n// 3. node版本是否符合\n\nif (currentNodeVersion !== _nodeVersion) {\n consoleError(`Current node version is ${getNodeVersion()}, the required version is ${nodeVersion}`);\n consoleInfo(`Please use nvm to switch the node version, https://github.com/coreybutler/nvm-windows`);\n process.exit(1);\n}\n\n// 4. yarn版本是否符合\nif (currentYarnversion < _yarnVersion) {\n consoleError(`Current yarn version is ${getYarnVersion()}, the required version is ${yarnVersion}`);\n consoleInfo(`Please upgrade yarn to the required version, https://github.com/yarnpkg/yarn/releases`);\n process.exit(1);\n}\n"
},
{
"path": "generate-svg-component.js",
"content": "/**\n * svg-to-vue.js\n * * Node.js 脚本：跑一下这个，能把 SVG 转成 Vue 组件，顺便生成一个动态加载的 index.vue。\n */\n\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst fs = require('fs/promises');\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst path = require('path');\n\n// --- 配置路径 ---\nconst SVG_DIR = path.resolve(__dirname, 'src/assets/svg');\nconst OUTPUT_DIR = path.resolve(__dirname, 'src/components/j-c-svg');\nconst INDEX_FILE_PATH = path.join(OUTPUT_DIR, 'index.vue');\n\n// 存一下所有生成的组件名，index.vue 要用\nconst componentNames = [];\n\n/**\n * 把文件名转成 Vue 组件名 (格式: svgPascalCase)。\n * @param {string} filename SVG 文件名\n * @returns {string} 转换后的组件名 (例如: esim-list.svg -> svgEsimList)\n */\nfunction toVueComponentName(filename) {\n // 移除 .svg 后缀\n const baseName = path.parse(filename).name;\n\n // 按 - _ . 或空格拆分，全转小写\n const parts = baseName.toLowerCase().split(/[-._\\s]/);\n\n // 把 'esim', 'list' 转成 'Esim', 'List'\n const camelCased = parts\n .map((part) => {\n return part.charAt(0).toUpperCase() + part.slice(1);\n })\n .join(''); // 拼接成 'EsimList'\n\n // 加上 'svg' 前缀，变成 'svgEsimList'\n return `svg${camelCased}`;\n}\n\n/**\n * 组装单个 Vue 组件的 .vue 文件内容\n * @param {string} svgContent 经过处理的 SVG 内容字符串\n * @param {string} componentName Vue 组件名\n * @returns {string} 完整的 Vue 组件字符串\n */\nfunction generateSvgComponent(svgContent, componentName) {\n // 找到