feat: 新增工厂区域管理页面，修复Sass废弃警告

1. 新增生产配置-工厂模型-工厂区域完整CRUD页面
2. 新增通用表格、弹窗表单、i18n工具组件
3. 升级sass-loader并修复Sass废弃警告
4. 添加文档记录Sass迁移修复细节

src/composables/useI18n.js

@@ -0,0 +1,28 @@
+/**
+ * i18n Mixin 工厂：消除每个页面重复写 tkey() 方法
+ *
+ * @param {string} prefix 页面的 i18n key 前缀，如 'page.production_master_data.factory_model.factory_area'
+ * @returns {Object} Vue mixin
+ *
+ * @example
+ * import { i18nMixin } from '@/composables/useI18n'
+ * export default {
+ *   mixins: [i18nMixin('page.production_master_data.factory_model.factory_area')],
+ *   // 模板中当前页面用 $t(key('code'))
+ *   // 公共翻译用 $t(ckey('help')) → 'page.common.help'
+ * }
+ */
+export function i18nMixin (prefix) {
+  return {
+    methods: {
+      key (suffix) {
+        return prefix + '.' + suffix
+      },
+      ckey (suffix) {
+        return 'page.common.' + suffix
+      }
+    }
+  }
+}
+
+export default i18nMixin

src/composables/useTableButtons.js

@@ -0,0 +1,48 @@
+/**
+ * 按钮定义工具：消除 buttonList / tableButtonList 重复定义
+ *
+ * @param {Object} options
+ * @param {Array}  options.toolbar   顶部工具栏按钮
+ * @param {Array}  options.row       行内操作按钮
+ * @param {Function} permissionCheck  权限校验函数，默认 $permission
+ * @returns {{ toolbarButtons: Array, rowButtons: Array }}
+ *
+ * @example
+ * import useTableButtons from '@/composables/useTableButtons'
+ * // 在组件 data() 或 created() 中调用
+ * const { toolbarButtons, rowButtons } = useTableButtons({
+ *   toolbar: [{ key: 'add', label: '新建', type: 'primary', auth: '/xxx/create', onClick: this.openDialog }],
+ *   row: [{ key: 'edit', label: '编辑', auth: '/xxx/edit', onClick: this.handleEdit }],
+ * }, this.$permission)
+ */
+export function useTableButtons (options = {}, permissionCheck) {
+  const check = permissionCheck || (() => true)
+
+  const toolbarButtons = (options.toolbar || []).map(btn => ({
+    key: btn.key || btn.label,
+    label: btn.label,
+    icon: btn.icon,
+    type: btn.type || '',
+    size: btn.size || 'mini',
+    auth: btn.auth,
+    cssStyle: btn.cssStyle || {},
+    onClick: btn.onClick,
+    hasPermission: btn.auth ? check(btn.auth) : true
+  }))
+
+  const rowButtons = (options.row || []).map(btn => ({
+    key: btn.key || btn.label,
+    label: btn.label,
+    icon: btn.icon,
+    color: btn.color || '',
+    cssStyle: btn.cssStyle || { marginRight: '10px', cursor: 'pointer' },
+    auth: btn.auth,
+    confirm: btn.confirm || false,
+    onClick: btn.onClick,
+    hasPermission: btn.auth ? check(btn.auth) : true
+  }))
+
+  return { toolbarButtons, rowButtons }
+}
+
+export default useTableButtons

src/composables/useTableColumns.js

@@ -0,0 +1,46 @@
+/**
+ * 列定义工具：消除手动分配 idx，支持 _actions 约定
+ *
+ * @param {Array<Object>} rawColumns 列配置数组
+ * @param {Object} options
+ * @param {number} options.selectionWidth 复选框列宽度，默认 55，传 0 不显示
+ * @param {number} options.indexWidth 序号列宽度，默认 60，传 0 不显示
+ * @returns {Array<Object>} 补齐 idx 后的列数组
+ *
+ * @example
+ * const columns = useTableColumns([
+ *   { prop: 'code', label: '编码', minWidth: 120 },
+ *   { prop: 'name', label: '名称' },
+ *   { prop: '_actions', label: '操作', width: 180, fixed: 'right' },
+ * ])
+ */
+export function useTableColumns (rawColumns, options = {}) {
+  const { selectionWidth = 55, indexWidth = 0 } = options
+
+  const result = []
+
+  if (selectionWidth > 0) {
+    result.push({ idx: 0, type: 'selection', width: selectionWidth })
+  }
+  if (indexWidth > 0) {
+    result.push({ idx: result.length, type: 'index', width: indexWidth, label: '#' })
+  }
+
+  let slotIdx = 100
+  rawColumns.forEach((col, i) => {
+    const clean = { ...col }
+    if (clean.prop === '_actions') {
+      clean.slot = '_actions'
+      clean.idx = slotIdx++
+    } else if (clean.slot || clean.headerSlot) {
+      clean.idx = slotIdx++
+    } else {
+      clean.idx = result.length
+    }
+    result.push(clean)
+  })
+
+  return result
+}
+
+export default useTableColumns